Events
| Event | Payload | When |
|---|---|---|
update:modelValue | The calendar state object | After a selection or a preset, and when the displayed month changes |
opened | none | The calendar becomes visible |
closed | none | The calendar is hidden |
dayClicked | The day object | Any click or Enter on a day, even a disabled one |
choseDay | The day object | A day was selected |
selectedDaysCount | number | A range has both ends. The payload is the difference in days |
dayMouseOver | A date string | The pointer or the keyboard focus moves over a day |
changedMonth | Date | The first visible month changed |
changedYear | Date | The year changed |
<FunctionalCalendar
v-model="value"
is-date-range
@day-clicked="day => console.log('clicked', day.date)"
@chose-day="day => console.log('chose', day.date)"
@selected-days-count="count => console.log(count, 'days')"
@changed-month="date => console.log(date.getMonth() + 1)"
/>
Event names are camelCase in the component. In a template, @day-clicked and @dayClicked both work.
update:modelValue
The payload is the calendar's own state object, the same reference each time. Typed dates, the time picker and the clear button change that object in place without emitting. To react to every change, watch the bound value deeply.
watch(value, next => save(next), { deep: true })
A preset emits it once, with the final state. See the bound value for the keys.
opened and closed
The calendar emits one of them when it mounts, with its initial state. An inline calendar is open, so it emits opened. A modal calendar emits closed. After that they fire when the modal opens or closes.
The day object
dayClicked and choseDay receive this object. With a range and the time picker on, date has the suffix 00:00.
| Key | Type | Description |
|---|---|---|
day | number | Day of the month |
date | string | The date in dateFormat |
hide | boolean | A day of a neighbor month, or a disabled weekday |
isToday | boolean | Today |
isMarked | boolean | Part of the selection or marked |
isDateRangeStart, isDateRangeEnd | boolean | Start or end of markedDateRange |
isMouseToLeft, isMouseToRight, isHovered | boolean | Range preview state |
hideLeftAndRightDays | boolean | A hidden neighbor day |
Not emitted by presets
A preset emits update:modelValue once and no dayClicked or choseDay. See presets.