Calendar
A component that displays data by calendar
Import
import { Calendar } from 'rsuite';Examples
Basic
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.
Compact
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 |