specifies custom HTML content in the timeline cells

taskTaskthe task's object
dateDatethe date of a cell


gantt.templates.timeline_cell_content = function (task, date) {
    if (gantt.getTaskType(task) === "task"){
        const cost = calculateSlotCost(task, date);
        return `<div class='cost'>${demoValue}</div>`;
    return "";

Related samples


You should use this template instead of the addTaskLayer() method in cases when you need to show custom content in cells of the timeline. It will be easier to implement and faster in performance.

Note, that the custom content will be displayed below the task bars, meaning the task bars will have higher z-index and the content of cells won't be visible when the task bar is located on top of it. If you need the content to be visible over the bar, you can add 'z-index' to the custom element:

        z-index: 5;
        pointer-events: none; 
See also
Change log

added in v8.0

Back to top