The onScrollEnd event is fired whenever the user completes the scrolling of the JavaScript Scheduler grid (when dynamic event loading is enabled).
Notes:
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.
This event is based on the native scrollend event which may not be supported in all browsers (Safari).
This event is available since version 2023.3.5731
args.viewport.start
(DayPilot.Date) - read-only viewport start date/time
args.viewport.end
(DayPilot.Date) - read-only viewport end date/time
args.viewport.resources
(array of resource IDs - strings or numbers) - read-only 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
args.events
- array of event data objects (structure defined in DayPilot.Event.data) to be loaded
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
args.loaded()
- performs an async update
const dp = new DayPilot.Scheduler("dp", {
dynamicLoading: true,
onScrollEnd: 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();