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
30
31
1
2
3
4
5
6
7
8
9
10
- 10:30 am - Meeting
- 12:00 pm - Lunch
11
12
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
- 10:30 am - Meeting
- 12:00 pm - Lunch
Custom cell styles
Use cellClassName function to specify the custom class name added to each cell. For example, in the following code, we specify that the .bg-gray class name is added on Monday, Wednesday, and Friday, so that the background color of the cells in these three columns is gray.
Su
Mo
Tu
We
Th
Fr
Sa
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
10
Compact
Su
Mo
Tu
We
Th
Fr
Sa
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
10
Props
<Calendar>
| Property | Type(Default) |
Description |
|---|---|---|
| bordered | boolean | Show border |
| cellClassName | (date: Date) => string | undefined | Custom cell classes base on it's date |
| 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 |