MonthView maxEventsPerDay prop
Use `maxEventsPerDay` prop to control how many events are visible per day before the "+more" indicator appears. The value is clamped between 1 and 10. Day cell height adjusts automatically.
schedule/monthview
27 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
MonthView many events behavior
When a day has many events, the component shows a "More events" indicator.
MonthView drag and drop
Enable drag and drop to move events between days.
MonthView basic purpose
MonthView displays events in a calendar month grid. It shows event badges in each day cell with support for drag and drop.
MonthView withWeekNumbers prop
Set `withWeekNumbers` to display week numbers in the first column.
MonthView withWeekDays prop
Set `withWeekDays={false}` to hide the weekday names row.
MonthView withWeekendDays prop
Set `withWeekendDays={false}` to hide weekend days. The grid shrinks to the remaining columns and events that span hidden days are clipped to the visible days. The days that are considered weekend are controlled by the `weekendDays` prop or DatesProvider, with a default of [0, 6].
MonthView firstDayOfWeek prop
Set `firstDayOfWeek` to control which day starts the week.
MonthView weekdayFormat prop
Use `weekdayFormat` prop to customize weekday names.
MonthView consistentWeeks prop
Set `consistentWeeks={false}` to only show weeks that have days in the current month.
MonthView highlightToday prop
Set `highlightToday={false}` to disable highlighting the current day.
MonthView withOutsideDays prop
Set `withOutsideDays={false}` to hide days from adjacent months.
MonthView radius prop
Use `radius` prop to customize the border radius of events.
MonthView withHeader prop
Set `withHeader={false}` to hide the header controls.
MonthView custom header pattern
You can build a custom header using `ScheduleHeader` compound components combined with your own controls. Set `withHeader={false}` on the view and compose the header externally.
MonthView renderEvent prop
Use `renderEvent` prop to fully customize event rendering. This function receives the event data as the first argument and all props that would be passed to the event root element (including children) as the second argument, allowing you to wrap events in custom components like HoverCard, Tooltip, or custom wrappers.
MonthView timed events rendering
Use `renderEvent` to visually differentiate all-day and timed events. All-day events render as regular colored bars, while timed events display as a colored dot with the start time and title.
MonthView recurring events
MonthView automatically expands recurring events for the visible month.
MonthView background events
Set `display="background"` on an event to render it as a full-width, semi-transparent, non-interactive block behind regular events. Background events span the full height of the day cell in the month view.
MonthView withAgenda prop
Set `withAgenda` prop to display an "Agenda" button in the header. When clicked, it opens an `AgendaView` showing events for the current month as a list.
MonthView mode static
Set `mode="static"` to disable all interactions.
MonthView locale prop
Use `locale` prop to set the dayjs locale for date formatting. Combine it with `labels` prop to translate all UI text.
MonthView withDragSlotSelect prop
Set `withDragSlotSelect` prop to allow users to drag across day cells to select a date range. When the drag ends, the `onSlotDragEnd` callback is called with the range start and end dates. Combined with `onDayClick` and `onEventClick` callbacks, this enables a complete event creation and editing experience.
MonthView responsive styles
MonthView uses @container queries for responsive styles. The component automatically adjusts its layout based on the container width, hiding labels and reducing padding on smaller screens. Container queries are supported in all modern browsers.
MonthView focus management
In the MonthView component, focus is managed for efficient keyboard navigation: only the first day in the month view is included in the tab order with tabIndex={0}; all other days have tabIndex={-1} and can only be reached via arrow key navigation; outside days are navigable using arrow keys when withOutsideDays is true; disabled days are skipped during keyboard navigation.
MonthView keyboard interactions
Keyboard interactions on MonthView only trigger if focus is on a day control. ArrowRight focuses the next non-disabled day. ArrowLeft focuses the previous non-disabled day. ArrowDown focuses the same day in the next week. ArrowUp focuses the same day in the previous week.
MonthView day aria-label format
Each day button has an `aria-label` attribute with the full date in the format "Month Day, Year" (for example, "November 15, 2025"). This provides screen reader users with complete date information.