Calendar - Web Component ​

The Calendar component can be used imported from:

Playground ​

Parameters ​

...

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.

Attention!

If you hardcode this value, it will not be reactive and the selection won't change. Use a variable instead and, ideally, a closed loop.

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 ​