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 to make sure that the range is bigger than the current viewport. Otherwise the scheduler would trigger the shift immediately.
  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.

Demo

Tutorial