Features

  • JavaScript Scheduler component from DayPilot Pro for JavaScript package
  • 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. Buy a license.

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

It works like this: 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 

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;

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

dp.onScroll = function(args) {
    args.async = true;

    var start = args.viewport.start;
    var end = args.viewport.end;

    $.post("backend_events.php",
        {
            start: start.toString(),
            end: end.toString()
        },
        function(data) {
            args.events = data;
            args.loaded();
        }
    );
};

Scrolling API

html5-scheduler-infinite-scrolling-buttons.png

Previous/Next Buttons

The DayPilot.Scheduler.scrollTo() method allows scrolling within the active range (as specified using "startDate" and "days" properties):

HTML5

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

JavaScript

<script>
  $(document).ready(function() {
      $("#previous").click(function() {
          dp.scrollTo(dp.getViewPort().start.addMonths(-1), "fast");
      });
      $("#next").click(function() {
          dp.scrollTo(dp.getViewPort().start.addMonths(1), "fast");
      });

  });
</script>

This scrollTo() methods doesn't depend on infinite scrolling feature - it works with any configuration. 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.

Today Button

There is also a special scrolling method that makes sure that the target date is loaded. It causes the Scheduler to shift the startDate if needed:

DayPilot.Scheduler.infinite.scrollTo(date);

We will use this method in the "Today" button click event handler to jump to the current date. If the current date is within the visible range it will use the traditional animated scrolling method.

HTML5

<button id="today">Today</button>

JavaScript

<script>
  $(document).ready(function() {
      $("#today").click(function() {
          var today = DayPilot.Date.today();
          if (dp.visibleStart() < today && today < dp.visibleEnd()) {
              dp.scrollTo(today, "fast");
          }
          else {
              dp.infinite.scrollTo(today);
          }
      });
  });
</script>