Problem for highlight scale

Hello,

When i highlight color of day(hilight on weekend), it’s also apply on month. (See screenshot)
I use subscales to display day & month.

Here is my Js code :
scale_zoom: function(value) {
gantt.config.step = 1;
gantt.config.min_column_width = 50;
gantt.config.scale_height = 50;
gantt.templates.scale_cell_class = function(date) {
if(date.getDay() == 0 || date.getDay() == 6) return “weekend_scale”;
};
gantt.templates.task_cell_class = function(item, date) {
if(date.getDay() == 0 || date.getDay() == 6) return “weekend_task”;
};
gantt.templates.date_scale = null;
switch (value) {
case “day”:
gantt.config.scale_unit = “day”;
gantt.config.date_scale = “%d %M”;
gantt.config.subscales = [];
gantt.config.scale_height = 27;
break;
case “week”:
var weekScaleTemplate = function(date){
var dateToStr = gantt.date.date_to_str(“%d %M %Y”);
var endDate = gantt.date.add(gantt.date.add(date, 1, “week”), -1, “day”);
return dateToStr(date) + " - " + dateToStr(endDate);
};
gantt.config.scale_unit = “week”;
gantt.templates.date_scale = weekScaleTemplate;
gantt.config.subscales = [
{unit:“day”, step:1, date:“%d, %D” }
];
break;
case “month”:
gantt.config.scale_unit = “month”;
gantt.config.date_scale = “%F, %Y”;
gantt.config.subscales = [
{unit:“day”, step:1, date:“%d” }
];
gantt.config.min_column_width = 25;
break;
case “year”:
gantt.config.scale_unit = “year”;
gantt.config.date_scale = “%Y”;
gantt.config.subscales = [
{unit:“month”, step:1, date:“%M” }
];
gantt.templates.scale_cell_class = function(date) {};
gantt.templates.task_cell_class = function(item, date) {};
break;
}
},


Proper indentation code(sorry for previous code)

scale_zoom: function(value) {
        gantt.config.step = 1;
        gantt.config.min_column_width = 50;
        gantt.config.scale_height = 50;
        gantt.templates.scale_cell_class = function(date) {
            if(date.getDay() == 0 || date.getDay() == 6) return "weekend_scale";
        };
        gantt.templates.task_cell_class = function(item, date) {
            if(date.getDay() == 0 || date.getDay() == 6) return "weekend_task";
        };
        gantt.templates.date_scale = null;
        switch (value) {
            case "day":
                gantt.config.scale_unit = "day";
                gantt.config.date_scale = "%d %M";
                gantt.config.subscales = [];
                gantt.config.scale_height = 27;
                break;
            case "week":
                var weekScaleTemplate = function(date){
                    var dateToStr = gantt.date.date_to_str("%d %M %Y");
                    var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
                        return dateToStr(date) + " - " + dateToStr(endDate);
                };
                gantt.config.scale_unit = "week";
                gantt.templates.date_scale = weekScaleTemplate;
                gantt.config.subscales = [
                    {unit:"day", step:1, date:"%d, %D" }
                ];
                break;
            case "month":
                gantt.config.scale_unit = "month";
                gantt.config.date_scale = "%F, %Y";
                gantt.config.subscales = [
                    {unit:"day", step:1, date:"%d" }
                ];
                gantt.config.min_column_width = 25;
                break;
            case "year":
                gantt.config.scale_unit = "year";
                gantt.config.date_scale = "%Y";
                gantt.config.subscales = [
                    {unit:"month", step:1, date:"%M" }
                ];
                gantt.templates.scale_cell_class = function(date) {};
                gantt.templates.task_cell_class = function(item, date) {};
                break;
        }
    },
scale_zoom: function() {
        gantt.config.step = 1;
        gantt.config.min_column_width = 50;
        gantt.config.scale_height = 50;
        gantt.templates.scale_cell_class = function(date) {
            if(date.getDay() == 0 || date.getDay() == 6) return "weekend_scale";
        };
        gantt.templates.task_cell_class = function(item, date) {
            if(date.getDay() == 0 || date.getDay() == 6) return "weekend_task";
        };
        gantt.config.scale_unit = "month";
        gantt.config.date_scale = "%F, %Y";
        gantt.config.subscales = [
            {unit:"day", step:1, date:"%d" }
        ];
        gantt.config.min_column_width = 25;
    },

Hi,
the subscales can have their own css templates, and if one is not defined - subscale uses one defined in templates.scale_cell_class.
Try this config: gantt.templates.scale_cell_class = function(date) {}; gantt.config.scale_unit = "month"; gantt.config.date_scale = "%F, %Y"; gantt.config.subscales = [ {unit:"day", step:1, date:"%d", css:function(date) { if(date.getDay() == 0 || date.getDay() == 6) return "weekend_scale"; } } ];

Thank you very much, it’s work :slight_smile: