본문으로 건너뛰기

timeline_cell_content

Description​

타임라인 셀 내부에 커스텀 HTML 콘텐츠를 지정할 수 있습니다.

timeline_cell_content: (task: Task, date: Date) => string | number | void;

Parameters​

  • task - (required) Task - 작업 객체
  • date - (required) Date - 셀에 해당하는 날짜

Returns​

  • text - (string | number | void) - HTML 문자열

Example​

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

Details​

노트

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

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

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

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

Change log​

  • v8.0에 추가됨