Event Calendar - 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');

<EventCalendar defaultVisibleDate={defaultVisibleDate} />;

You can also control the visible date using the visibleDate and onVisibleDateChange props:

const [visibleDate, setVisibleDate] = React.useState(() => DateTime.now());

return (
  <EventCalendar visibleDate={visibleDate} onVisibleDateChange={setVisibleDate} />
);

Imperative API

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

// Community package
const apiRef = useEventCalendarApiRef();

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

// Premium package
const apiRef = useEventCalendarPremiumApiRef();

return <EventCalendarPremium 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,
});

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.