Resource scheduling

const resources: Resource[] = [
  { id: 'room-a', label: 'Conference Room A', color: '#3b82f6' },
  { id: 'room-b', label: 'Conference Room B', color: '#10b981' },
];

<Scheduler
  view="resource"
  resources={resources}
  events={events}
/>

The resource view is a horizontal timeline with one row per resource: rooms, people, equipment.

• A resource is { id, label, color?, avatar? }. An event goes on a row through its resourceId.
• An event without its own color or calendar takes its resource's colour.
• A click on a free slot of a row opens the new-event card (or your own form) with that resource already assigned.
• Drag an event along its row to change its time, or to another row to change its resource. onEventUpdate receives the event with its new resourceId; onEventDrop receives the event before the move and its new dates.
• The view shares the time grid settings: dayStartHour, dayEndHour and slotDuration apply. reverseTimeAxis does not.
• Resources are rows, calendars are colours and filters: an event can have both a resourceId and a calendarId (see Multiple calendars).