Views
Month View
A grid showing an entire month at a glance, one cell per day.
Month View
The Month view ('month') renders a traditional calendar grid — 6 rows × 7 columns — showing all 28–31 days of the current month plus leading/trailing days from adjacent months.
Usage
<ProScheduler
view="month"
onViewChange={setView}
events={events}
date={date}
onDateChange={setDate}
/>Features
- Event chips — each event is displayed as a colored chip with the event title.
- All-day events — shown as full-width chips spanning the entire day cell.
- "+N more" overflow — when a cell has more events than fit, a "+N more" link appears. Clicking it navigates to the Day view for that date.
- Date click — clicking a day number navigates to that date in Day view.
- New event on click — clicking an empty area in a day cell opens the create event modal with the date pre-filled.
Event chip colors
Events use their color field for the chip background. If no color is set, the primary color is used.
const events: CalendarEvent[] = [
{
id: '1',
title: 'All-Hands Meeting',
start: new Date('2026-07-15T10:00:00'),
end: new Date('2026-07-15T11:00:00'),
color: '#3b82f6', // blue chip
},
{
id: '2',
title: 'Company Picnic',
start: new Date('2026-07-20'),
end: new Date('2026-07-21'),
allDay: true,
color: '#10b981', // green full-width chip
},
];Navigating from Month view
| Action | Result |
|---|---|
| Click a day number | Navigates to Day view for that date |
| Click "+N more" | Navigates to Day view for that date |
| Click an event chip | Opens the event detail/edit modal |
| Click empty area in cell | Opens "Create Event" modal for that date |
Example: Month view with multi-calendar
'use client';
import { useState } from 'react';
import { ProScheduler } from 'calendarkit-prov2';
import type { CalendarEvent } from 'calendarkit-prov2';
const calendars = [
{ id: 'work', label: 'Work', color: '#3b82f6', active: true },
{ id: 'personal', label: 'Personal', color: '#10b981', active: true },
{ id: 'holidays', label: 'Holidays', color: '#f59e0b', active: true },
];
export default function MonthCalendar() {
const [events, setEvents] = useState<CalendarEvent[]>([
{
id: 'h1',
title: 'Independence Day',
start: new Date('2026-07-04'),
end: new Date('2026-07-05'),
allDay: true,
calendarId: 'holidays',
color: '#f59e0b',
},
{
id: 'w1',
title: 'Sprint Planning',
start: new Date('2026-07-06T09:00:00'),
end: new Date('2026-07-06T10:00:00'),
calendarId: 'work',
color: '#3b82f6',
},
]);
const [cals, setCals] = useState(calendars);
return (
<div className="h-[700px] border rounded-xl overflow-hidden">
<ProScheduler
view="month"
events={events.filter((e) =>
cals.filter((c) => c.active).map((c) => c.id).includes(e.calendarId ?? '')
)}
date={new Date()}
calendars={cals}
onCalendarToggle={(id, active) =>
setCals((prev) => prev.map((c) => (c.id === id ? { ...c, active } : c)))
}
onEventCreate={(e) =>
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))
}
/>
</div>
);
}