timeline_cell_content

允许在 timeline 单元格内指定自定义 HTML 内容

task	Task	任务对象
date	Date	对应单元格的日期

Example

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

Custom content inside the timeline cells

Details

当你想在 timeline 单元格内显示自定义内容时，推荐使用此模板，而不是 addTaskLayer() 方法。该模板实现更简单且性能更优。

请注意，自定义内容会显示在任务条的下方，因此任务条的 z-index 更高。这意味着如果任务条覆盖了单元格，自定义内容可能会被隐藏。

如果你希望自定义内容显示在任务条之上，可以为自定义元素设置更高的 'z-index'：

<style>    .cost{
        position:absolute;
        z-index: 5;
        pointer-events: none; 
    }
</style>