Views
Resource View
Side-by-side columns for rooms, people, or any resource — for a single day.
Resource View
The Resource view ('resource') renders one column per resource for the current day. It is ideal for scheduling rooms, machines, staff, or any shared resource.
Prerequisites
You must pass a resources array — otherwise the Resource view renders an empty grid.
import type { Resource } from 'calendarkit-prov2';
const resources: Resource[] = [
{ id: 'room-a', label: 'Conference Room A', color: '#3b82f6' },
{ id: 'room-b', label: 'Conference Room B', color: '#10b981' },
{ id: 'room-c', label: 'Board Room', color: '#f59e0b' },
];Usage
<ProScheduler
view="resource"
resources={resources}
events={events}
date={date}
onDateChange={setDate}
/>Resource interface
interface Resource {
id: string;
label: string;
color?: string; // column header accent color
avatar?: string; // URL to an avatar image
}Linking events to resources
Set the resourceId field on an event to place it in the corresponding resource column:
const events: CalendarEvent[] = [
{
id: '1',
title: 'Board Meeting',
start: new Date('2026-07-21T09:00:00'),
end: new Date('2026-07-21T10:00:00'),
resourceId: 'room-c', // placed in "Board Room" column
color: '#f59e0b',
},
{
id: '2',
title: 'Team Sync',
start: new Date('2026-07-21T11:00:00'),
end: new Date('2026-07-21T12:00:00'),
resourceId: 'room-a', // placed in "Conference Room A" column
color: '#3b82f6',
},
];Events without a resourceId are not displayed in the Resource view.
Full example
'use client';
import { useState } from 'react';
import { ProScheduler } from 'calendarkit-prov2';
import type { CalendarEvent, Resource } from 'calendarkit-prov2';
import { addHours } from 'date-fns';
const today = new Date();
today.setHours(0, 0, 0, 0);
const resources: Resource[] = [
{ id: 'room-a', label: 'Conference Room A', color: '#3b82f6' },
{ id: 'room-b', label: 'Conference Room B', color: '#10b981' },
{ id: 'room-c', label: 'Board Room', color: '#f59e0b' },
{ id: 'studio', label: 'Recording Studio', color: '#8b5cf6' },
];
const initialEvents: CalendarEvent[] = [
{
id: '1',
title: 'All-Hands',
start: addHours(today, 9),
end: addHours(today, 10),
resourceId: 'room-c',
color: '#f59e0b',
},
{
id: '2',
title: 'Sprint Planning',
start: addHours(today, 10),
end: addHours(today, 12),
resourceId: 'room-a',
color: '#3b82f6',
},
{
id: '3',
title: 'Design Review',
start: addHours(today, 13),
end: addHours(today, 14.5),
resourceId: 'room-b',
color: '#10b981',
},
{
id: '4',
title: 'Podcast Recording',
start: addHours(today, 14),
end: addHours(today, 16),
resourceId: 'studio',
color: '#8b5cf6',
},
];
export default function ResourceCalendar() {
const [events, setEvents] = useState<CalendarEvent[]>(initialEvents);
const [date, setDate] = useState(new Date());
return (
<div className="h-[700px] border rounded-xl overflow-hidden">
<ProScheduler
view="resource"
resources={resources}
events={events}
date={date}
onDateChange={setDate}
onEventCreate={(e) => {
// When creating from resource view, resourceId is pre-filled
setEvents((prev) => [
...prev,
{ ...e, id: crypto.randomUUID() } as CalendarEvent,
]);
}}
onEventUpdate={(updated) =>
setEvents((prev) => prev.map((e) => (e.id === updated.id ? updated : e)))
}
onEventDelete={(id) =>
setEvents((prev) => prev.filter((e) => e.id !== id))
}
onEventDrop={(event, start, end) =>
setEvents((prev) =>
prev.map((e) => (e.id === event.id ? { ...e, start, end } : e))
)
}
/>
</div>
);
}Tips
- Navigate days with the Prev / Next arrows in the header.
- Drag events horizontally between resource columns to reassign them.
- The
resourceIdon the event is automatically updated when you drop an event into a different column (via theonEventDropcallback).