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 to make sure that the range is bigger than the current viewport. Otherwise the scheduler would trigger the shift immediately.
- 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.
- HTML5 Scheduler: Infinite Scrolling (PHP Backend)