Hinzufügen von vertikalen Markern

Die Bibliothek enthält eine marker-Erweiterung, mit der Sie bestimmte Daten oder Datenbereiche auf Ihrer Zeitleiste hervorheben können.

Um diese Funktion zu nutzen, stellen Sie sicher, dass Sie das marker-Plugin über die Methode gantt.plugins aktivieren.

<!DOCTYPE html>
<html>
<head>
   <script src="codebase/dhtmlxgantt.js"></script>   
   <link href="codebase/dhtmlxgantt.css" rel="stylesheet">   
</head>
<body>
    gantt.plugins({         marker: true     });     //Ihr Code wird hier sein
</body>
</html>

Hinzufügen eines Markers

Um einen Marker in die Zeitleiste aufzunehmen, wie zum Beispiel einen Marker für das heutige Datum, können Sie die Methode gantt.addMarker verwenden:

var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
var markerId = gantt.addMarker({
    start_date: new Date(), // Date-Objekt für den Marker
    css: "today", // CSS-Klasse für das Styling
    text: "Now", // Titel für den Marker
    title: dateToStr(new Date()) // Tooltip für den Marker
});

Die 'text'-Eigenschaft kann beliebigen HTML-Inhalt enthalten.

Wenn Sie ein Objekt für einen vorhandenen Marker abrufen müssen, können Sie die Methode gantt.getMarker aufrufen:

var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
var markerId = gantt.addMarker({      start_date: new Date(), 
    css: "today", 
    text: "Now", 
    title: dateToStr(new Date()) 
});
gantt.getMarker(markerId); //->{css:"today", text:"Now", id:...}

Entfernen eines Markers

Um einen zuvor hinzugefügten Marker zu entfernen, verwenden Sie die Methode gantt.deleteMarker:

var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
var markerId = gantt.addMarker({      start_date: new Date(), 
    css: "today", 
    text: "Now", 
    title: dateToStr(new Date()) 
});
 
gantt.deleteMarker(markerId);

Ausblenden von Markern

Alle Marker können auf einmal ausgeblendet werden, indem die Konfigurationsoption gantt.config.show_markers auf false gesetzt wird:

var marker1 = gantt.addMarker({ ...}); 
var marker2 = gantt.addMarker({ ...}); 
var marker3 = gantt.addMarker({ ...}); 
 
gantt.config.show_markers = false; // versteckt alle 3 Marker

Aktualisieren eines Markers

Wenn Sie Änderungen an einem Marker vornehmen müssen, können Sie die Methode gantt.updateMarker verwenden:

var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
var markerId = gantt.addMarker({      start_date: new Date(), 
    css: "today", 
    text: "Now", 
    title: dateToStr(new Date()) 
});
 
gantt.getMarker(markerId).css = "today_new";
gantt.updateMarker(markerId);

Zum Aktualisieren aller Marker auf einmal kann die Methode gantt.renderMarkers verwendet werden:

var marker1 = gantt.addMarker({ ...}); 
var marker2 = gantt.addMarker({ ...}); 
var marker3 = gantt.addMarker({ ...}); 
 
gantt.renderMarkers();

Styling von Markern

Um das Styling von Markern anzupassen, ist die Vorlage gantt.templates.marker_class nützlich:

var showAdvancedMarkers;
gantt.templates.marker_class = function(marker){
    if (showAdvancedMarkers)
    return "advanced_marker";
    return "hidden";
}

Heutiger Marker

Wenn Sie einen Marker für das heutige Datum in Ihrem Gantt-Diagramm anzeigen möchten, müssen Sie den Marker hinzufügen und eine Funktion einrichten, um seine Position mit der Zeit zu aktualisieren. Hier ist ein Beispiel:

var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
 
var id = gantt.addMarker({ 
    start_date: new Date(), 
    css: "today", 
    title: dateToStr(new Date())
});
setInterval(function(){
    var today = gantt.getMarker(id);
    today.start_date = new Date();
    today.title = dateToStr(today.start_date);
    gantt.updateMarker(id);
}, 1000*60);

Zurück nach oben