Event Timeline - Lazy loading events

Fetch events on demand as users navigate dates and presets.

Instead of loading all events upfront, you can use the dataSource prop to fetch events on demand as the user navigates between dates and presets. The dataSource.getEvents(start, end) method is called whenever the visible date range changes, so only the events needed for the current preset are fetched.

Basic usage

To enable lazy loading, pass a dataSource object with a getEvents method to the Event Timeline. The getEvents method receives a date range and should return a promise that resolves with the events for that range.

When dataSource is provided, the events prop is not needed because all events are fetched through the data source.

<EventTimelinePremium
  dataSource={{
    getEvents: async (start, end) => fetchEventsFromServer(start, end),
    persistEvents: async ({ created, updated, deleted }) => {
      // Persist changes to the server
      return { success: true };
    },
  }}
/>

The persistEvents method is called whenever events are created, updated, or deleted, letting you persist the changes back to the server.

Error handling

When the dataSource.getEvents method rejects, the Event Timeline 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.

• <EventTimelinePremium />