Custom css for overlap tasks,

#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);
    })