mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-22 22:48:29 +08:00
9a9db14b4c
* use less variables in calendar style * Make calendar selectable * Add test case * fix test typo * update demo title
2.0 KiB
2.0 KiB
category | type | cols | title |
---|---|---|---|
Components | Data Display | 1 | Calendar |
Container for displaying data in calendar form.
When To Use
When data is in the form of date, such as schedule, timetable, prices calendar, Lunar calendar. This component also supports Year/Month switch.
API
Note: Part of locale of Calendar is read from value. So, please set the locale of moment correctly.
import moment from 'moment';
// It's recommended to set locale in entry file globaly.
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
<Calendar
dateCellRender={dateCellRender}
monthCellRender={monthCellRender}
onPanelChange={onPanelChange}
onSelect={onSelect}
/>
Property | Description | Type | Default |
---|---|---|---|
value | set date | moment | current date |
defaultValue | set default date | moment | default date |
mode | can be set to month or year | string | month |
fullscreen | to set whether full-screen display | boolean | true |
dateCellRender | to set the way of renderer the date cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - |
monthCellRender | to set the way of renderer the month cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - |
dateFullCellRender | to set the way of renderer the date cell,the returned content will override the cell | function(date: moment): ReactNode | - |
monthFullCellRender | to set the way of renderer the month cell,the returned content will override the cell | function(date: moment): ReactNode | - |
locale | set locale | object | default |
onPanelChange | callback when panel change | function(date: moment, mode: string) | - |
onSelect | callback when select date | function(date: moment) | - |