ant-design/components/calendar/index.en-US.md

category	group	title	description	cover	coverDark
Components	Data Display	Calendar	A container that displays data in calendar form.	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*nF6_To7pDSAAAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAAAAAAAAAAAADrJ8AQ/original

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.

Examples

Basic Notice Calendar Card Selectable Calendar Lunar Calendar Customize Header Component Token

API

Common props ref：Common props

Note: Part of the Calendar's locale is read from value. So, please set the locale of dayjs correctly.

// The default locale is en-US, if you want to use other locale, just set locale in entry file globally.
// import dayjs from 'dayjs';
// import 'dayjs/locale/zh-cn';
// dayjs.locale('zh-cn');

<Calendar cellRender={cellRender} onPanelChange={onPanelChange} onSelect={onSelect} />

Property	Description	Type	Default	Version
cellRender	Customize cell content	function(current: dayjs, today: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' | 'end', type: PanelMode, locale?: Locale, subType?: 'hour' | 'minute' | 'second' | 'meridiem' }) => React.ReactNode	-	5.4.0
dateFullCellRender	Customize the display of the date cell, the returned content will override the cell	function(date: Dayjs): ReactNode	-
fullCellRender	Customize cell content	function(current: dayjs, today: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' | 'end', type: PanelMode, locale?: Locale, subType?: 'hour' | 'minute' | 'second' | 'meridiem' }) => React.ReactNode	-	5.4.0
defaultValue	The date selected by default	dayjs	-
disabledDate	Function that specifies the dates that cannot be selected, currentDate is same dayjs object as value prop which you shouldn't mutate it](https://github.com/ant-design/ant-design/issues/30987)	(currentDate: Dayjs) => boolean	-
fullscreen	Whether to display in full-screen	boolean	true
headerRender	Render custom header in panel	function(object:{value: Dayjs, type: string, onChange: f(), onTypeChange: f()})	-
locale	The calendar's locale	object	(default)
mode	The display mode of the calendar	month | year	month
validRange	To set valid range	[dayjs, dayjs]	-
value	The current selected date	dayjs	-
onChange	Callback for when date changes	function(date: Dayjs)	-
onPanelChange	Callback for when panel changes	function(date: Dayjs, mode: string)	-
onSelect	Callback for when a date is selected, include source info	function(date: Dayjs, info: { source: 'year' | 'month' | 'date' | 'customize' })	-	info: 5.6.0

Design Token

FAQ

How to use Calendar with customize date library?

See Use custom date library

How to set locale for date-related components?

See How to set locale for date-related components

Date-related components locale is not working?

See FAQ Date-related-components-locale-is-not-working?

How to get date from panel click?

onSelect provide info.source to help on this:

<Calendar
  onSelect={(date, { source }) => {
    if (source === 'date') {
      console.log('Panel Select:', source);
    }
  }}
/>