Calendar

A container that displays 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

A basic calendar component with Year/Month switch.

Notice Calendar

This component can be rendered by using dateCellRender and monthCellRender with the data you need.

Event Range

Render event ranges across days with cellRender. The example calculates whether each date is the start, middle, end, or a single-day event and draws compact range bars.

Card

Nested inside a container element for rendering in limited space.

Selectable Calendar

A basic calendar component with Year/Month switch.

Annotated Calendar

Annotate each cell with a second layer of meaning — holidays, ISO weeks, fiscal quarters — with fullCellRender and a custom header.

Show Week

Show week number in fullscreen calendar by setting showWeek prop to true.

Customize Header

Customize Calendar header content.

Custom semantic dom styling

You can customize the semantic dom style of Calendar by passing objects/functions through classNames and styles.

API

Calendar are exported from @ceebee/ui/client.

Calendar

Property	Description	Type	Default	Version
`cellRender`	Customize cell content	`function(current: dayjs, info: { prefixCls: string, originNode: React.ReactElement, today: dayjs, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode`	`-`	5.4.0
`classNames`	Customize class for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>`	`-`	—
`dateFullCellRender`	Customize the display of the date cell, the returned content will override the cell. Please use fullCellRender instead in 5.4.0 and later	`function(date: Dayjs): ReactNode`	`-`	< 5.4.0
`fullCellRender`	Customize cell content	`function(current: dayjs, info: { prefixCls: string, originNode: React.ReactElement, today: dayjs, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode`	`-`	5.4.0
`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`	—
`showWeek`	Whether to display week number	`boolean`	`false`	5.23.0
`styles`	Customize inline style for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>`	`-`	—
`headerRender`	Render custom header in panel	`function(object:{value: Dayjs, type: 'year' \| 'month', onChange: f(), onTypeChange: f()})`	`-`	—
`locale`	The calendar's locale	`object`	`(default)`	—
`mode`	The display mode of the calendar	`month \| year`	`month`	—
`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