Features
Multi-Calendar Filtering
Show or hide groups of events using multiple named calendars with color coding.
Multi-Calendar Filtering
CalendarKit Pro supports multiple calendars — named, color-coded groups that users can toggle on/off. The built-in sidebar displays calendar checkboxes automatically when you pass the calendars prop.
Basic setup
const [calendars, setCalendars] = useState([
{ id: 'work', label: 'Work', color: '#3b82f6', active: true },
{ id: 'personal', label: 'Personal', color: '#10b981', active: true },
{ id: 'holidays', label: 'Holidays', color: '#f59e0b', active: false },
]);
<ProScheduler
calendars={calendars}
onCalendarToggle={(id, active) =>
setCalendars((prev) => prev.map((c) => (c.id === id ? { ...c, active } : c)))
}
events={filteredEvents}
...
/>Filtering events yourself
The calendars prop controls the sidebar checkboxes but does not automatically filter events. You must filter them before passing to events:
const filteredEvents = useMemo(() => {
const activeIds = calendars
.filter((c) => c.active)
.map((c) => c.id);
return allEvents.filter(
(e) => !e.calendarId || activeIds.includes(e.calendarId)
);
}, [allEvents, calendars]);
<ProScheduler events={filteredEvents} ... />Events without a
calendarIdare always shown (they don't belong to any calendar).
Calendar object shape
interface Calendar {
id: string; // unique key
label: string; // display name in sidebar
color?: string; // checkbox and event chip accent color
active?: boolean; // whether this calendar is currently shown
}Full example
'use client';
import { useState, useMemo } from 'react';
import { ProScheduler } from 'calendarkit-prov2';
import type { CalendarEvent } from 'calendarkit-prov2';
import { addHours, addDays, startOfWeek } from 'date-fns';
const weekStart = startOfWeek(new Date());
// Events tagged with calendarId
const allEvents: CalendarEvent[] = [
{
id: 'w1', title: 'Team Standup',
start: addHours(addDays(weekStart, 1), 9),
end: addHours(addDays(weekStart, 1), 9.5),
calendarId: 'work', color: '#3b82f6',
},
{
id: 'w2', title: 'Sprint Planning',
start: addHours(addDays(weekStart, 2), 10),
end: addHours(addDays(weekStart, 2), 12),
calendarId: 'work', color: '#3b82f6',
},
{
id: 'p1', title: 'Gym Session',
start: addHours(addDays(weekStart, 3), 18),
end: addHours(addDays(weekStart, 3), 19),
calendarId: 'personal', color: '#10b981',
},
{
id: 'p2', title: 'Dinner with Family',
start: addHours(addDays(weekStart, 5), 19),
end: addHours(addDays(weekStart, 5), 21),
calendarId: 'personal', color: '#10b981',
},
{
id: 'h1', title: 'National Holiday',
start: addDays(weekStart, 4),
end: addDays(weekStart, 5),
allDay: true,
calendarId: 'holidays', color: '#f59e0b',
},
];
export default function MultiCalendarExample() {
const [calendars, setCalendars] = useState([
{ id: 'work', label: 'Work', color: '#3b82f6', active: true },
{ id: 'personal', label: 'Personal', color: '#10b981', active: true },
{ id: 'holidays', label: 'Holidays', color: '#f59e0b', active: true },
]);
const [events, setEvents] = useState<CalendarEvent[]>(allEvents);
const filteredEvents = useMemo(() => {
const activeIds = calendars.filter((c) => c.active).map((c) => c.id);
return events.filter((e) => !e.calendarId || activeIds.includes(e.calendarId));
}, [events, calendars]);
return (
<div className="h-[700px] border rounded-xl overflow-hidden">
<ProScheduler
view="week"
events={filteredEvents}
date={new Date()}
calendars={calendars}
onCalendarToggle={(id, active) =>
setCalendars((prev) => prev.map((c) => (c.id === id ? { ...c, active } : c)))
}
onEventCreate={(e) => {
const cal = calendars.find((c) => c.id === e.calendarId);
setEvents((prev) => [
...prev,
{
...e,
id: crypto.randomUUID(),
color: cal?.color ?? '#3b82f6',
} 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))
}
/>
</div>
);
}