timeline_cell_content

Ermöglicht das Festlegen von benutzerdefiniertem HTML-Inhalt innerhalb von Timeline-Zellen

task	Task	Das Task-Objekt
date	Date	Das Datum, das der Zelle entspricht

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

Diese Template-Option ist der addTaskLayer() Methode vorzuziehen, wenn Sie benutzerdefinierten Inhalt innerhalb von Timeline-Zellen anzeigen möchten. Sie ist einfacher zu implementieren und bietet bessere Performance.

Beachten Sie, dass der benutzerdefinierte Inhalt unterhalb der Task-Balken angezeigt wird, da die Task-Balken einen höheren z-index besitzen. Das bedeutet, dass der Inhalt möglicherweise verdeckt wird, wenn ein Task-Balken die Zelle überlappt.

Wenn Sie möchten, dass der benutzerdefinierte Inhalt über den Task-Balken angezeigt wird, können Sie Ihrem benutzerdefinierten Element einen höheren 'z-index' zuweisen:

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