You can enable the infinite scrolling feature using infiniteScrollingEnabled property:
dp.infiniteScrollingEnabled = true;
You need to adjust the configuration to match your timeline:
- days property determines the number of days to be displayed at any moment
- infiniteScrollingStepDays sets the number of days to be loaded when a user reaches an edge of the current range (default value is 30)
- infiniteScrollingMargin sets the number of pixels on each edge (left and right) of the current range that trigger a timeline shift (default value is 50 pixels)
The following rules need to be followed:
- You need to increase the days value to make sure that the timeline length is greater than the current viewport. It is recommended to use a timeline width at least 3 times the viewport width. Take into account that the viewport size may be different on different screens. Too short timeline may result in an infinite loop of timeline shifts.
- The infiniteScrollingMargin needs to be low enough so the active edges don't overlap and leave enough space in the middle that allows scrolling without a timeline shift.
- The infinite scrolling needs to be used with dynamic event loading.
- To avoid unnecessary timeline shifts during initialization, use the scrollTo() method to scroll away from the startDate. Call the scrollTo() method before calling init().
- HTML5 Scheduler: Infinite Scrolling (PHP Backend)