Calendar
A component that displays data by calendar
Import
import { Calendar } from 'rsuite';
// or
import Calendar from 'rsuite/Calendar';Examples
Basic
Su
Mo
Tu
We
Th
Fr
Sa
23
24
25
26
27
28
1
2
3
4
5
6
7
8
9
10
- 10:30 am - Meeting
- 12:00 pm - Lunch
11
12
13
14
15
- 09:30 pm - Products Introduction Meeting
- 12:30 pm - Client entertaining
- 4 more
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
Compact
Su
Mo
Tu
We
Th
Fr
Sa
23
24
25
26
27
28
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
Props
<Calendar>
| Property | Type(Default) |
Description |
|---|---|---|
| bordered | boolean | Show border |
| compact | boolean | Display a compact calendar |
| defaultValue | Date | Default value |
| isoWeek | boolean | ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day |
| locale | CalendarLocaleType | Locale text |
| onChange | (date:Date) => void | Callback fired before the value changed |
| onSelect | (date:Date) => void | Callback fired before the date selected |
| renderCell | (date: Date) => ReactNode | Custom render calendar cells |
| value | Date | Controlled value |