ResourcesSchedule | Mantine

Schedule wrapper component that combines resource day, week and month views

ResourcesSchedule is a wrapper component that combines ResourcesDayView , ResourcesWeekView , and ResourcesMonthView into a single component with view switching. It manages the current view and date state, passing common props to all three views automatically.

You can control the current date and view level with date / onDateChange and view / onViewChange props.

Enable drag and drop across all views with withEventsDragAndDrop prop.

Set defaultView="week" to open the schedule in week view by default.

Use dayViewProps , weekViewProps , and monthViewProps to pass props specific to each view.

Click time slots, day cells, or existing events to open an event form. The form works across day, week, and month views with automatic view switching.

You can drag external items onto the schedule using onExternalEventDrop prop. The callback receives the resourceId of the target resource.

Enable event resizing with withEventResize prop. Events can be resized by dragging their left or right edges in all three views. In week view, resizing is constrained to the event's own day. In month view, resizing snaps to whole days and preserves the event's original time of day.

Set mode="static" to disable all interactions across all three views.

Recommended articles