Is there support for adding an icon above any date in a Gantt chart?

Gantt
#1

Hello,
Is there support for adding an icon above any date in a Gantt chart?
Are there any examples you can refer to?

For example，
data is as follows

data:[{
id: 1,
start_date:'xxxxxx',
end_date:'xxxxxx',
flag:'2024-04-07 09:00'
},{
id: 1,
start_date:'xxxxxx',
end_date:'xxxxxx'
}]

I want to add an icon to the date of the attribute value when there is a flag attribute, for example 2024-04-07 09:00

Are there any examples you can refer to?

image
image1603×521 59.8 KB

#2

Hello,
You can use the task_text template for this:

gantt.templates.task_text = (start, end, task) => {
    if (task.flag) {
        return `<i class='custom_icon icon fa fa-check-circle-o'></i> ${task.text}`;
    }

    return task.text;
};

Please see an example: DHTMLX Snippet Tool

#4

Hello，
Thanks for your answer.

But I think I can’t use task text.
The position of the icon is dynamic.
For example,
if the value of flag = 2024.1.11 icon will be above the cell on the date 2024.1.11 above the task.
Is there another way? @Maksim_Lakatkou

#5

Hello,
I understand your request now. You can achieve this by using addTaskLayer:

gantt.attachEvent("onGanttReady", function () {
    gantt.addTaskLayer(drawIcons);
});

function drawIcons(task) {
    if (task.flag) {
        const flagDate = new Date(task.flag);
        const sizes = gantt.getTaskPosition(task, flagDate); // Get the position for the icon on the timeline

        // Create the container for the icon
        const mainDiv = document.createElement('div');
        mainDiv.className = 'icons';

        // Create the icon element
        const el = document.createElement('div');
        el.setAttribute('data-task', task.id);
        el.setAttribute('data-icon', 'flag');
        el.className = 'icon fa fa-flag';
        el.style.left = sizes.left + 'px';
        el.style.top = sizes.top + 6 + 'px';

        mainDiv.appendChild(el); // Append the icon to the container

        return mainDiv;
    }
};

CSS styles:

.icon {
    position: absolute;
    border-radius: 2px;
    height: 20px;
    width: 20px;
    font-size: 20px;
    background: #eee;
    z-index: 2;
}

Here is an example: DHTMLX Snippet Tool