ResourceSchedulerPanel

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-resource-scheduler-panel

pnpm add date-fns react-native-gesture-handler react-native-reanimated

Usage

import { ResourceSchedulerPanel } from '@/components/docyrus-native/resource-scheduler-panel';
import type { SchedulerEvent, SchedulerResource } from '@/components/docyrus-native/resource-scheduler-panel';

const resources: SchedulerResource[] = [
  { id: 'room-a', name: 'Room A', subtitle: '12 seats', group: 'Meeting rooms' },
  { id: 'dr-smith', name: 'Dr. Smith', subtitle: 'Cardiology', group: 'Doctors', avatar: 'https://…' },
];

const [events, setEvents] = useState<SchedulerEvent[]>([
  { id: 'e1', resourceId: 'room-a', title: 'Standup', startDate: new Date(2026, 8, 24, 9), endDate: new Date(2026, 8, 24, 10), color: '#3b82f6' },
]);

<ResourceSchedulerPanel
  resources={resources}
  events={events}
  defaultPresetId="weeks-days"
  onEventMove={(event, start, end, newResourceId) =>
    setEvents(prev => prev.map(e => e.id === event.id
      ? { ...e, startDate: start, endDate: end, resourceId: newResourceId ?? e.resourceId }
      : e))}
  onEventResize={(event, start, end) =>
    setEvents(prev => prev.map(e => e.id === event.id ? { ...e, startDate: start, endDate: end } : e))}
  onSlotClick={(resourceId, date) => createBooking(resourceId, date)}
  quickSlotHours={[9, 11, 13, 15, 17]}
/>

Custom resource columns

import type { ResourceSchedulerColumn } from '@/components/docyrus-native/resource-scheduler-panel';

const columns: ResourceSchedulerColumn[] = [
  { id: 'name', header: 'Resource', getValue: r => r.name },
  { id: 'seats', header: 'Seats', getValue: r => String(r.seats ?? '—'), width: 56 },
];

<ResourceSchedulerPanel resources={resources} events={events} resourceColumns={columns} resourcePanelWidth={180} />

Behavior

• Presets — every preset has an interval unit (column) and a group unit (header row above it). The built-in SCHEDULER_PRESETS are day-hours, weeks-days, months-days, months-weeks and months (Year / Months). Changing the preset (header select) resets the range to that preset's default range. Timeline math (lib/timeline-utils.ts, lib/presets.ts) is shared verbatim with web.
• Navigation — Today resets to the preset's default range; the arrows shift the range by one group unit. onDateRangeChange fires for all three. When today falls inside the range, the timeline scrolls it into view.
• Layout — the resource column stays fixed on the left while the lanes scroll horizontally; vertical scrolling of the lanes drives the resource column (Reanimated scrollTo), so rows stay aligned. Overlapping events stack into sub-rows and the lane grows to fit (the resource cell grows with it). Resources with a group get collapsible group header rows in both columns.
• Drag & drop — long-press an event (300 ms), then drag: it moves in whole interval units (hour / day / week / month / year) and can be dropped on another resource row → onEventMove(event, start, end, newResourceId?). Long-press an edge handle (120 ms) to resize → onEventResize. A floating pill shows the snapped range and target resource during the drag; scrolling is locked while dragging. Drag is disabled when readOnly or when the matching callback is missing.
• Tapping — tapping an event fires onEventClick and opens a detail bottom sheet (time, resource, location, description) unless showEventDetails={false} (web: popover). Tapping an empty lane area fires onSlotClick(resourceId, date) with the date under the finger.
• Quick slots (native-only) — with quickSlotHours and onSlotClick, tapping a resource cell opens a sheet of hour chips for today (or the range start when today is outside the range); a chip calls onSlotClick.
• Loading / empty — isLoading renders skeleton rows; no resources renders the "No events to display" state.
• Formatting — the event sheet and drag pill format dates through useDateFormat().formatDateTime when a provider is mounted (else MMM d, HH:mm). Header / column labels use the preset's date-fns formats, like web. Copy goes through useUiTranslation() with the web ui.scheduler.* keys.

API Reference

SchedulerResource

SchedulerEvent

ResourceSchedulerColumn

TimelinePreset / TimelinePresetConfig

Exports

Type Exports