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
Vercel banner