Essentials
Layout and names
Hide parts, move the title and arrows, and rename days and months.
Bound value
<FunctionalCalendar
v-model="value"
is-date-picker
title-position="left"
arrows-position="right"
:hidden-elements="['leftAndRightDays']"
:day-names="['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
/>
Layout props
| Prop | Values |
|---|---|
titlePosition | left, center (default), right |
arrowsPosition | space-between (default), left, right |
hiddenElements | Any of dayNames, leftAndRightDays, month, presets |
isLayoutExpandable | Drop the reserved rows of short months |
transition | false turns off the slide between months |
sundayStart | Start the week on Sunday |
hiddenElements: ['month'] hides the whole title row, so the month and year pickers go with it.
Names
dayNames starts on Monday, whatever the week start. The calendar rotates the list to match the week start, so list Monday first. monthNames and shortMonthNames start on January. shortMonthNames appear in the month picker.
<FunctionalCalendar
:day-names="['Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa', 'Di']"
:month-names="['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']"
/>
To derive names from the browser instead, use locale. Explicit names win over a locale.
Your own markup
Slots replace the day, arrows, footer and inputs, see slots. The vfc-* class names are stable, so your CSS from 2.x keeps working.