Adding Vertical Markers

The library provides the marker extension that allows you to mark (highlight) certain dates or date ranges.

To start using the extension, enable the marker plugin using the gantt.plugins method.

<!DOCTYPE html>
<html>
<head>
   <script src="codebase/dhtmlxgantt.js"></script>   
   <link href="codebase/dhtmlxgantt.css" rel="stylesheet">   
</head>
<body>
    gantt.plugins({         marker: true     });     //your code will be here
</body>
</html>

Adding a marker

To add a marker to the timeline area, e.g. the today's marker, call the addMarker method:

var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
var markerId = gantt.addMarker({
    start_date: new Date(), //a Date object that sets the marker's date
    css: "today", //a CSS class applied to the marker
    text: "Now", //the marker title
    title: dateToStr( new Date()) // the marker's tooltip
});

Note, as the value of the 'text' property, the method can take any HTML

To get an object of the added marker, use the getMarker method:

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:...}

Removing a marker

To remove once added marker, use the deleteMarker method:

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);

Hiding markers

To hide all added markers, set the show_markers configuration option to 'false':

var marker1 = gantt.addMarker({ ...}); 
var marker2 = gantt.addMarker({ ...}); 
var marker3 = gantt.addMarker({ ...}); 
 
gantt.config.show_markers = false;// hides all 3 markers

Updating a marker

To update a marker, use the updateMarker method:

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);

To update all added markers, use the renderMarkers method:

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

Styling markers

To style markers, use the gantt.templates.marker_class template:

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

Today's marker

Let's assume that you want to have the today's marker in your Gantt chart. In this case you need both: to add a marker on the page and to provide a function that will move the marker as the time changes. You can do this with the following code:

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 = date_to_str(today.start_date);
    gantt.updateMarker(id);
}, 1000*60);