Examples
Locale and labels
Names, week start and every UI string, from the browser's Intl data.
Switch the locale
The locale prop derives day names, month names and the first day of the week from Intl. Names are always Gregorian, also for locales such as fa-IR or ar-SA. The calendar reads locale once, so the demo re-keys the calendar when you pick a locale.
Bound value
<script setup>
const locale = ref('de-DE')
</script>
<template>
<FunctionalCalendar
:key="locale"
v-model="value"
:locale="locale"
is-date-picker
show-week-numbers
/>
</template>
Translate the interface
labels covers every UI string. A partial object merges over the English defaults, including labels.presets.
Bound value
<FunctionalCalendar
v-model="value"
is-date-range
can-clear-range
locale="fr-FR"
:presets="['today', 'last7Days']"
:labels="{
previousMonth: 'Mois précédent',
nextMonth: 'Mois suivant',
clearRange: 'Effacer la période',
quickRanges: 'Périodes rapides',
presets: { today: 'Aujourd\'hui', last7Days: '7 derniers jours' },
}"
/>
Override the week start
sundayStart beats the locale. Use it to force Sunday or Monday.
Bound value
<FunctionalCalendar v-model="value" is-date-picker locale="de-DE" sundayStart />