Vertical list view of events grouped by date
AgendaView renders a vertical list of events for a specified time period. Events are grouped by date in chronological order with date headers for each group.
September 1, 2026 – September 30, 2026
Tuesday, September 1
Tuesday, September 8
Tuesday, September 15
Tuesday, September 22
Saturday, September 26
Tuesday, September 29
Timed events show their time range, all-day events display an "All day" label, and multi-day events appear on each date they span.
September 26, 2026 – October 3, 2026
Sunday, September 27
Monday, September 28
Wednesday, September 30
Use headerFormat to control the range label in the header and dateHeaderFormat to control individual date group headers. Both accept a dayjs format string or a callback function.
Use renderEvent to fully customize how each event row is rendered. The callback receives the event data and default root props that you should spread onto your wrapper element.
Use onEventClick to handle event interactions. The example below opens a modal with event details when an event is clicked.
Set locale to translate date headers and pass labels to override built-in strings like "All day" and "No events".
septiembre 26, 2026 – octubre 3, 2026
sábado, septiembre 26
domingo, septiembre 27
martes, septiembre 29
Set mode="static" to disable all event interactions. In static mode, events are not clickable.