# Resource scheduling

A horizontal timeline with one row per resource: rooms, people, equipment.

```tsx
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](https://calendarkit.io/docs/multiple-calendars)).