Calendar

UX/UI Guidelines

Check the design documentation of the component in ZeroHeight.

Implementations

The component Calendar is available in the following technologies:

Web Components

Parameters

Parameters

Make sure you have read about the parameters in here.

The parametrization of the component can be done with the following custom params or properties:

Name	Type	Slot	Description
model	string		The selected date.
first-weekday	string		The first day of the week.
calendar-type	string		The calendar type.
locale	string
wide	boolean		Expands the calendar to the full width of the container
custom	object		A record of key-value pairs to set the CSS custom tokens. It's a complex attribute set as an JS object in stringified JSON format. Example: <z-calendar custom='{"fill":"#06e7a3"}' /> Check the available values in the customization section.
custom-str	string		The stringified version of the custom property. It follows the pattern key:value;key:value;, with the possibility of setting multiple values and spaces between the punctuation characters. Example: <z-calendar custom-str="fill:#06e7a3" />
z-theme	string		Sets the theme of the component. The possible values are light and dark. <z-calendar z-theme="dark" />

From Figma to code

...

Customization

INFO

Check everything about the customization mechanics in the "How it works" documentation.

CSS Variable	Type	Description
--z-calendar--header-bg	color	The background color of the header.
--z-calendar--header-color	color	The text color of the header.
--z-calendar--bg	color	The background color of the calendar.
--z-calendar--color	color	The text color of the calendar.
--z-calendar--radius	distance	The border radius of the calendar.
--z-calendar--shadow	shadow	The shadow of the calendar.

The calendar component it's highly customizable. You can use the --z-calendar--header--bg, --z-calendar--header--color, --z-calendar--bg, --z-calendar--color and --z-calendar--radius to customize the background and color of the header, the background and color of the calendar, and the radius of the calendar.

Or more complex assignations:

Accessibility

...

Related components