Move the scale range using prev & next button

Gantt
#1

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?

#2

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 :
https://docs.dhtmlx.com/gantt/api__gantt_posfromdate.html
dateFromPos:
https://docs.dhtmlx.com/gantt/api__gantt_datefrompos.html
getScrollState:
https://docs.dhtmlx.com/gantt/api__gantt_getscrollstate.html

With the help of them you can calculate the position you want to scroll to, and do it using the scrollTo method:
https://docs.dhtmlx.com/gantt/api__gantt_scrollto.html

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 = gantt.date.add(currentScrollDate, 1, 'week');
  // Calculate the position of the newScrollDate 
  newScrollState= gantt.posFromDate(newScrollDate);
  // Scroll to the new date 
  gantt.scrollTo(newScrollState)
}

Here is a demo:
http://snippet.dhtmlx.com/5/580d70720

#3

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