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. |
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 value 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.
locale
Attention!
The localization format of the input comes from the format settings of the client's operation system.
By defining the locale prop, you can set the locale of the calendar. If not defined, the default will be the browser's locale.
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.
Browser support
Detected engine:
Chromium
Webkit
Gecko