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
August 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
26
27
28
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
31
1
2
3
4
5
With Events
August 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
26
27
28
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
31
1
2
3
4
5
Multi-Day Events
August 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
26
27
28
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
31
1
2
3
4
5
Color Variants
August 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
26
27
28
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
31
1
2
3
4
5
Overflow (+N more)
August 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
26
27
28
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
31
1
2
3
4
5
Controlled Navigation
Viewing: August 2026
August 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
26
27
28
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
31
1
2
3
4
5
Hijri Calendar
August 2026 | صفر/ربيع الأول ١٤٤٨
Sun
Mon
Tue
Wed
Thu
Fri
Sat
26١٢
27١٣
28١٤
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١٧
31١٨
1١٩
2٢٠
3٢١
4٢٢
5٢٣
| 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
August 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
26
27
28
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
31
1
2
3
4
5
Usage
tsx
<BigCalendar events={events} />