Calendar - Web Component

The Calendar component can be used imported from:

Playground

Parameters

The Web component uses the <z-calendar> tag:

By default, all the parameters are optional or can be set in different, except for the ones marked as required

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

Name	Type	Description	Slot	A11y
model	string	The selected date.
first-weekday	string	The first day of the week.
calendar-type	string	The calendar type.
locale	string	The localization attribute.
wide	boolean	Expands the calendar to the full width of the container

Events

This component has events. Check the documentation about how to use the events.

Name	Payload	Description
change	string	Fires when the selected date changes.
restarted	void	Emitted on value reset

Parameters use

model

By defining the model prop, you can set the initial value of the input.

first-weekday

By defining the first-weekday prop, you can set the first day of the week. Possible values are sunday and monday. If not defined, the default value is monday.

calendar-type

By defining the calendar-type prop, you can set the type of the calendar.

range

we can set a min and max values using range. Take into consideration that that both range values are included.

min

Instead of using range we can use just min. This overrides the range value.

max

Instead of using range we can use just max. This overrides the range value.

locale

Attention!

The localization format of the input should come from the format settings of the client's operation system or browser. Check the localization docs.

By defining the locale prop, you can set the locale of the calendar. If not defined, the default will be the browser's locale.

Flags

disabled

The attribute disabled will block the interaction with the component.

wide

The attribute wide expands the calendar. The width will be controlled by the parent.

today-nav

This flag ables a button in the footer to navigate to the current date (today):

selected-nav

This flag ables a button in the footer to navigate to the currently selected date. This will be disabled if no value is selected:

It can be combined with today-nav:

Special uses

Back to current month

Using the backToCurrentMonth() and backToSelectedMonth() methods of the Calendar we can navigate directly to the target months:

Back to current month Back to selected month

Events indications

If we use the date slots (slot="0000-00-00"), and in the slotted element we use the data-events params, we can then place <i> tags inside that will serve as events indications. The color used will be the background color:

Methods

reset()

We can all the reset() method of the WebComponent in order to reset the value. This will clean the internal states and emit the nullable value with the change event, plus a restarted event:

In this example, the button triggers the method:

Value:  undefined

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

HTML Examples

CodeSandbox example