Regarding task repetition and color change

[zhongzhixinLvoe]

I want to change the color of the duplicated parts when there are two tasks on my end. I have searched the official documentation, but it seems that I have not found it yet. Is it because the official has not implemented it? If so, could you please send me the corresponding document address? Thank you

[MaksimLakatkouXBPL]

Hello, In Gantt, each task must have a unique ID. If some tasks have the same properties but unique IDs, Gantt can't determine which task is a duplicate. That's why there's no ready solution for changing colors in such cases. Could you please clarify what 'duplicated parts when there are two tasks' means and how does a task duplicate appear in Gantt? Then I can try to help.

[zhongzhixinLvoe]

Each task has a start and end time. If the start and end times of two tasks in the same column overlap, then I hope they are different colors from these two tasks. For example, task_id1 has a start time of 20240420 and an end time of 20240425, and task_id2 has a start time of 20240422 and an end time of 20240428. At this time, there is a repetition of the time period from 0422 to 0425, making this repeated time period different colors. Can you provide help or implement an idea? Thank you very much

[MaksimLakatkouXBPL]

Hello, You can manually handle task overlaps and color updates with the following approach: Define a function to check for date overlaps:

function tasksOverlap(task1, task2) {
    const task1_start = task1.start_date;
    const task1_end = task1.end_date;

    const task2_start = task2.start_date;
    const task2_end = task2.end_date;

    return (task1_start < task2_end && task1_end > task2_start);
}

Then, utilize eachTask to iterate through all tasks and update their colors if there are any overlaps:

function updateTaskColors() {
    gantt.eachTask((task) => {
        delete task.color;

        gantt.eachTask((otherTask) => {
            if (task.id !== otherTask.id && tasksOverlap(task, otherTask)) {
                task.color = 'red';
                otherTask.color = 'red';
                gantt.refreshTask(task.id);
                gantt.refreshTask(otherTask.id);
            }
        });

        gantt.refreshTask(task.id);
    });
}

gantt.attachEvent('onAfterTaskAdd', (id, item) => {
    updateTaskColors();
});

gantt.attachEvent('onAfterTaskUpdate', (id, item) => {
    updateTaskColors();
});

Here is an example: https://snippet.dhtmlx.com/bu3cssna . Please note that this is not a complete example, but based on it, you can modify it to suit your needs.

[zhongzhixinLvoe]

Thank you very much. I will try to implement it using the method you provided first