You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

2.1 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 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 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
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 default date
disabledDate Function that specifies the dates that cannot be selected (currentDate: moment) => boolean -
fullscreen Whether to display in full-screen boolean true
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 -
value The current selected date moment current date
onPanelChange Callback for when panel changes function(date: moment, mode: string) -
onSelect Callback for when a date is selected function(date: moment) -