Dynamic Event Loading

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

Notes

• 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:

• DayPilot.Scheduler.dynamicLoading

• DayPilot.Scheduler.onScroll

Example

<script>
  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}`);
      args.events = data;
      args.loaded();

    ),
    // ...
  });
  dp.init();

</script>

JavaScript Tutorials

• HTML5 Scheduler with Dynamic Event Loading (PHP backend)

• JavaScript Scheduler: Dynamic Event Loading (ASP.NET Core Backend)

Live Demo

• http://javascript.daypilot.org/demo/scheduler/dynamic.html

Angular Scheduler

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

Example

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

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

  @ViewChild("scheduler")
  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 => {
        args.events = result;
        args.loaded();
      });
    },
    // ...
  };

  constructor(private ds: DataService) {
  }

}

Angular Tutorial

• Angular Scheduler: Dynamic Loading of Large Data Sets

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) {
        super(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 = viewport.resources.map(r => r.id);
              const resourceList = resources.join(",");

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


    render() {
        return (
            <div>
                <DayPilotScheduler
                    {...this.state}
                />
            </div>
        );
    }
}

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:

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

<script>
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}`);
          args.events = events;
          args.loaded();
        },
        // ...
      },
    }
  },
  components: {
    DayPilotScheduler
  },
  // ...
}
</script>

Vue Tutorial

• Vue Scheduler: On-Demand Event Loading

DynamicLoading="true"

OnScroll="DayPilotScheduler1_Scroll"

protected void DayPilotScheduler1_Scroll(object sender, DayPilot.Web.Ui.Events.ScrollEventArgs e)
{
  setDataSourceAndBind();
  DayPilotScheduler1.Update();
}

DynamicEventLoading = true

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

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);
  Update(CallBackUpdateType.EventsOnly);
}