https://snippet.dhtmlx.com/z34xn9wp
As you can see I’m able to clamp the task on update between working days/times.
However, the project doesn’t seem to respect the task start/end. Please try moving the task towards the edge of working days, and it ends up looking like this:
As you can see the project is outside of the working time.
Is there some built-in way to handle this? Basically if users have set working days/hours, then I want the chart to respect those boundaries.
Thank you
Hello,
If I understand your question correctly, you would like to update the dates of a task after it has been dragged, to ensure that the task remains within its assigned work time boundaries.
Gantt has a correct_work_time config which enables adjusting the task’s start and end dates to the work time when you’re dragging it:
correct_work_time Gantt Docs ;
Please check the following snippet:
https://snippet.dhtmlx.com/sdbrk3cy
Thanks, yes that is partly the way there. At least the project and task are in sync now.
The issue is the work hours. In the snippet those hours are set to 9am to 5pm.
With your snippet, I am able to put the task at 2am. That is outside of working hours.
How can I get it so that the work time hours are accounted for in the timeline rendering?
Hello,
I apologize for not considering the working hours. By default, Gantt uses a duration_unit of days, which only accounts full days off in calculations of non-working time:
duration_unit Gantt Docs ;
To include non-working hours, you should set the duration_unit to hour.
Please check the example of implementation:
DHTMLX Snippet Tool ;
It is worth considering, that then you need to take into account the change in task duration in your data.
Thank you vm! That is awesome.
Just one question - I was reading Highlighting Time Slots Gantt Docs
I am wondering if its possible somehow to grey out the non-working hours while keeping the scale to show Month and Day. It seems that with the gantt.templates.[timeline/scale]_cell_class it applies to the whole cell.
For example, with 9am to 5pm working hours, I’m wondering how to grey out the non-working times of th day. I am trying to see if I can use pseudo classes and the time_step value to try and set it but not working out for me.
Thank you again
Hello,
It seems that with the gantt.templates.[timeline/scale]_cell_class it applies to the whole cell.
This is how the Gantt templates work. In your case, you can specify the required format of the scales object:
For an example, you can specify day and hour scale units and implement a custom functions to the css parameter that will be applied to the scale units.
The implementation of this custom function might look like:
function checkHighlight(date) {
if (date.getDay() === 0 || date.getDay() === 6 || date.getHours() < 9 || date.getHours() > 17) {
return "weekend";
}
}
In your attached snippet, there was disabled gantt.config.show_task_cells:
You need to enable this config, to implement the CSS classes to the required cells of the timeline area with gantt.templates.timeline_cell_class.
Please check the following snippet of how it might be implemented:
https://snippet.dhtmlx.com/535vn8ei
Thanks!
For example here is how my timeline looks:
On 2 Mon there’s a gap since working hour starts at 9am. Just wondering is it possible to somehow gray out that portion of 2 Mon until 9am.
I can use hours, and grey out accordingly. However, that makes the scales really long. Cheers!
Hello,
Unfortunately, there is no built-in way to do it, but it could be implemented as a custom solution. There is an option to add a custom content into timeline cells (but this option doesn’t work with scales) with the help of addTaskLayer method:
You can designate non-working hours in a cell depending on a specific date and time, with a custom layer. You can get the required position of the specific content with getTaskPosition method, which calculates the position and size of the task’s DOM element in the timeline area:
Please check an example of how it might be implemented:
https://snippet.dhtmlx.com/9ljtknx8
Amazing! Thank you so much Artyom!
