DayPilot.Scheduler.onScroll

The onScroll event is fired whenever the JavaScript Scheduler grid scrollbar position changes.

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

Notes:

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

Dynamic event loading:

• 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 update() method or other methods that refresh the Scheduler [like rows.filter() or rows.load()]. 

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

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

Parameters

• args.control - DayPilot.Scheduler reference

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

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

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

Parameters (Dynamic Event Loading)

• 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/tiem

• 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

See Also

• dynamicLoading

Example

Dynamic event loading example:

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();