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

category	group	title	cover	coverDark
Components	Data Display	Calendar	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*nF6_To7pDSAAAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAAAAAAAAAAAADrJ8AQ/original

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.

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
  dateCellRender={dateCellRender}
  monthCellRender={monthCellRender}
  onPanelChange={onPanelChange}
  onSelect={onSelect}
/>

Property	Description	Type	Default	Version
dateCellRender	Customize the display of the date cell, the returned content will be appended to the cell	function(date: Dayjs): ReactNode	-
dateFullCellRender	Customize the display of the date cell, the returned content will override the cell	function(date: Dayjs): ReactNode	-
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
monthCellRender	Customize the display of the month cell, the returned content will be appended to the cell	function(date: Dayjs): ReactNode	-
monthFullCellRender	Customize the display of the month cell, the returned content will override the cell	function(date: Dayjs): ReactNode	-
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);
    }
  }}
/>