Importimport { Calendar } from 'antd'; |
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');<Calendar cellRender={cellRender} onPanelChange={onPanelChange} onSelect={onSelect} />
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| 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> | - | 6.0.0 | |
Customize the display of the date cell, the returned content will override the cell. Please use fullCellRender instead in 5.4.0 and later | function(date: Dayjs): ReactNode | - | < 5.4.0 | × | |
| 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> | - | 6.0.0 | |
| 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 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorBgContainer | Container background color, e.g: default button, input box, etc. Be sure not to confuse this with `colorBgElevated`. | string | #ffffff |
| colorFillSecondary | The second level of fill color can outline the shape of the element more clearly, such as Rate, Skeleton, etc. It can also be used as the Hover state of the third level of fill color, such as Table, etc. | string | rgba(0,0,0,0.06) |
| colorIcon | Weak action. Such as `allowClear` or Alert close button | string | rgba(0,0,0,0.45) |
| colorIconHover | Weak action hover color. Such as `allowClear` or Alert close button | string | rgba(0,0,0,0.88) |
| colorPrimary | Brand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics. | string | #1677ff |
| colorSplit | Used as the color of separator, this color is the same as colorBorderSecondary but with transparency. | string | rgba(5,5,5,0.06) |
| colorText | Default text color which comply with W3C standards, and this color is also the darkest neutral color. | string | rgba(0,0,0,0.88) |
| colorTextDisabled | Control the color of text in disabled state. | string | rgba(0,0,0,0.25) |
| colorTextHeading | Control the font color of heading. | string | rgba(0,0,0,0.88) |
| colorTextLightSolid | Control the highlight color of text with background color, such as the text in Primary Button components. | string | #fff |
| colorTextTertiary | The third level of text color is generally used for descriptive text, such as form supplementary explanation text, list descriptive text, etc. | string | rgba(0,0,0,0.45) |
| borderRadiusLG | LG size border radius, used in some large border radius components, such as Card, Modal and other components. | number | 8 |
| borderRadiusSM | SM size border radius, used in small size components, such as Button, Input, Select and other input components in small size | number | 4 |
| controlHeightLG | LG component height | number | 40 |
| controlHeightSM | SM component height | number | 24 |
| controlItemBgActive | Control the background color of control component item when active. | string | #e6f4ff |
| controlItemBgHover | Control the background color of control component item when hovering. | string | rgba(0,0,0,0.04) |
| fontFamily | The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics. | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | The most widely used font size in the design system, from which the text gradient will be derived. | number | 14 |
| fontWeightStrong | Control the font weight of heading components (such as h1, h2, h3) or selected item. | number | 600 |
| lineHeight | Line height of text. | number | 1.5714285714285714 |
| lineType | Border style of base components | string | solid |
| lineWidth | Border width of base components | number | 1 |
| lineWidthBold | The default line width of the outline class components, such as Button, Input, Select, etc. | number | 2 |
| marginXS | Control the margin of an element, with a small size. | number | 8 |
| marginXXS | Control the margin of an element, with the smallest size. | number | 4 |
| motionDurationMid | Motion speed, medium speed. Used for medium element animation interaction. | string | 0.2s |
| motionDurationSlow | Motion speed, slow speed. Used for large element animation interaction. | string | 0.3s |
| padding | Control the padding of the element. | number | 16 |
| paddingSM | Control the small padding of the element. | number | 12 |
| paddingXS | Control the extra small padding of the element. | number | 8 |
| paddingXXS | Control the extra extra small padding of the element. | number | 4 |
| screenXS | Control the screen width of extra small screens. | number | 480 |
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);}}}/>
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
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 | 08 | 09 | 10 | 11 |
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
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 | 08
| 09 | 10
| 11 |
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
28 | 29 | 30 | 31 | 01 | 02 | 03 |
04 | 05 | 06 | 07 | 08 Release window | 09 | 10 |
11 | 12 | 13 | 14 Design review | 15 | 16 | 17 |
18 | 19 | 20 | 21 Maintenance | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 Bug fix | 31 |
01 | 02 | 03 | 04 | 05 | 06 | 07 |
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
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 | 08 | 09 | 10 | 11 |
| 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 |
|---|---|---|---|---|---|---|
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 小暑 | 8 廿四 | 9 廿五 | 10 廿六 | 11 廿七 |
| Su | Mo | Tu | We | Th | Fr | Sa | |
|---|---|---|---|---|---|---|---|
23 | 31 | 01 | 02 | 03 | 04 | 05 | 06 |
24 | 07 | 08 | 09 | 10 | 11 | 12 | 13 |
25 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
26 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
27 | 28 | 29 | 30 | 01 | 02 | 03 | 04 |
28 | 05 | 06 | 07 | 08 | 09 | 10 | 11 |
| Su | Mo | Tu | We | Th | Fr | Sa | |
|---|---|---|---|---|---|---|---|
23 | 31 | 01 | 02 | 03 | 04 | 05 | 06 |
24 | 07 | 08 | 09 | 10 | 11 | 12 | 13 |
25 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
26 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
27 | 28 | 29 | 30 | 01 | 02 | 03 | 04 |
28 | 05 | 06 | 07 | 08 | 09 | 10 | 11 |
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
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 | 08 | 09 | 10 | 11 |
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
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 | 08 | 09 | 10 | 11 |
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
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 | 08 | 09 | 10 | 11 |
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
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 | 08 | 09 | 10 | 11 |