ant-design

Tree: 2c6d5656c8

category	type	cols	title	cover
Components	Data Display	1	Calendar	https://gw.alipayobjects.com/zos/antfincdn/dPQmLq08DI/Calendar.svg

Container for displaying data in calendar form.

When To Use

When data is in the form of dates, such as schedules, timetables, prices calendar, lunar calendar. This component also supports Year/Month switch.

<Calendar
  dateCellRender={dateCellRender}
  monthCellRender={monthCellRender}
  onPanelChange={onPanelChange}
  onSelect={onSelect}
/>

Property	Description	Type	Default
dateCellRender	Customize the display of the date cell, the returned content will be appended to the cell	function(date: Moment): ReactNode	-
dateFullCellRender	Customize the display of the date cell, the returned content will override the cell	function(date: Moment): ReactNode	-
defaultValue	The date selected by default	moment	-
disabledDate	Function that specifies the dates that cannot be selected, `currentDate` is same moment object as `value` prop which you shouldn't mutate it](https://github.com/ant-design/ant-design/issues/30987)	(currentDate: Moment) => boolean	-
fullscreen	Whether to display in full-screen	boolean	true
headerRender	Render custom header in panel	function(object:{value: Moment, type: string, onChange: f(), onTypeChange: f()})	-
locale	The calendar's locale	object	(default)
mode	The display mode of the calendar	`month` \| `year`	`month`
monthCellRender	Customize the display of the month cell, the returned content will be appended to the cell	function(date: Moment): ReactNode	-
monthFullCellRender	Customize the display of the month cell, the returned content will override the cell	function(date: Moment): ReactNode	-
validRange	To set valid range	[moment, moment]	-
value	The current selected date	moment	-
onChange	Callback for when date changes	function(date: Moment)	-
onPanelChange	Callback for when panel changes	function(date: Moment, mode: string)	-
onSelect	Callback for when a date is selected	function(date: Moment）	-