How can I extend the date display of the Gantt chart


I am creating a planner and I included a gantt chart in it. My problem is I am trying to create a schedule that start in March 31, 2016 and it will ends in April 15, 2016. But my problem is my graph doesn’t display the next month.

My process is, by default my graph will load the current month with its first and last day and displayed by days.

Here’s my sample code:

[code]//get first and last day of current month
var parsed = Date.parse(“today”);
var firstOfMonth = new Date(parsed.getFullYear(),parsed.getMonth(), 1);
var lastOfMonth = new Date(parsed.getFullYear(),parsed.getMonth()+1, 0);
var f_firstOfMonth = firstOfMonth.toString(“yyyy-MM-dd”);
var f_lastOfMonth = lastOfMonth.toString(“yyyy-MM-dd”);

//assign to the empty gantt
data: ‘’,
start_date: f_firstOfMonth,
end_date: f_lastOfMonth,
scale_height: 50,
scale_unit: “day”,


you can detect when the task is created or moved outside time scale and extend the time scale accordingly

[code]function updateRange(){
var range = gantt.getSubtaskDates();
var chart = gantt.getState();
if(range.start_date.valueOf() <= chart.min_date.valueOf() || range.end_date.valueOf() >= chart.max_date.valueOf()){
gantt.config.start_date =, -1, “day”);
gantt.config.end_date =, 2, “day”);

gantt.attachEvent(“onAfterTaskAdd”, updateRange);
gantt.attachEvent(“onAfterTaskUpdate”, updateRange);[/code]

Or you can use this config … onfig.html


I came across same issue, but it does not help me. config.end_date has no effect on my gantt chart.


config.end_date has no effect if you don’t set config.start_date.

Here is an example how to repaint the displayed time range on the scale after changing the event by dnd or by the lightbox:


Hello Yong,
Please, do not create duplicate posts or topics if you have the same question/issue. Let’s discuss your case in one place: