BigCalendar
Full-viewport monthly calendar grid with event bars, multi-day spanning, overflow indicators, and keyboard navigation.
Installation
tsx
import { BigCalendar, type CalendarEvent } from "madagent";Default
October 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
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
31
With Events
October 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
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
31
Multi-Day Events
October 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
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
31
Color Variants
October 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
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
31
Overflow (+N more)
October 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
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
31
Controlled Navigation
Viewing: October 2026
October 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
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
31
Hijri Calendar
October 2026 | ربيع الآخر/جمادى الأولى ١٤٤٨
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27١٦
28١٧
29١٨
30١٩
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١٩
31٢٠
| Prop | Type | Default | Description |
|---|---|---|---|
events | CalendarEvent[] | [] | Array of calendar events to display |
month | number | - | Controlled month (0–11) |
year | number | - | Controlled year |
defaultMonth | number | - | Default month for uncontrolled mode (0–11) |
defaultYear | number | - | Default year for uncontrolled mode |
onMonthChange | (month: number, year: number) => void | - | Called when the displayed month changes |
onEventClick | (event: CalendarEvent) => void | - | Called when an event bar is clicked |
onDateClick | (date: Date) => void | - | Called when a date cell is clicked |
secondaryCalendar | "hijri" | - | Show secondary Hijri calendar dates with Arabic-Indic numerals and Hijri month names on the first of each Hijri month |
maxVisibleEvents | number | 3 | Max event bars per cell before showing "+N more" |
className | string | - | Additional CSS class on the root element |
CalendarEvent Type
| Prop | Type | Default | Description |
|---|---|---|---|
id* | string | - | Unique identifier for the event |
title* | string | - | Display title for the event bar |
start* | Date | - | Event start date |
end* | Date | - | Event end date (inclusive for multi-day events) |
color | "accent""info""positive""warning""negative""chart1""chart2""chart3""chart4""chart5" | "accent" | Semantic color for the event bar |
allDay | boolean | - | Whether this is an all-day event |
RTL Support
Components automatically adapt to right-to-left languages using CSS logical properties.
Preview
October 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
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
31
Usage
tsx
<BigCalendar events={events} />