Выделение временных слотов

Иногда бывает полезно привлечь внимание к определённым временным слотам, выделяя их.

  • Чтобы выделить ячейку в области временной шкалы, вы можете использовать шаблон 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-свойство будет применено к ячейке без переопределения.

К началу