timeline_cell_content

타임라인 셀 내부에 커스텀 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

이 템플릿은 타임라인 셀 내부에 커스텀 콘텐츠를 표시하고자 할 때 addTaskLayer() 메서드보다 선호됩니다. 구현이 더 간편하며 성능도 더 우수합니다.

커스텀 콘텐츠는 작업 바 아래에 표시되므로 작업 바가 더 높은 z-index를 가집니다. 따라서 작업 바가 셀을 덮는 경우 콘텐츠가 가려질 수 있다는 점을 유의하세요.

커스텀 콘텐츠가 작업 바 위에 표시되길 원한다면, 커스텀 요소에 더 높은 'z-index'를 지정할 수 있습니다:

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