Calendar
A date picker component that allows users to select dates and times. It's built on top of Vue Datepicker and provides a consistent look and feel with the rest of the UI components.
Props
The Calendar component accepts all the props listed in the official documentation. Vuil builds on top of this and customizes this with a few defaults:
| Name | Default | Type |
|---|---|---|
autoApply | true | boolean Automatically apply the selected date when clicking on a day |
autoPosition | true | boolean Automatically position the calendar popup |
format | 'dd/MM/yyyy HH:mm' | string Format of the displayed date |
monthNameFormat | 'long' | string Format of the month name in the header |
expand | false | boolean Makes the calendar input expand to full width |
inline | false | boolean Renders the calendar inline instead of as a popup |
dark | Based on theme | boolean Enables dark mode for the calendar |
Slots
| Name | Accepts | Description |
|---|---|---|
trigger | any | Custom trigger element to open the calendar popup when clicked |
Events
All events emitted by the component are described here in the official documentation.