Slots
<FunctionalCalendar v-model="value" is-date-picker always-use-default-classes>
<template #default="{ day }">
<strong v-if="isWeekend(day)" style="pointer-events: none">{{ day.day }}</strong>
<template v-else>{{ day.day }}</template>
</template>
<template #navigationArrowLeft>←</template>
<template #navigationArrowRight>→</template>
<template #footer><small>Weekends are bold.</small></template>
</FunctionalCalendar>
| Slot | Props | Replaces |
|---|---|---|
default | { week, day } | The content of a day cell |
navigationArrowLeft | none | The previous month arrow |
navigationArrowRight | none | The next month arrow |
cleaner | none | The clear button of a range |
footer | none | Adds content below the calendar |
dateRangeInputs | { startDate, endDate, isTypeable, dialogId } | The two inputs of a modal range |
datePickerInput | { selectedDate, isTypeable, dialogId } | The input of a modal date picker |
The day slot
day is the day object. week has number, start, end and days.
A day slot removes the default vfc-span-day class from the cell. Pass alwaysUseDefaultClasses to keep it, along with its selection and range styling. Without it, you style the cell yourself.
The cell selects only when the click lands on the cell itself, as in 2.x. Set pointer-events: none on the elements inside your slot so clicks reach the cell.
Arrows
An arrow slot that contains a button or a link keeps its own focus. Any other content is wrapped with role="button" and tabindex="0", and responds to Enter and Space. The label comes from labels.previousMonth and labels.nextMonth.
Cleaner and footer
The footer row renders when canClearRange is on or you set the footer slot. The cleaner slot replaces the default clear button inside that row, and clicking inside it clears the range. The default clear button needs isDateRange as well.
Inputs
The input slots only render in modal mode. Keep :readonly="!isTypeable" on your inputs so they follow the isTypeable prop. See the examples.