Instead of loading all events upfront, you can use the dataSource prop to fetch events on demand as the user navigates between dates and views.
The dataSource.getEvents(start, end) method runs whenever the visible date range changes, fetching only the events needed for the current view.
Basic usage
To enable lazy loading, pass a dataSource object with a getEvents method to the Event Calendar.
The getEvents method receives a date range and should return a promise that resolves with the events for that range.
When you provide dataSource, you don't need the events prop—events are fetched through the data source instead.
<EventCalendarPremium
dataSource={{
getEvents: async (start, end) => fetchEventsFromServer(start, end),
persistEvents: async ({ created, updated, deleted }) => {
// Persist changes to the server
return { success: true };
},
}}
/>
The persistEvents method runs whenever events are created, updated, or deleted, letting you persist the changes back to the server.
Fetched ranges are cached, so navigating to a range that is already loaded doesn't call getEvents again, and moving to a range that extends a loaded one only requests the new days.
When showEmptyDaysInAgenda is false, the agenda view requests the 180 days starting from the visible date instead of only the visible ones, so it can find the next days with events.
Error handling
When the dataSource.getEvents method rejects, the Event Calendar displays an error state.
Use the toggle button to simulate a server error.
API
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.