Week view with resource rows for scheduling across resources
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. Interactive background events still cannot be dragged.
Last clicked: nothing yet
When withEventResize is set together with withInteractiveBackgroundEvents , background events render resize handles on their start and end edges. Dragging a handle calls onEventResize with the background event, the same way it does for regular events – use event.display === 'background' to tell them apart in the handler.
All-day background events are never resizable. To keep background events fixed while regular events stay resizable, return false from canResizeEvent :
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.
Meeting room: New York
Meeting room: London
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.
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.