Adding Vertical Markers

The library provides the ext/dhtmlxgantt_marker.js extension that allows you to mark (highlight) certain dates or date ranges.

To start using the extension, include the ext/dhtmlxgantt_marker.js file on the page.

<!DOCTYPE html>
<html>
<head>
   <script src="codebase/dhtmlxgantt.js"></script>   
   <link href="codebase/dhtmlxgantt.css" rel="stylesheet">   
   <script src="codebase/ext/dhtmlxgantt_marker.js"></script>  </head>
<body>
    //your code will be here
</body>
</html>

Related sample:  Today and Status lines in Gantt

Adding a marker

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

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:date_to_str( new Date()) // the marker's tooltip
});

Related sample:  Today and Status lines in Gantt

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 markerId = gantt.addMarker({      start_date: new Date(), 
    css: "today", 
    text: "Now", 
    title:date_to_str( new Date()) 
});
gantt.getMarker(markerId); //->{css:"today", text:"Now", id:...}

Related sample:  Today and Status lines in Gantt

Removing a marker

To remove once added marker, use the deleteMarker method:

var markerId = gantt.addMarker({      start_date: new Date(), 
    css: "today", 
    text: "Now", 
    title:date_to_str( 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 markerId = gantt.addMarker({      start_date: new Date(), 
    css: "today", 
    text: "Now", 
    title:date_to_str( 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 date_to_str = gantt.date.date_to_str(gantt.config.task_date);
 
var id = gantt.addMarker({ 
    start_date: new Date(), 
    css: "today", 
    title:date_to_str( 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);

Related sample:  Today and Status lines in Gantt

Back to top