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.
Set withInteractiveBackgroundEvents prop to make background events clickable. Clicking a
background event calls onEventClick with the event object, the same as for regular events –
use event.display === 'background' to tell them apart in the handler.
Note that an interactive background event covers the time slots underneath it: clicks and drag-to-select in its range go to the event instead of the grid. Background events still cannot be dragged or resized.
<Demo data={ResourcesWeekViewDemos.interactiveBackgroundEvents} />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.
By default events snap to intervalMinutes when moved by drag and drop. Set eventDragInterval
to use a different snap step for dragging – for example, a grid with 30-minute slots whose events
can be moved in 15-minute increments. A ghost preview shows where the event will land:
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.
intervalMinutes accepts values that divide evenly into an hour (for example 15 or 30)
or whole numbers of hours (for example 120 or 240). Multi-hour intervals render wider
columns that each span several hours, which is useful for displaying long time ranges compactly.
Use withCurrentTimeIndicator to display a line at the current time. Set withCurrentTimeBubble={false}
to hide the time bubble label.
@mantine/schedule works with timezone-agnostic YYYY-MM-DD HH:mm:ss strings and does not
perform any timezone conversions on its own. By default, the current time indicator is positioned
based on the user's local time.
To display the indicator in a different timezone, use the getCurrentTime prop. It is a function
that returns the current time and is called on every tick, so the indicator keeps updating
automatically. In the example below, the current time is converted to the selected timezone with
the dayjs timezone plugin – switch the timezone to
see the indicator and the time bubble move accordingly:
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.
By default events snap to intervalMinutes when resized. Set eventResizeInterval to use a
different snap step for resizing – for example, a grid with 30-minute slots whose events can be
resized in 15-minute increments:
Set mode="static" to disable all interactions. Events and time slots become non-interactive,
useful for display-only views.