Custom css for overlap tasks,

Gantt
#1

I followed this snippet to achieve a custom style for the task if the tasks overlap each other and it is working great.

My problem is that this code is implemented with onAfterTaskUpdate attachEvent and it is not taken into consideration the situation if the orders come by default overlap and not when the user moves them around.

I tried to look at something similar attachEvent that will listen onBeforeTaskUpdate (?) which also will get as parameters id and task and I didn’t find.

There is a way to achieve this?

Thanks.

#2

I found a way to achieve that with this code (I wanted to custom the css just for tasks no for projects):

    const overlapping = (task) => {
        const {id}  = task;
        if (task.type !== 'project') {
            var parent = gantt.getTask(task.parent);
            var overlaps = false;
            if (parent.render === 'split' && !parent.$open ){
                gantt.eachTask(function (child){
                if ((child.id != task.id ) && (+task.start_date < +child.end_date && +task.end_date > +child.start_date ) && (!child.$overlap)) 
                    overlaps = true;
                },parent.id)
            }
            if (overlaps) {
                task.$overlap = true;
                gantt.refreshTask(id)
            }
            else if (task.$overlap) {
                delete task.$overlap
                gantt.refreshTask(id)
            }
        }
    }

    gantt.eachTask(function(task){
         overlapping(task);
    })
#3

Is there a way the get the ID of the task that the new task is overlapping with?
We’d like to change the color of that task also, not only the overlapping task.

#4

Hello Harold,
It depends on what code you use. And as there is no ready solution for that, you will need to implement it manually.

If you use this snippet:
https://snippet.dhtmlx.com/5/afae95e75
You can use something like this:
https://snippet.dhtmlx.com/n8qewe51
Please note that it is not a complete solution and it will not work in all possible scenarios. It is only an example that can help you to start implementing your solution.

#5

Thank you very much, your code snippet helped me a lot to achieve what we need !

1 Like