How to split one task in multiple parts having different colors

Gantt
#1

Hello everyone,

We are using this library at work for a project and the client is asking us to develope this feature:
“Tasks can have periods of inactivity. These periods will be displayed on the timeline by either a blank color or a different color than the one already used for the task. There can be multiple inactivity periods between the start date and end date of one task.” Example : start IIIIIIIII IIIII III end

I have beeen browsing the documentation for a few hours and from what I can tell there does not seem to be a way to separate one task in multiple parts and assign a different color to each one.

Can anyone help me with a way to do it? Coloring multiple background cells behind the task bar while reducing task bar height at the same time could also work but I have no idea how to achieve this result.

Thanks in advance.

Edit: Seems like this could work out: https://docs.dhtmlx.com/gantt/desktop__split_tasks.html

#2

Hello,
Yes, you can use split tasks for this adaptation:
https://docs.dhtmlx.com/gantt/desktop__split_tasks.html ;
One of the options is to add different CSS classes which will depending on custom task’s property with periods of inactivity. To specify the CSS class that will be applied to task bars use task_class template:
https://docs.dhtmlx.com/gantt/api__gantt_task_class_template.html ;
Please check the following snippet:
https://snippet.dhtmlx.com/afw7jyuj ;
Also, you can try to use task_text template:
https://docs.dhtmlx.com/gantt/api__gantt_task_text_template.html ;
with HTML content inside. As an example:
https://docs.dhtmlx.com/gantt/samples/04_customization/09_html_content.html ;
Another solution is to add some element on the desired dates on top of the task strip to indicate an inactive period using gantt.addTaskLayer :
https://docs.dhtmlx.com/gantt/api__gantt_addtasklayer.html ;
There is an article about it:
https://docs.dhtmlx.com/gantt/desktop__baselines.html