ant-design-vue/components/calendar/index.en-US.md
果冻橙 f265a7bb02
fix docs dark theme & add docs coverDark (#6367)
* fix docs dark theme & add docs coverDark

* fix theme Editor edit
2023-03-20 11:15:02 +08:00

3.1 KiB
Raw Blame History

category type 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.

API

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');

<a-calendar v-model:value @panelChange="onPanelChange" @select="onSelect"></a-calendar>

customize the progress dot by setting a scoped slot

Property Description Type Default Version
dateCellRender Customize the display of the date cell by setting a scoped slot, the returned content will be appended to the cell v-slot:dateCellRender="{current: dayjs}" -
dateFullCellRender Customize the display of the date cell by setting a scoped slot, the returned content will override the cell v-slot:dateFullCellRender="{current: dayjs}" -
disabledDate Function that specifies the dates that cannot be selected (currentDate: dayjs) => boolean -
fullscreen Whether to display in full-screen boolean true
headerRender render custom header in panel v-slot:headerRender="{value: dayjs, type: string, onChange: f(), onTypeChange: f()}" - 1.5.0
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 by setting a scoped slot, the returned content will be appended to the cell v-slot:monthCellRender="{current: dayjs}" -
monthFullCellRender Customize the display of the month cell by setting a scoped slot, the returned content will override the cell v-slot:monthFullCellRender="{current: dayjs}" -
validRange to set valid range [dayjs, dayjs] -
value(v-model) The current selected date dayjs current date
valueFormat optional, format of binding value. If not specified, the binding value will be a Date object stringdate formats -

events

Events Name Description Arguments Version
change Callback for when value change function(date: dayjs | string -
panelChange Callback for when panel changes function(date: dayjs | string, mode: string) -
select Callback for when a date is selected function(date: dayjs | string -