BigCalendar
A full-featured calendar with month, week, and day views.
Usage
April 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
import { BigCalendar, CalendarEvent } from "@/components/ui/bigcalendar"
const events: CalendarEvent[] = [
{
id: 1,
title: "Team Standup",
start: new Date(2026, 1, 16, 9, 0),
end: new Date(2026, 1, 16, 9, 30),
color: "blue",
},
];
<BigCalendar
events={events}
defaultView="month"
onEventClick={(e) => console.log(e)}
onDateClick={(d) => console.log(d)}
/>Features
- 3 Views: Month, Week, Day — switch with built-in toolbar
- Events: Color-coded, multi-day, all-day, overflow indicators
- Navigation: Today / Prev / Next with keyboard support
- Compound API: Override Toolbar, MonthView, WeekView, DayView individually
- Custom Renderer: Pass
renderEventfor fully custom event rendering - Zero Dependencies: Pure React + CSS Grid, no third-party calendar library
BigCalendar Props
| Prop | Type | Default | Description |
|---|---|---|---|
events | CalendarEvent[] | [] | Events to display |
defaultDate | Date | new Date() | Initial date |
date | Date | — | Controlled current date |
defaultView | CalendarView | 'month' | Initial view |
view | CalendarView | — | Controlled view |
onDateChange | (date: Date) => void | — | Navigation callback |
onViewChange | (view: CalendarView) => void | — | View switch callback |
onEventClick | (event: CalendarEvent) => void | — | Event click handler |
onDateClick | (date: Date) => void | — | Date cell click handler |
weekStartsOn | 0 | 1 | 0 | 0 = Sunday, 1 = Monday |
renderEvent | (event: CalendarEvent) => ReactNode | — | Custom event renderer |
CalendarEvent
| Field | Type | Required | Description |
|---|---|---|---|
id | string | number | ✅ | Unique identifier |
title | string | ✅ | Event title |
start | Date | ✅ | Start date/time |
end | Date | ✅ | End date/time |
color | string | — | blue, green, red, amber, purple, pink, primary |
allDay | boolean | — | All-day event |
description | string | — | Optional description |
Event Colors
| Color | Preview |
|---|---|
blue | 🔵 Blue accent |
green | 🟢 Green accent |
red | 🔴 Red accent |
amber | 🟡 Amber accent |
purple | 🟣 Purple accent |
pink | 🩷 Pink accent |
primary | 🎨 Theme primary |