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

scale_cell_class

Description​

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

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​

Note that while using work time calculations, you can use isWorkTime instead of hardcoded values:

gantt.config.work_time = true;

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

If you have specified several scales via the gantt.config.scales property, the template will be applied only to the first scale. To specify the CSS class to the cells of any other scale, use the css attribute of the gantt.config.scales property:

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"; /*!*/
            } /*!*/
        } /*!*/
    },
];
Need help?
Got a question about the documentation? Reach out to our technical support team for help and guidance. For custom component solutions, visit the Services page.
Need more help?Contact Support