Zum Hauptinhalt springen

timeline_cell_content

Description​

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

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

Parameters​

  • task - (required) Task - Das Task-Objekt
  • date - (required) Date - Das Datum, das der Zelle entspricht

Returns​

  • text - (string | number | void) - Ein HTML-String

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​

Hinweis

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>

Change log​

  • hinzugefügt in v8.0