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.

Asynchronous Response Ordering

In Pro since version 2026.4.7072, when args.clearEvents is true (the default), a slow response cannot replace results from a newer request that has already completed. While the newer request is still pending, the older result can be displayed. Calling args.loaded() after the Scheduler has been disposed has no effect.

Return all events for the requested viewport, plus any extra dates you want to preload. With args.clearEvents = false, responses are merged; your application must handle conflicts between overlapping requests. Cancel unneeded HTTP requests in your application if required.

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