apps/mantine.dev/src/pages/schedule/resources-month-view.mdx
import { ResourcesMonthViewDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';
export default Layout(MDX_DATA.ResourcesMonthView);
ResourcesMonthView displays a month grid where each day cell contains resource lanes. Events are shown within their resource's lane, making it easy to see resource utilization across the month.
<Demo data={ResourcesMonthViewDemos.usage} />Set mode="static" to disable all interactions.
Enable drag and drop with withEventsDragAndDrop prop. The onEventDrop callback receives
the resourceId of the target resource, allowing you to update the event's resource assignment.
Enable event resizing with withEventResize prop. Events can be resized by dragging their start or
end edges, and the onEventResize callback is called with the updated event start and end dates.
Resizing snaps to whole days and preserves the event's original time of day: dragging the end edge
of an event that ends at 17:00 onto another day keeps the 17:00 end time. Events that end
exactly at midnight are treated as ending on the previous day, so their end stays exclusive after
a resize.
Resize handles are rendered only on the edges where the event actually starts and ends. An event that continues outside the displayed month, or that is split across rows, does not render a handle on those edges. Events hidden behind the "+N more" indicator cannot be resized.
Resizing never changes the event's resource — drag the event itself to move it to another resource.
Use canResizeEvent to control which events can be resized.
Click a day cell to create a new event, or click an existing event to edit it. Use withDragSlotSelect
and onSlotDragEnd to allow drag-to-create across day cells. The onSlotDragEnd callback includes
the resourceId of the resource where the drag started.
Use renderEvent prop to customize how events are rendered. The example below uses HoverCard
to display event details on hover.
Use renderResourceLabel prop to customize how resource labels are rendered in the row headers.
Use groups prop to group resources under labeled headers. The group labels are displayed
as a column to the left of resource labels, spanning vertically across their resources.
Use renderGroupLabel to customize group label rendering and groupLabelWidth to control
the group column width.
Set locale prop to change the language. Use labels prop to override built-in labels.
ResourcesMonthView automatically expands recurring events for the visible month. See Recurring events guide for full documentation.
<Demo data={ResourcesMonthViewDemos.recurringEvents} />Use maxEventsPerTimeSlot prop to limit the number of events visible in each cell.
When there are more events than the limit, a "+more" indicator is shown.
Use dayWidth and rowHeight props to customize the dimensions of day columns and resource rows.
Use startScrollDate prop to scroll to a specific date on initial render. This is useful
when the month has many days and you want the view to start at a specific date, for example today.
Set withWeekendDays={false} to hide weekend day columns from the month grid.
When a day cell has more events than maxEventsPerTimeSlot, a "+X more" indicator is shown.
Click the indicator to see all events for that day.
Use moreEventsProps to customize the more events dropdown, for example to use a modal
instead of a popover.
Set withHeader={false} to hide the default header and use ScheduleHeader to build
a custom header with navigation controls.
Use scrollAreaProps to customize the scroll area behavior.