scale_cell_class

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

date

Date

the date of a cell

Example

<style>
.weekend{ background: #f4f7f4 !important;}
</style>

gantt.templates.scale_cell_class = function(date){
    if(date.getDay()==0||date.getDay()==6){
        return "weekend";
    }
};

Related samples

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

Back to top