Calendar #

A component that displays data by calendar

Import #

Examples #

Basic #

Compact #

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.

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.

Lunar #

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	The default value (uncontrolled)
isoWeek	boolean	ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day
locale	DateTimeFormats	Locale configuration
monthDropdownProps	MonthDropdownProps	Props for the month dropdown
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	The current value (controlled)
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

MonthDropdownProps #

import type { FixedSizeListProps } from 'react-window';

interface MonthDropdownProps extends Partial<FixedSizeListProps> {
  /**
   * The HTML element or React component to render as the root element of the MonthDropdown.
   */
  as?: React.ElementType;

  /**
   * The HTML element or React component to render as each item in the MonthDropdown.
   */
  itemAs?: React.ElementType;

  /**
   * The CSS class name to apply to each item in the MonthDropdown.
   */
  itemClassName?: string;
}