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:

NameTypeDescriptionSlotA11y
modelstringThe selected date.
first-weekdaystringThe first day of the week.
calendar-typestringThe calendar type.
localestringThe localization attribute.
widebooleanExpands the calendar to the full width of the container

Events ​

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

NamePayloadDescription
changestringFires when the selected date changes.
restartedvoidEmitted 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.

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:

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples ​

CodeSandbox example ​