Props

import { ResourceScheduler } from "resource-scheduler";

Only resources is required.

Data

• resources: Resource[], required. Each resource may hold its own events. Read as is; the component keeps no copy.
• events: SchedulerEvent[]. The same events as one flat list: each names its resource with resourceId (or resourceIds). Added to what the resources hold. See Data model.

Starting state and views

• initialDate: Date, default new Date(). The date to show first.
• initialView: ViewType, default ViewType.Day.
• availableViews: ViewType[], default all five. Views offered in the selector.
• allowViewChange: boolean, default true. Set false to hide the selector.
• onDateChange: (date: Date) => void. The user navigated.
• onViewChange: (view: ViewType) => void. The user changed view.
• weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6, default 0 (Sunday). First day of the week.
• hideWeekends: boolean, default false. Leaves Saturday and Sunday out of the week, month, quarter and year views.
• onRangeChange: ({ start, end, view }) => void. Fires when the grid first shows and whenever the visible range changes. end is exclusive. Use it to load only what is on screen.

Day view slots

• slotDuration: number, default 60. Minutes per slot.
• dayStartHour: number, default 0. First visible hour, 0 to 23.
• dayEndHour: number, default 24. Where the range ends (exclusive), 1 to 24.

Creating, moving and resizing

• onSlotSelect: (selection: SlotSelection) => void. Click or drag on empty slots; replaces onEventCreate. end is exclusive.
• onEventCreate: (event: Omit<SchedulerEvent, "id">, resourceId: string) => void. The scheduler builds the event for you.
• onEventDrop: (event, fromResourceId, toResourceId, newStartDate, newEndDate) => void. An event was moved.
• onEventResize: (event, resourceId, newStartDate, newEndDate) => void. Providing it shows the resize handles.
• onEventClick: (event, resource) => void.

Conflict rules

• eventOverlap: boolean or (moving, other) => boolean, default allow. false forbids overlapping events on the same resource; a function decides per pair.
• isValidDrop: (event, { resourceId, start, end }) => boolean. Final veto for move, resize and create.

Availability

• businessHours: { daysOfWeek?, startHour?, endHour? }. Shades time outside working hours and non-working days. {} means Monday to Friday, 9 to 17. A resource’s own businessHours overrides it. See Business hours and availability.
• blockUnavailable: boolean, default false. Rejects every move, resize and create that touches a shaded slot.
• nowIndicator: boolean, default false. A line at the current time in today’s day view.
• showUtilization: boolean, default false. A bar under each resource name showing how much of its available time (business hours minus unavailable, times capacity) is booked in the visible range. See Utilization.

Groups

• collapsedGroups: string[]. The groups (Resource.group) that are folded, by name; a nested group is its path joined with “ / “, such as "Main building / Floor 1". Pass it with onCollapsedGroupsChange to control it.
• defaultCollapsedGroups: string[]. Groups that start folded when you do not control collapsedGroups.
• onCollapsedGroupsChange: (groups: string[]) => void. Called with the new list when the user folds or unfolds a group. See Resource groups.
• onGroupReorder: (groupKey: string, beforeGroupKey: string | null) => void. Turns on moving groups: a grip on each header, and Alt + ↑ / ↓ on a focused one. Called with the group’s key and the sibling group it goes before (null for the end); apply it with reorderGroup. Never called for a drop that changes nothing. See Reordering.
• onResourceReorder: (resourceId: string, beforeResourceId: string | null, group: string | null) => void. Turns on moving resources: a grip on each one, and Alt + ↑ / ↓ on a focused one. Called with the resource, the one it goes before (null for the end of the group) and the key of the group it lands in (null for none); apply it with moveResource. Never called for a drop that changes nothing.

Language and clock

• locale: a date-fns Locale, for example import { de } from "date-fns/locale". Names, date formats, the 12 or 24-hour clock and the first day of the week follow it. Default: English, Sunday first, 12-hour.
• hour12: boolean. true for a 12-hour clock, false for 24-hour. Default: what the locale uses.
• timeZone: string, an IANA name such as "Europe/Paris". Shows and reports time in that zone instead of the browser’s: events at their wall-clock time there, businessHours as hours there, today and the now line in it. Handlers receive instants; render props receive wall-clock Dates. An unknown name warns and the local zone is used. See Time zones.
• showColumnUtilization: boolean, default false. A row under the grid with one cell per column (an hour in the day view, a day in the others): the share of all resources’ available time that is booked in it. Counts resources in collapsed groups; “–” where nothing is available. See Utilization.
• dir: "ltr" | "rtl", default "ltr". "rtl" mirrors the layout for right-to-left languages and flips the left and right arrow keys.
• labels: PartialLabels. The text of the toolbar, headers, view names and screen reader messages. Any subset; the rest stays English. See Languages and clocks.

Performance

• virtualize: boolean, default on above 100 resources. Renders only the rows near the viewport. Needs a fixed-height box. Always off while printing. See Large data and performance.
• virtualizeColumns: boolean, default on above 100 columns (the year view, a day with slotDuration={5}). Renders only the columns near the viewport; the keyboard cursor cell, a carried event and its drop slots stay mounted. Needs the column widths in px, as the defaults are. Always off while printing. See Large data and performance.

Rendering

• renderEventPopover: (event, resource, closePopover) => ReactNode. Replaces the details popover.
• components: SchedulerComponents. Replaces whole parts with your own React components (they can use hooks): Toolbar, Event (the content of the card), EventPopover, ResourceHeader, DateHeader, EmptyCell. A part given here wins over the matching render* prop. See Replace parts.
• renderTimeSlot: (event, resources) => ReactNode. Replaces the event card; resources holds the one owning resource.
• renderResourceHeader: (resource) => ReactNode. The cell in the left column.
• renderDateHeader: (date, view) => ReactNode. A column header.
• renderEmptyCell: (date, resource) => ReactNode. Content inside an empty slot.

Styling

• classNames: SchedulerClassNames, { root, toolbar, dateHeader, resourceCell, groupHeader, slot, event }. Extra classes for those parts, merged over the defaults with tailwind-merge. See Theming.

• density: "comfortable" | "compact", default "comfortable". "compact" shrinks event lanes (38 px against 52) and cards (34 px against 48), puts an event’s title and time on one line and trims the resource cell padding. A row with a utilization bar stays at least 60 px. See Theming.

Layout and accessibility

• resourceColumnWidth: string, default "220px" ("140px" on small screens). Pixel values only.
• timeColumnWidth: string, default "90px". Day view column width.
• dateColumnWidth: string, default "140px". Week view and longer.
• ariaLabel: string, default "Resource schedule". Accessible name of the grid.

Ref

Pass ref (type ResourceSchedulerHandle) to drive the view from code. See Load data and control the view.

• goTo(date): show the period containing date. Calls onDateChange.
• setView(view): change the view, keep the date. Calls onViewChange.
• getVisibleRange(): { start, end } of what the grid covers. end is exclusive.
• scrollToTime(date): scroll date to the middle of the grid; navigates first if it is outside the range.