Scales - Custom time unit: show 4 Quarters of a year


I’m refering to this part of the documentation:


var monthScaleTemplate = function (date) {
var dateToStr = gantt.date.date_to_str("%M");
var endDate = gantt.date.add(date, 2, “month”);
return dateToStr(date) + " - " + dateToStr(endDate);
gantt.config.scales = [
{unit: “year”, step: 1, format: “%Y”},
{unit: “month”, step: 3, format: monthScaleTemplate},

I have 2 problems with this example which i don’t know how to change:

  1. The custom time unit shows Feb-Apr, May-Jul. It does not start with january.
    How to change it to show Jan-Mar, Apr-Jun, etc. ?

  2. Instead of the months i would just like to display Q1, Q2, Q3, Q4 in the custom scale.

thanks for your help!


Hello Jochen,
Timeline and scales start from a date. In the sample, there is the month scale with the step parameter. With that combination, Gantt covers 3 months instead of one. And there is a template that shows the first and third months.
You can use the month scale without the step parameter and calculate the quarter number. Here is an example of how it might be implemented:

If you need the quarter scale to cover 3 months, you need to create a custom scale unit. Here is an example of how it might be implemented:
And here is an explanation of how it works.
We don’t modify the initial date, so we return it as it is:

gantt.date.year_quarter_start = function(date){
  return date;

All calculations are made in the gantt.date.add_year_quarter function.
The year quarter scale means that all cells should be equal (3 months). But most likely, the first and last scale cells will differ from others. It happens because they start on a date that is different from the quarter start date.
So, we calculate the quarter dates, check which quarter the cell belongs to and return the quarter date.


Great, this works perfectly fine!

Thanks Ramil