apps/mantine.dev/src/pages/schedule/month-view.mdx
import { MonthViewDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';
export default Layout(MDX_DATA.MonthView);
MonthView displays events in a calendar month grid. It shows event badges in each day cell with support for drag and drop.
<Demo data={MonthViewDemos.usage} />Set withWeekNumbers to display week numbers in the first column.
Set withWeekDays={false} to hide the weekday names row.
Set firstDayOfWeek to control which day starts the week.
Use weekdayFormat prop to customize weekday names.
Set consistentWeeks={false} to only show weeks that have days in the current month.
Set highlightToday={false} to disable highlighting the current day.
Set withOutsideDays={false} to hide days from adjacent months.
Use radius prop to customize the border radius of events.
Set withHeader={false} to hide the header controls.
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.
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.
When a day has many events, the component shows a "More events" indicator.
<Demo data={MonthViewDemos.manyEvents} />Enable drag and drop to move events between days.
<Demo data={MonthViewDemos.dragDrop} />Use onExternalEventDrop to allow dragging items from outside the component into
the schedule. External items must set data in dataTransfer during their onDragStart.
The callback receives the DataTransfer object and the drop target datetime.
Combine onExternalEventDrop with withEventsDragAndDrop to enable bidirectional
drag and drop. Items dragged from the sidebar are removed from the list and added
to the schedule. Events dragged from the schedule back to the sidebar are removed
from the schedule. The schedule sets application/json with { eventId } in
dataTransfer when an event is dragged, which the sidebar drop zone reads to
identify the event.
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.
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 automatically expands recurring events for the visible month. See Recurring events guide for full documentation.
<Demo data={MonthViewDemos.recurringEvents} />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.
Set mode="static" to disable all interactions.
Use locale prop to set the dayjs locale for date formatting.
Combine it with labels prop to translate all UI text.
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 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.
In the MonthView component, focus is managed to provide an efficient keyboard navigation experience:
tabIndex={0})tabIndex={-1} and can only be reached via arrow key navigationwithOutsideDays is trueThis approach reduces the number of tab stops when navigating through the calendar, making it faster for keyboard users to move through the view while still allowing full access to all days via arrow keys.
Note that the following events will only trigger if focus is on a day control.
<KeyboardEventsTable data={[ { key: 'ArrowRight', description: 'Focuses next non-disabled day', }, { key: 'ArrowLeft', description: 'Focuses previous non-disabled day', }, { key: 'ArrowDown', description: 'Focuses same day in the next week', }, { key: 'ArrowUp', description: 'Focuses same day in the previous week', }, ]} />
Each day button has an aria-label attribute with the full date in the format "Month Day, Year" (e.g., "November 15, 2025"). This provides screen reader users with complete date information.