Event Calendar - Views

Configure available views including week, day, month, and agenda, and control the default view.

All views

Week view

The week view lets users manage events for an entire week.

Use the viewConfig prop to limit the hours displayed in the time grid with startTime and endTime:

By default, the time grid scrolls to 7 AM when it mounts (or to startTime when 7 AM isn't a displayed hour). Use initialScrollTime to scroll to a different hour. Navigating to another week keeps the current scroll position; switching to another view and back scrolls again.

Use timeGridEvents to choose which timed events are rendered in the time grid. The other events, including all-day events, are rendered in the day grid above it:

• 'shorter-than-one-day' (default): timed events shorter than one day, split across the days they cover.
• 'same-day-only': timed events that start and end on the same day.

Day view

The day view lets users manage events for a single day.

The viewConfig prop also limits the hours displayed in the day view with startTime and endTime:

By default, the time grid scrolls to 7 AM when it mounts (or to startTime when 7 AM isn't a displayed hour). Use initialScrollTime to scroll to a different hour. Navigating to another day keeps the current scroll position; switching to another view and back scrolls again.

The timeGridEvents option also sets which timed events are rendered in the time grid of the day view:

Month view

The month view lets users manage events for an entire month.

Agenda view

The agenda view lets users manage events in a list layout.

The agenda displays 12 days at a time by default, and the navigation moves by the same amount. Use the viewConfig prop to change it with dayCount, either to another number of days or to 'month' to display the month of the visible date and navigate one month at a time:

When the empty days are hidden, the 'month' mode only lists the days of that month that have events, instead of continuing into the next month.

Year view 🚧

With this feature, users would be able to view and manage events across an entire year.

Resource views 🚧

With this feature, users would be able to view events grouped by resource in a dedicated view.

Limit available views

Use the views prop to define which views can be accessed in the Event Calendar:

<EventCalendar views={['week', 'month']} />

Default view

Use the defaultView prop to initialize the view:

<EventCalendar defaultView="agenda" />

API

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

• <EventCalendar />
• <EventCalendarPremium />
• <StandaloneAgendaView />
• <StandaloneAgendaViewPremium />
• <StandaloneDayView />
• <StandaloneDayViewPremium />
• <StandaloneMonthView />
• <StandaloneMonthViewPremium />
• <StandaloneWeekView />
• <StandaloneWeekViewPremium />