Deprecated

The described functionality is deprecated since version 6.2. Use the scales config to set any number of time scales. Check the details.

Adding Second Scale(s)

To present tasks in different time units, simultaneously, you can add any number of additional scales underneath the default one.

The second scales are defined with the subscales property:

gantt.config.scale_unit = "month";
gantt.config.date_scale = "%F, %Y";
 
 
gantt.config.subscales = [
    {unit:"week", step:1, date:"%W"},
    {unit:"day", step:1, date:"%D" }
];

You can configure the following aspects of a second scale:

Setting the scale's unit

To set the unit of the second scale, use the unit attribute of the subscales property:

gantt.config.subscales = [
    {unit:"month", date:"%F, %Y" }
];

Related sample: Multiple scales

Setting the scale's step

To set the step of the second scale, use the step attribute of the subscales property:

gantt.config.subscales = [
    {unit:"month", step:1, date:"%F, %Y" }
];

Related sample: Multiple scales

Setting the scale's format

To set the format of the second scale, use:

the date attribute, to set a simple format as a string:

gantt.config.subscales = [
    {unit:"week", step:1, date:"%W"}
];

the template attribute, to set a complex format as a function that takes a date object as a parameter:

gantt.config.subscales = [
    {unit:"week", step:1, template:weekScaleTemplate}
];
 
var weekScaleTemplate = function(date){
        var dateToStr = gantt.date.date_to_str("%d %M");
        var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
        return dateToStr(date) + " - " + dateToStr(endDate);
    };

Related sample: Multiple scales

See the Date Format Specification article to know about available format characters

Setting the scale's style

To style the second scale, use the css attribute of the subscales property:

<style type="text/css">.weekend{
    background: #F0DFE5 !important;
}
</style>

var daysStyle = function(date){
    var dateToStr = gantt.date.date_to_str("%D");
    if (dateToStr(date) == "Sun"||dateToStr(date) == "Sat")  return "weekend";
 
    return "";
};
 
gantt.config.subscales = [
    {unit:"day", date:"%D", css:daysStyle }
];

Use the !important keyword with CSS properties to guarantee that they will be correctly applied.

Related sample: Multiple scales