Библиотека включает расширение 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>
Related sample: Today and Status lines in Gantt (vertical markers)
Чтобы разместить маркер на временной шкале, например, маркер для сегодняшней даты, используйте метод 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()) // текст тултипа для маркера
});
Related sample: Today and Status lines in Gantt (vertical markers)
Обратите внимание, что свойство 'text' может принимать любой HTML-контент.
Чтобы получить объект, представляющий добавленный маркер, используйте метод 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:...}
Related sample: Today and Status lines in Gantt (vertical markers)
Чтобы удалить ранее добавленный маркер, используйте метод 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);
Чтобы скрыть все добавленные маркеры, установите опцию show_markers в значение 'false':
var marker1 = gantt.addMarker({ ...});
var marker2 = gantt.addMarker({ ...});
var marker3 = gantt.addMarker({ ...});
gantt.config.show_markers = false; // скрывает все 3 маркера
Чтобы изменить маркер, используйте метод 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);
Чтобы обновить все маркеры одновременно, используйте метод 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";
}
Если вы хотите отображать маркер для текущего дня в вашем Gantt, необходимо не только добавить маркер, но и реализовать функцию для обновления его позиции по мере изменения времени. Это можно сделать следующим образом:
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);
Related sample: Today and Status lines in Gantt (vertical markers)
К началу