Importimport { Calendar } from 'antd';
Docs
contributors
- Components Overview
- Changelogv6.1.4
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
When data is in the form of dates, such as schedules, timetables, prices calendar, lunar calendar. This component also supports Year/Month switch.
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');<CalendarcellRender={cellRender}onPanelChange={onPanelChange}onSelect={onSelect}/>
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| cellRender | Customize cell content | function(current: dayjs, info: { prefixCls: string, originNode: React.ReactElement, today: dayjs, range?: 'start' | 'end', type: PanelMode, locale?: Locale, subType?: 'hour' | 'minute' | 'second' | 'meridiem' }) => React.ReactNode | - | 5.4.0 |
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | |
| 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, info: { prefixCls: string, originNode: React.ReactElement, today: dayjs, 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 | |
| showWeek | Whether to display week number | boolean | false | 5.23.0 |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | |
| headerRender | Render custom header in panel | function(object:{value: Dayjs, type: 'year' | 'month', 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 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| fullBg | Background color of full calendar | string | #ffffff |
| fullPanelBg | Background color of full calendar panel | string | #ffffff |
| itemActiveBg | Background color of selected date item | string | #e6f4ff |
| miniContentHeight | Height of mini calendar content | string | number | 256 |
| monthControlWidth | Width of month select | string | number | 70 |
| yearControlWidth | Width of year select | string | number | 80 |
See How to set locale for date-related components
See FAQ Date-related-components-locale-is-not-working?
onSelect provide info.source to help on this:
<CalendaronSelect={(date,{ source })=>{if(source ==='date'){console.log('Panel Select:', source);}}}/>
A basic calendar component with Year/Month switch.
This component can be rendered by using dateCellRender and monthCellRender with the data you need.
Nested inside a container element for rendering in limited space.
A basic calendar component with Year/Month switch.
Display lunar calendar, solar terms and other information.
Show week number in fullscreen calendar by setting showWeek prop to true.
Customize Calendar header content.
You can customize the semantic dom style of Calendar by passing objects/functions through classNames and styles.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
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 | 31 |
01 | 02 | 03 | 04 | 05 | 06 | 07 |
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
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 | 31 |
01 | 02 | 03 | 04 | 05 | 06 | 07 |
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
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 | 31 |
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 |
|---|---|---|---|---|---|---|
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 十二 | 31 十三 |
1 十四 | 2 十五 | 3 十六 | 4 立春 | 5 十八 | 6 十九 | 7 二十 |
| Week | Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|---|
1 | 28 | 29 | 30 | 31 | 01 | 02 | 03 |
2 | 04 | 05 | 06 | 07 | 08 | 09 | 10 |
3 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
4 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
5 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
6 | 01 | 02 | 03 | 04 | 05 | 06 | 07 |
| Week | Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|---|
1 | 28 | 29 | 30 | 31 | 01 | 02 | 03 |
2 | 04 | 05 | 06 | 07 | 08 | 09 | 10 |
3 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
4 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
5 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
6 | 01 | 02 | 03 | 04 | 05 | 06 | 07 |
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
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 | 31 |
01 | 02 | 03 | 04 | 05 | 06 | 07 |
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
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 | 31 |
01 | 02 | 03 | 04 | 05 | 06 | 07 |
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
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 | 31 |
01 | 02 | 03 | 04 | 05 | 06 | 07 |
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
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 | 31 |
01 | 02 | 03 | 04 | 05 | 06 | 07 |
