html5 scheduler dynamic event loading

The JavaScript Scheduler can load events from the server dynamically as the user scrolls.


  • The Scheduler fires onScroll event after every scrollbar position change.

  • The delay before the Scroll event is fired can be configured using scrollDelayDynamic property.

JavaScript Scheduler

Handle the onScroll event to supply events for the viewport.

See also:


  const dp = new DayPilot.Scheduler("dp", {
    dynamicLoading: true,
    onScroll: async (args) => {
      const start = args.viewport.start;
      const end = args.viewport.end;

      const {data} = await DayPilot.Http.get(`/events?start=${start}&end=${end}`); = data;

    // ...


JavaScript Tutorials

Live Demo

Angular Scheduler

This example shows how to enable dynamic event loading in the Angular Scheduler component.


import {Component, ViewChild, AfterViewInit} from "@angular/core";
import {DayPilot, DayPilotSchedulerComponent} from "daypilot-pro-angular";
import {DataService} from "./data.service";

  selector: 'scheduler-component',
  template: `
    <daypilot-scheduler [config]="config" #scheduler></daypilot-scheduler>
  styles: [``]
export class SchedulerComponent implements AfterViewInit {

  scheduler!: DayPilotSchedulerComponent;

  config: any = {
    dynamicLoading: true,
    onScroll: args => {
      let dp = this.scheduler.control;
      let viewport = dp.getViewPort();
      let from = viewport.start;
      let to = viewport.end;
      let rstart = viewport.resources[0];
      let rend = viewport.resources[viewport.resources.length - 1];

      args.async = true;
      this.ds.getEventsForViewport(from, to, rstart, rend).subscribe(result => { = result;
    // ...

  constructor(private ds: DataService) {


Angular Tutorial

React Scheduler

In the React Scheduler component, enable the dynamic event loading using dynamicLoading property and add an onScroll event handler that will supply event data for the new viewport.

In this example, we extend the viewport date range by one day in both directions to create a buffer with preloaded events. The list of resources included in the current viewport is sent as a comma-separated list of resource IDs.

import React, {Component} from 'react';
import {DayPilotScheduler} from "daypilot-pro-react";

class Scheduler extends Component {

    constructor(props) {

        this.state = {
            dynamicLoading: true,
            onScroll: args => {
              const viewport = args.viewport;
              const from = viewport.start.addDays(-1);
              const to = viewport.end.addDays(1);
              const resources = =>;
              const resourceList = resources.join(",");

              const {data: events} = await DayPilot.Http.get(`/api/eventsForViewport?from=${from}&to=${to}&resources=${resourceList}`);
     = events;

    render() {
        return (

export default Scheduler;

Vue Scheduler

In the Vue Scheduler component, you can enable dynamic event loading using the dynamicLoading property of the config object. To load the events for the updated viewport during scrolling, use the onScroll event handler:

  <DayPilotScheduler id="dp" :config="config" ref="scheduler" />

import {DayPilot, DayPilotScheduler} from 'daypilot-pro-vue'

export default {
  name: 'Scheduler',
  data: function() {
    return {
      config: {
        dynamicLoading: true,
        onScroll: async args => {
          const viewport = args.viewport;
          const from = viewport.start.addMonths(-1);
          const to = viewport.end.addMonths(1);
          const rstart = viewport.resources[0];
          const rend = viewport.resources[viewport.resources.length - 1];

          const {data: events} = await DayPilot.Http.get(`/api/backend_events_viewport.php?from=${from}&to=${to}&rstart=${rstart}&rend=${rend}`);
 = events;
        // ...
  components: {
  // ...

Vue Tutorial

ASP.NET WebForms

By default, events for the full grid (defined by StartDate and Days) are loaded from the server. The scheduler may become slow when displaying a large number of events.

There is an option to load only the events for the visible range. Events will be loaded and rendered as the users scrolls.

1. Activate the dynamic event loading mode using DynamicLoading property"


2. Handle Scroll event:


protected void DayPilotScheduler1_Scroll(object sender, DayPilot.Web.Ui.Events.ScrollEventArgs e)

Information about the visible range is stored in the ViewPort property:

  • ViewPort.Start - Start of the visible range (DateTime)

  • ViewPort.End - End of the visible range (DateTime)

  • ViewPort.Resources - List of IDs (Value property) of the visible resources (List<string>)




Events can be loaded dynamically (on demand) as the user scrolls.

Enable Dynamic Event Loading

DynamicEventLoading = true

Load the Events upon Request

New events are requested from the server using OnScroll event every time the scrollbar position is changed.

Details about the new viewport are available in ViewPort property.

  • ViewPort.Start

  • ViewPort.End

  • ViewPort.Resources



@Html.DayPilotScheduler("dps_dynamic", new DayPilotSchedulerConfig {
  BackendUrl = ResolveUrl("~/Scheduler/Backend"),
  DynamicLoading = true,

Backend Controller

protected override void OnScroll(ScrollArgs e)
  DateTime start = ViewPort.Start;
  DateTime end = ViewPort.End;
  List<string> resources = ViewPort.Resources;

  Events = new DataManager().GetEvents(start, end, resources);