Перейти к основному содержимому

scale_cell_class

Description​

Определяет CSS класс, который будет назначен ячейкам в шкале времени области timeline

scale_cell_class: (date: Date) => string | void;

Parameters​

  • date - (required) Date - конкретная дата, представленная ячейкой

Returns​

  • text - (string | void) - CSS класс, который будет применён к соответствующему элементу

Example​

<style>
.weekend{ background: #f4f7f4 !important;}
</style>
gantt.templates.scale_cell_class = function(date){
    if(date.getDay()==0||date.getDay()==6){
        return "weekend";
    }
};

Details​

При использовании расчёта рабочего времени можно опираться на isWorkTime вместо использования фиксированных значений:

gantt.config.work_time = true;

gantt.templates.scale_cell_class = function(date){
       if(!gantt.isWorkTime(date))
          return true;
};

Если установлено несколько шкал через свойство gantt.config.scales, этот шаблон влияет только на первую шкалу. Чтобы назначить CSS классы ячейкам в других шкалах, используйте атрибут css внутри конфигурации gantt.config.scales:

gantt.config.scales = [
    { unit: "month", step: 1, date: "%F" },
    { unit: "week", step: 1, date: "%W" },
    {
        unit: "day", step: 1, date: "%d", css: function (date) { /*!*/
            if (!gantt.isWorkTime({ date: date })) { /*!*/
                return "weekend"; /*!*/
            } /*!*/
        } /*!*/
    },
];