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

dateDatethe date of a cell


.weekend{ background: #f4f7f4 !important;}
gantt.templates.scale_cell_class = function(date){
        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){
        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";             }         }     },
See also
Back to top