Resources Schedule

import { ResourcesScheduleDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.ResourcesSchedule);

Usage

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.

<Demo data={ResourcesScheduleDemos.usage} />

Controlled state

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

<Demo data={ResourcesScheduleDemos.controlled} />

Drag and drop

Enable drag and drop across all views with withEventsDragAndDrop prop.

<Demo data={ResourcesScheduleDemos.dragDrop} />

Week view

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

<Demo data={ResourcesScheduleDemos.weekView} />

View-specific props

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

<Demo data={ResourcesScheduleDemos.viewProps} />

Event form

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.

<Demo data={ResourcesScheduleDemos.eventForm} />

External drag and drop

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

<Demo data={ResourcesScheduleDemos.externalDragDrop} />

Event resize

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.

<Demo data={ResourcesScheduleDemos.eventResize} />

Static mode

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

<Demo data={ResourcesScheduleDemos.staticMode} />