How to display vacations on gantt (collision handling)

Gantt
#1

Hi everyone,

I am currently using GPL version of Gantt.
Each task in my case displayed on the same line (render: split).

If a planning task belongs to me which starts 05.06.2019 duraton 5 days but the I am on vacation between 05.06.2019 and 10.06.2019.
There is a “collision” in this case I should have to display with different color in this case.

So, how can I display vacation dates on gantt to be able to handle collisions?
What would be the best solution?

Thanks
Zoltan

#2

Hi @cookiez!

If I understand you correctly you want just display collisions of the tasks and vacation dates on the timeline area.

There are various ways of how it might be implemented.

It can implement by using additional layers.
If you have vacation dates as a string type data modify it to the time object using gantt.date.str_to_date() method:
https://docs.dhtmlx.com/gantt/desktop__date_operations.html#convertingastringtoadateobject

Use addTaskLayer() method to add custom elements for the task crossing the vacation dates:
https://docs.dhtmlx.com/gantt/api__gantt_addtasklayer.html

Use valueOf() method from the public API to compare date values:

Here is a snippet how it can be implemented:
http://snippet.dhtmlx.com/3961083da

Alternatively you can do this using task_cell_class template.
Here is a related article:
https://docs.dhtmlx.com/gantt/api__gantt_task_cell_class_template.html
Here is a related snippet:
http://snippet.dhtmlx.com/991d90ef5

Alternatively you can do this using task_class template.
Here is a related article:
https://docs.dhtmlx.com/gantt/api__gantt_task_class_template.html
Here is a related snippet:
http://snippet.dhtmlx.com/aa3f510dd

You can also check the article and the sample about the working time:
https://docs.dhtmlx.com/gantt/desktop__working_time.html
https://docs.dhtmlx.com/gantt/samples/09_worktime/06_task_calendars.html
Use setWorkTime() method to set the working time for the Gantt chart:
https://docs.dhtmlx.com/gantt/api__gantt_setworktime.html
Use unsetWorkTime() method to unset vacation dates:
https://docs.dhtmlx.com/gantt/api__gantt_unsetworktime.html

Does it resolve your issue? Please let me know if you need something different?

#3

Hi @guldmi,

Thanks for your reply. Addtasklayer looks promising to me.
This solution is not working if I use projects (render:“partial”) only without any parent project.
I am trying to solve my problem using an additional json which stores the vacation data.

Lets say I have different type of tasks (meeting, planning, production, etc.). Their parent project render property is set to split.
I would like to show collisions for tasks (type:planning) but addtasklayer fires only projects.

http://snippet.dhtmlx.com/891e72945

Thanks,
cookiez

#4

Hello Cookiez,
Gantt uses the additional layer to display split tasks that’s why it doesn’t fire for the children of the split project task.
But you can use a variable to check if we should highlight the cells or not.
The first condition check remains the same:

var highlight_vacations = false;
 if (vacations.data[i].designer === task.designer) highlight_vacations = true;

Then you check if the task is split and that it has children. When it is true, you check each child task for the same condition:

if (task.render == "split" && gantt.hasChild(task.id)) gantt.eachTask(function(child){
        if (vacations.data[i].designer === child.designer) highlight_vacations = true;
},task.id);

Here is the updated snippet:
http://snippet.dhtmlx.com/17a84d727

However, have you checked the work time option? The additional layer allows you to highlight the vacation days and display it over tasks. But tasks remain at the same place. While the working time stretches the tasks excluding the weekends and vacation days from the duration.
Here is an example(try moving tasks to the highlighted days):
https://snippet.dhtmlx.com/795a84e74

#5

Hi

I solved my “issue” with the following. Additional task property is added to every task named subtype.

gantt.addTaskLayer(function draw_vacation(task) {
if (task.render !== “split”)
return false;

    var plantask = gantt.getTaskBy(tasks => tasks.subtype=== "plan" && tasks.parent === task.id);

    if (plantask.length === 1)
    {
         //find if designer is on vacation and add the necessary layer
    }

I tried Working time but did not find it usefull to me.

I have a small problem with column width on timeline. I would like to change the width of columns to as low as needed but it did not work.
gantt.config.subscales = [
{ unit: “day”, step: 1, date: “%d.” }
];

gantt.config.min_column_width = 10;

The lowest column width was 49px on every element but it is much more then I want.

07.

Is there any solution to be able to change column width?

Thanks,
Zoltan

#6

Hello Zoltan,
The min_column_width parameter changes the minimal width of the column in the timeline. It doesn’t change the column width of the “lowest” scale cell. So, when you get 49px for the column width, it works as expected because 49 is not less than 10, so Gantt doesn’t change the column width.
Gantt doesn’t have a property like gantt.config.min_column_min_width.
Instead, Gantt stretches the columns to fit all the available space.
So, if you want to change the width of the minimal scale, you need to increase the displayed date range:
http://snippet.dhtmlx.com/e6711b746