Move the scale range using prev & next button


I’ve rendered the Gantt in week scale format.
My use case is to move the week both forward and backward with the button control.
To brief out, I would like to have next and previous button, on clicking them the week should move forward and backward respectively.

Could someone guide me on implementing this in Gantt?


Hello @manzi,

The gantt provides a few methods to get the current scroll position, get the date on the scale by scroll position and vice versa, which could be helpful in your case, here is a list of them:
posFromDate :

With the help of them you can calculate the position you want to scroll to, and do it using the scrollTo method:

The code of the scroll button may look like the following:

function scrollWeekForward(){
  // Get scroll state
  currentScrollState  = gantt.getScrollState().x; 
  // Calculate date from it
  currentScrollDate =  gantt.dateFromPos(currentScrollState);
  // Add the 1 week to the previous date
  newScrollDate =, 1, 'week');
  // Calculate the position of the newScrollDate 
  newScrollState= gantt.posFromDate(newScrollDate);
  // Scroll to the new date 

Here is a demo:


Hi Siarhei,
Thanks a lot for your quick response. It works good. :slight_smile: