Features

  • JavaScript Scheduler component from DayPilot Pro for JavaScript package

  • The Scheduler loads events dynamically during scrolling

  • As soon as the scrollbar reaches an edge of the visible range it is updated to allow further scrolling

  • Includes a trial version of DayPilot Pro for JavaScript (see License below)

License

Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript.

Infinite Scrolling Feature

The Scheduler infinite scrolling feature is disabled by default. You can enable it using infiniteScrollingEnabled property:

dp.infiniteScrollingEnabled = true;

Infinite Scrolling Configuration

The infinite scrolling mode uses the following mechanism: As soon as a user reaches a scheduler edge (within a specified margin) it automatically shifts the displayed range. The margin is defined using infiniteScrollingMargin property. The default value is 50 (pixels). We will set the value to 20 pixels.

dp.infiniteScrollingMargin = 20;

When the date shift is activated the Scheduler updates the value of startDate and refreshes the view. The scrollbar position is updated to display the original viewport. The days property remains unchanged. The startDate property is shifted by the number of days specified using infiniteScrollingStepDays property.

dp.infiniteScrollingStepDays = 100;

Loading Events After the Date Shift

It's possible to use preload the Scheduler events using dp.events.list but it's better to enable dynamic event loading. This way the Scheduler will always load events needed for the current viewport.

dp.dynamicLoading = true;

With dynamic loading enabled, we will only have a limited events set loaded at each moment. To improve the rendering speed during scrolling, we disable the progressive event rendering.

dp.dynamicEventRendering = "Disabled";

The events can be loaded using onScroll event handler which is fired whenever the scrollbar position changes:

dp.onScroll = function (args) {
  var start = args.viewport.start;
  var end = args.viewport.end;
  var visibleRange = new DayPilot.Duration(start, end);

  DayPilot.Http.ajax({
    url: "backend_events.php",
    data: {
      start: start.addTime(-visibleRange.ticks),
      end: end.addTime(visibleRange)
    },
    success: function (ajax) {
      args.events = ajax.data;
      args.loaded();
    }
  });
};

As you can see, we extend the viewport using addTime() to include adjacent areas.

Scrolling API

html5 scheduler infinite scrolling buttons

Previous/Today/Next Buttons

The scrollTo() method allows scrolling within the active range. It will also automatically switch the current date range if necessary.

HTML5

<button id="previous">Previous</button>
<button id="today">Today</button>
<button id="next">Next</button>

JavaScript

var elements = {
  previous: document.querySelector("#previous"),
  today: document.querySelector("#today"),
  next: document.querySelector("#next"),
};

elements.previous.addEventListener("click", function () {
  dp.scrollTo(dp.getViewPort().start.addMonths(-1), "fast");
});

elements.today.addEventListener("click", function () {
  var today = DayPilot.Date.today();
  dp.scrollTo(today, "fast");
});

elements.next.addEventListener("click", function () {
  dp.scrollTo(dp.getViewPort().start.addMonths(1), "fast");
});

We have configured the Next/Previous buttons to shift the viewport by one month. As soon as the viewport reaches the visible range edge the Scheduler will update the timeline to allow further scrolling.

History

  • December 15, 2020: Upgraded to DayPilot Pro 2020.4.4808; jQuery dependency removed; loading events for extended viewport

  • April 4, 2018: Upgraded to DayPilot Pro 2018.2.3217 with fast cell rendering

  • November 6, 2017: Initial release