javascript-scheduler-infinite-scrolling.png

JavaScript

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:

  1. 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.
  2. 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.
  3. The infinite scrolling needs to be used with dynamic event loading.
  4. To avoid unnecessary timeline shifts during initialization, use the scrollTo() method to scroll away from the startDate. Call the scrollTo() method before calling init().

Demo

Tutorial

Angular

Tutorial