Добавление вертикальных маркеров

Библиотека предоставляет расширение marker, которое позволяет выделять определенные даты или диапазоны дат на вашей временной шкале.

Чтобы использовать эту функцию, убедитесь, что вы включили плагин marker через метод gantt.plugins.

<!DOCTYPE html>
<html>
<head>
   <script src="codebase/dhtmlxgantt.js"></script>   
   <link href="codebase/dhtmlxgantt.css" rel="stylesheet">   
</head>
<body>
    gantt.plugins({         marker: true     });     //ваш код будет здесь
</body>
</html>

Добавление маркера

Чтобы добавить маркер на временную шкалу, например, для сегодняшней даты, вы можете использовать метод gantt.addMarker:

var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
var markerId = gantt.addMarker({
    start_date: new Date(), // объект Date для маркера
    css: "today", // CSS-класс для стилизации
    text: "Now", // Заголовок для маркера
    title: dateToStr(new Date()) // Тултип для маркера
});

Свойство 'text' может содержать любой HTML-контент.

Если вам нужно получить объект существующего маркера, вы можете вызвать метод gantt.getMarker:

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

Удаление маркера

Чтобы удалить ранее добавленный маркер, используйте метод 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);

Скрытие маркеров

Все маркеры могут быть скрыты одновременно, если установить параметр конфигурации gantt.config.show_markers в значение false:

var marker1 = gantt.addMarker({ ...}); 
var marker2 = gantt.addMarker({ ...}); 
var marker3 = gantt.addMarker({ ...}); 
 
gantt.config.show_markers = false; // скрывает все 3 маркера

Обновление маркера

Если вам нужно внести изменения в маркер, вы можете использовать метод gantt.updateMarker:

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

Для обновления всех маркеров сразу можно использовать метод gantt.renderMarkers:

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

Стилизация маркеров

Для настройки стилей маркеров удобно использовать шаблон gantt.templates.marker_class:

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

Маркеры для сегодняшнего дня

Если вы хотите отобразить маркер для сегодняшней даты на вашем диаграмме Ганта, вам нужно добавить маркер и настроить функцию для обновления его позиции с течением времени. Вот пример:

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

К началу