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.

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.

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.

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 />