Calendar

import { Calendar } from '@enmovil/ui-design-system';

A full calendar view for browsing and selecting dates by month or year. It can show week numbers and custom content in date cells, and can be displayed inline instead of full size.

Properties

Property	Type	Required	Default	Allowed values	Description
className	string	No	—	—	Meant to add a CSS class to the calendar's wrapper, but it is joined to the built-in class without a space, so the wrapper gets one invalid class instead (for example enmv-calendarmy-class) and loses its styles.
value	Dayjs	No	—	—	The selected date, as a dayjs object. Without it the calendar starts on today and keeps the selection itself.
fullscreen	boolean	No	—	—	Shows the full-size calendar; false shows a compact, card-sized one. Defaults to true.
showWeek	boolean	No	—	—	Adds a column of week numbers.
status	string	No	—	'year', 'month'	Not a prop of the component: it appears only as a story control and has no effect. The month or year view is set with mode.

Other attributes

Calendar passes 14 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.

Events

Name	Signature	When it fires
dateCellRender	((date: Dayjs) => ReactNode)	Called with each date in the month view; what it returns is shown in that date's cell, below the date. Deprecated by the underlying calendar in favour of cellRender.
onChange	((date: Dayjs) => void)	Fires when the selected date changes.
onPanelChange	((date: Dayjs, mode: CalendarMode) => void)	Fires when the visible month/year or the month/year mode changes. Useful to fetch that period's events.
onSelect	((date: Dayjs, selectInfo: SelectInfo) => void)	Fires when a date is clicked, or the month/year changes from the header. selectInfo.source tells which.

Children

Calendar does not accept children.

Variants

Loading examples…

Playground

Change the controls to see how the properties affect the component. Values the controls don't cover come from the Default example.

Loading playground…

Storybook

Open Calendar in Storybook to try every story with the full set of controls.