mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-15 09:21:22 +08:00
f1c38bf9e0
* feat: update demo * feat: update demo * feat: update demo * feat: update demo * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code
4.2 KiB
4.2 KiB
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?
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);
}
}}
/>