Combyning scale's style and multiple scales


based on this examples : … scale.html
I’ve tried to highlight weekends on a multi-scale Gantt by adding a CSS class in the scale_cell_class template. (Days / Weeks / Months)
It works fine but if the first displayed day is a weekend (saturday or sunday), all scales takes the weekend CSS class.
Is any way to know “on what scale I’m I ?” in scale_cell_class template ?

To illustrate this, please go to :
All three scales are coloured but if you change #Task1 start_date from “31-03-2013” to “30-03-2013”, you can see the difference. (line 3)

Thanks for helping.


I can do this in two times :

  • Detecting the scale in scale_row_class => add a CSS class for day scale on the row (“day_scale”).

gantt.templates.scale_row_class = function (scale) { switch (scale.unit) { case "day": return "day_scale"; default: return ""; } }

  • Modify CSS like this : .gantt_task > .gantt_task_scale > .gantt_scale_line.day_scale > .gantt_scale_cell.weekend {...}