Day view with resource columns for scheduling across resources
ResourcesDayView displays resources as rows and time slots as columns. 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 the entire day (start at 00:00:00 and end at the next day 00:00:00 ) are rendered as full-width bars. Foreground all-day events are pinned to the top of the resource row and stack when there are several; all-day events with display: 'background' tint the whole row.
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 :
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 startScrollTime prop to set the initial horizontal scroll position to a specific time. The value should be in HH:mm:ss format.
Use slotWidth to control the width of each time slot column and rowHeight to control the height of each resource row.
Use renderResourceLabel prop to customize the resource label rendering in the left column.
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 fully customize event rendering.
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.
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:
You can drag external items onto the schedule using onExternalEventDrop prop.
Events can be dragged both within the schedule and to an external area.
Enable event resizing with withEventResize prop. Events can be resized by dragging their left or right edges.
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:
Click on a time slot or drag to select a range to create a new event. Click on an existing event to edit it.
Use highlightBusinessHours prop to visually distinguish business hours from non-business hours across all time slot columns.
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 canDragEvent and canResizeEvent to control which events can be dragged or resized. Events with payload.locked set to true cannot be moved or resized.
ResourcesDayView automatically expands recurring events for the visible day. 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 scrollAreaProps to customize the scroll area, for example to increase the scrollbar size and offset scrollbars.
Use locale prop to change the date formatting locale, slotLabelFormat for time format, and labels to override UI labels.
Set mode="static" to disable all interactions. Events and time slots become non-interactive, useful for display-only views.