DayPilot.Scheduler.onScroll

The onScroll event handler fires whenever the JavaScript Scheduler grid scrollbar position changes.

Since version 2026.1.6836 and in the Lite edition, this event is always fired during scrolling. In previous versions, it was only fired when dynamic event loading was enabled.

Declaration

DayPilot.Scheduler.onScroll(args)

Parameters

Always available:

• args.control - DayPilot.Scheduler reference

• args.viewport.start (DayPilot.Date) - readonly viewport start date/time

• args.viewport.end (DayPilot.Date) - readonly viewport end date/time

• args.viewport.resources (array of resource IDs - strings or numbers) - readonly list of viewport resources

When DayPilot.Scheduler.dynamicLoading is enabled, these additional members are available:

• args.control - DayPilot.Scheduler reference (since 2026.1.6836)

• args.viewport.start (DayPilot.Date) - readonly viewport start date/time

• args.viewport.end (DayPilot.Date) - readonly viewport end date/time

• args.viewport.resources (array of resource IDs - strings or numbers) - readonly list of viewport resources

• args.async (boolean) - if set to true, the Scheduler won't be updated until args.loaded() is called; use for async data loading. The default value is true (since 2020.1.4276).

• args.events - array of event data objects (structure defined in DayPilot.Event.data)

• args.remove - events to be removed (array of string | number values); experimental. Use args.clearEvents = true instead.

• args.clearEvents (boolean) - whether to clear all existing events before loading the new ones from args.events. The default value is true (since 2019.4.4101).

• args.loaded() - performs an async update

Notes

• The event handler must be extremely lightweight. Avoid any expensive operations.

• When DayPilot.Scheduler.dynamicLoading is enabled, the only actions allowed in onScroll are to set the args properties and call args.loaded(). Do not change any Scheduler properties in onScroll. Do not call the update() method or other methods that refresh the Scheduler, such as rows.filter() or rows.load().

• Angular: Do not set the [events] attribute if dynamic event loading is enabled. In combination with args.clearEvents = false, this would cause an infinite loop.

• React: Do not set the events property if dynamic event loading is enabled. Do not save the events loaded in onScroll to the events property. This would cause an infinite loop.

Examples

JavaScript

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

    const start = args.viewport.start;
    const end = args.viewport.end;
    const resources = args.viewport.resources.join(",");
    const {data} = await DayPilot.Http.get(`/api/events?start=${start}&end=${end}&resources=${resources}`);
    args.events = data;

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

Angular

<daypilot-scheduler [config]="config"></daypilot-scheduler>

config: DayPilot.SchedulerConfig = {
  dynamicLoading: true,
  onScroll: async (args) => {
    args.async = true;

    const start = args.viewport.start;
    const end = args.viewport.end;
    const resources = args.viewport.resources.join(",");
    const {data} = await DayPilot.Http.get(`/api/events?start=${start}&end=${end}&resources=${resources}`);
    args.events = data;

    args.loaded();
  },
  // ...
};

React

<DayPilotScheduler
  dynamicLoading={true}
  onScroll={onScroll}
  {/* ... */}
/>

const onScroll = async (args) => {
  args.async = true;

  const start = args.viewport.start;
  const end = args.viewport.end;
  const resources = args.viewport.resources.join(",");
  const {data} = await DayPilot.Http.get(`/api/events?start=${start}&end=${end}&resources=${resources}`);
  args.events = data;

  args.loaded();
};

Vue

<DayPilotScheduler
  :dynamicLoading="true"
  @scroll="onScroll"
  <!-- ... -->
/>

const onScroll = async (args) => {
  args.async = true;

  const start = args.viewport.start;
  const end = args.viewport.end;
  const resources = args.viewport.resources.join(",");
  const {data} = await DayPilot.Http.get(`/api/events?start=${start}&end=${end}&resources=${resources}`);
  args.events = data;

  args.loaded();
};

See Also

Dynamic Event Loading [doc.daypilot.org]

DayPilot.Scheduler.dynamicLoading

DayPilot.Scheduler Class