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 #

Custom week #

• Use weekStart to specify the first day of the week. If isoWeek is set, this property is ignored.
• Use isoWeek to enable the ISO 8601 standard, where each calendar week begins on Monday and Sunday on the seventh day.
• Use showWeekNumbers to display week numbers.

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 configuration
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
weekStart	0 | 1 | 2 | 3 | 4 | 5 | 6 (0)	The index of the first day of the week (0 - Sunday). If isoWeek is true, the value of weekStart is ignored