apps/mantine.dev/src/pages/schedule/resources-week-view.mdx
import { ResourcesWeekViewDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';
export default Layout(MDX_DATA.ResourcesWeekView);
ResourcesWeekView displays resources as rows and a full week of time slots as columns
with a two-level header showing day names and time labels. Each row represents a resource
(e.g., conference room, person, equipment) and shows events assigned to that resource
via the resourceId property on event data.
Events that span a whole day (start at 00:00:00 and end at the next day 00:00:00) are
rendered as full-width bars within their day column. Foreground all-day events are pinned to
the top of the column and stack when there are several; all-day events with
display: 'background' tint the whole day column.
Enable cross-resource drag and drop with withEventsDragAndDrop prop. The onEventDrop callback
receives the target resourceId as the fifth argument, allowing you to update the event's resource
assignment. Events can be dragged across both resources and days.
Use onTimeSlotClick, onSlotDragEnd, and onEventClick callbacks to open a form
for creating or editing events. Combine with withDragSlotSelect to allow selecting
a time range by dragging across slots.
Use startTime, endTime and intervalMinutes props to control the visible time range
and slot granularity.
Use withCurrentTimeIndicator to display a line at the current time. Set withCurrentTimeBubble={false}
to hide the time bubble label.
Use firstDayOfWeek to set the first day of the week. Set weekdayFormat to customize
the day label format.
Use renderWeekLabel to fully customize the week label in the header. When provided,
it takes full control of the label. Use weekLabelFormat instead if you only need to change the date format.
Use highlightBusinessHours prop to visually distinguish business hours from non-business hours
across all time slot columns.
Set withWeekendDays={false} to hide weekend days from the view.
Use renderResourceLabel prop to customize how resource labels are rendered.
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.
Use renderEvent prop to customize how events are rendered. The example below
shows event details in a hover card.
ResourcesWeekView automatically expands recurring events for the visible week. See Recurring events guide for full documentation.
<Demo data={ResourcesWeekViewDemos.recurringEvents} />Use maxEventsPerTimeSlot prop to limit the number of visible overlapping events per time slot.
When events exceed the limit, a "+N more" indicator is displayed. Clicking the indicator opens
a popover with all events in the group. Use moreEventsProps to customize the popover behavior.
Use locale prop to set the locale for date formatting and labels prop to override
default labels.
Use radius prop to change the border radius of events.
Use startScrollDateTime prop to scroll to a specific time on mount.
Use scrollAreaProps to pass props to the underlying ScrollArea component.
Enable event resizing with withEventResize prop. Events can be resized by dragging their left or
right edges, and the onEventResize callback is called with the updated event start and end times.
Resizing is constrained to the day the event belongs to: an event cannot be resized to span multiple
days. To make an event cover several days, update its start and end dates directly in your data.
Use canResizeEvent to control which events can be resized.
Set mode="static" to disable all interactions. Events and time slots become non-interactive,
useful for display-only views.