Calendar

// 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

Component Token

Global Token

FAQ

How to use Calendar with customize date library?

See Use custom date library

See How to set locale for date-related components

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);
    }
  }}
/>

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

FAQ

How to use Calendar with customize date library?

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);
    }
  }}
/>

Su	Mo	Tu	We	Th	Fr	Sa
27	28	29	30	31	01	02
03	04	05	06	07	08	09
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
01	02	03	04	05	06	07

Su	Mo	Tu	We	Th	Fr	Sa
27	28	29	30	31	01	02
03	04	05	06	07	08 This is warning event. This is usual event.	09
10 This is warning event. This is usual event. This is error event.	11	12	13	14	15 This is warning event This is very long usual event...... This is error event 1. This is error event 2. This is error event 3. This is error event 4.	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
01	02	03	04	05	06	07

Su	Mo	Tu	We	Th	Fr	Sa
27	28	29	30	31	01	02
03	04	05	06	07	08	09
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
01	02	03	04	05	06	07

Su	Mo	Tu	We	Th	Fr	Sa
01	02	03	04	05	06	07
08	09	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31	01	02	03	04
05	06	07	08	09	10	11

Su	Mo	Tu	We	Th	Fr	Sa
27 十二	28 十三	29 十四	30 十五	31 十六	1 十七	2 十八
3 十九	4 二十	5 廿一	6 廿二	7 廿三	8 白露	9 廿五
10 廿六	11 廿七	12 廿八	13 廿九	14 三十	15 初一	16 初二
17 初三	18 初四	19 初五	20 初六	21 初七	22 初八	23 秋分
24 初十	25 十一	26 十二	27 十三	28 十四	29 十五	30 十六
1 十七	2 十八	3 十九	4 二十	5 廿一	6 廿二	7 廿三

Namu Design

Calendar

Namu Design

Calendar

When To Use

Examples

API

Design Token

Component Token

Global Token

FAQ

How to use Calendar with customize date library?

How to get date from panel click?

When To Use

Examples

API

Design Token

Component Token

Global Token

FAQ

How to use Calendar with customize date library?

How to get date from panel click?

Custom header

Su	Mo	Tu	We	Th	Fr	Sa
27	28	29	30	31	01	02
03	04	05	06	07	08	09
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
01	02	03	04	05	06	07

Su	Mo	Tu	We	Th	Fr	Sa
27	28	29	30	31	01	02
03	04	05	06	07	08	09
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
01	02	03	04	05	06	07

Su	Mo	Tu	We	Th	Fr	Sa
01	02	03	04	05	06	07
08	09	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31	01	02	03	04
05	06	07	08	09	10	11

Su	Mo	Tu	We	Th	Fr	Sa
27	28	29	30	31	01	02
03	04	05	06	07	08	09
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
01	02	03	04	05	06	07

Su	Mo	Tu	We	Th	Fr	Sa
27	28	29	30	31	01	02
03	04	05	06	07	08	09
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
01	02	03	04	05	06	07

Su	Mo	Tu	We	Th	Fr	Sa
27	28	29	30	31	01	02
03	04	05	06	07	08	09
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
01	02	03	04	05	06	07

Su	Mo	Tu	We	Th	Fr	Sa
01	02	03	04	05	06	07
08	09	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31	01	02	03	04
05	06	07	08	09	10	11

Su	Mo	Tu	We	Th	Fr	Sa
27	28	29	30	31	01	02
03	04	05	06	07	08	09
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
01	02	03	04	05	06	07

CalendarChangelog

CalendarChangelog

When To Use

Examples

API

Design Token

Component Token

Global Token

FAQ

How to use Calendar with customize date library?

How to set locale for date-related components?

Date-related components locale is not working?

How to get date from panel click?

When To Use

Examples

API

Design Token

Component Token

Global Token

FAQ

How to use Calendar with customize date library?

How to set locale for date-related components?

Date-related components locale is not working?

How to get date from panel click?

Custom header

Calendar

Calendar

Su	Mo	Tu	We	Th	Fr	Sa
27	28	29	30	31	01	02
03	04	05	06	07	08	09
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
01	02	03	04	05	06	07

Su	Mo	Tu	We	Th	Fr	Sa
27	28	29	30	31	01	02
03	04	05	06	07	08	09
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
01	02	03	04	05	06	07

Su	Mo	Tu	We	Th	Fr	Sa
01	02	03	04	05	06	07
08	09	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31	01	02	03	04
05	06	07	08	09	10	11

Su	Mo	Tu	We	Th	Fr	Sa
27	28	29	30	31	01	02
03	04	05	06	07	08	09
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
01	02	03	04	05	06	07