Иногда бывает полезно привлечь внимание к определённым временным слотам, выделяя их.
timeline_cell_class
.scale_cell_class
.Эти шаблоны представляют собой функции, которые обрабатывают все даты и присваивают определённый CSS-класс соответствующим ячейкам.
Например, выходные дни могут быть выделены, чтобы сделать недельную структуру шкалы более очевидной:
<style>
.weekend{ background: #f4f7f4 !important;}
</style>
gantt.templates.scale_cell_class = function(date){
if(date.getDay()==0||date.getDay()==6){
return "weekend";
}
};
gantt.templates.timeline_cell_class = function(task,date){
if(date.getDay()==0||date.getDay()==6){
return "weekend" ;
}
};
gantt.init("gantt_here");
При работе с расчётами рабочего времени, можно заменить жёстко заданные значения на isWorkTime
:
gantt.config.work_time = true;
gantt.templates.scale_cell_class = function(date){
if(!gantt.isWorkTime(date)){
return "weekend";
}
};
gantt.templates.timeline_cell_class = function(task,date){
if(!gantt.isWorkTime({task:task, date:date})){
return "weekend" ;
}
};
gantt.init("gantt_here");
Related sample: Highlighting weekends
Добавление ключевого слова 'important' гарантирует, что указанное CSS-свойство будет применено к ячейке без переопределения.