Skip to main content

scale_cell_class

Description​

Specifies the CSS class that will be applied to cells of the time scale of the timeline area

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

Parameters​

  • date - (required) Date - the date of a cell

Returns​

  • text - (string | void) - a CSS class for the item in question

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"; /*!*/
            } /*!*/
        } /*!*/
    },
];