Event Timeline - Navigation

Navigate in time to find the events you are looking for.

Default visible date

Use the defaultVisibleDate prop to initialize the visible date:

const defaultVisibleDate = DateTime.fromISO('2025-11-01');

<EventTimelinePremium defaultVisibleDate={defaultVisibleDate} />;

Imperative API

To use the apiRef object, you need to initialize it using useEventTimelinePremiumApiRef() hook as follows:

const apiRef = useEventTimelinePremiumApiRef();

return <EventTimelinePremium apiRef={apiRef} events={EVENTS} />;

When your component first renders, apiRef.current is undefined. After the initial render, apiRef holds methods to interact imperatively with the Event Calendar.

Set the visible date

Use the setVisibleDate() API method to navigate to a given date:

apiRef.current.setVisibleDate({
  // The DOM event that triggered the change (we be passed to onVisibleDateChange if provided).
  event,
  // The date to navigate to.
  visibleDate,
});

Navigate to the next/previous range

Use the goToNextVisibleDate() and goToPreviousVisibleDate() API methods to navigate forward and backward in time. The step size is automatically determined by the current view:

// Navigate to the next date range
apiRef.current.goToNextVisibleDate(event);

// Navigate to the previous date range
apiRef.current.goToPreviousVisibleDate(event);