ant-design/components/calendar/index.en-US.md

2.6 KiB
Raw Blame History

category type cols title cover
Components Data Display 1 Calendar https://gw.alipayobjects.com/zos/antfincdn/dPQmLq08DI/Calendar.svg

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.

API

<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: Moment): ReactNode -
dateFullCellRender Customize the display of the date cell, the returned content will override the cell function(date: Moment): ReactNode -
defaultValue The date selected by default moment -
disabledDate Function that specifies the dates that cannot be selected, currentDate is same moment object as value prop which you shouldn't mutate it](https://github.com/ant-design/ant-design/issues/30987) (currentDate: Moment) => boolean -
fullscreen Whether to display in full-screen boolean true
headerRender Render custom header in panel function(object:{value: Moment, 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: Moment): ReactNode -
monthFullCellRender Customize the display of the month cell, the returned content will override the cell function(date: Moment): ReactNode -
validRange To set valid range [moment, moment] -
value The current selected date moment -
onChange Callback for when date changes function(date: Moment) -
onPanelChange Callback for when panel changes function(date: Moment, mode: string) -
onSelect Callback for when a date is selected function(date: Moment -

FAQ