Essentials

Locale and labels

Derive names and week start from Intl, and translate every UI string.

Pass a BCP 47 tag to locale. The calendar reads day names, month names and the first day of the week from Intl.

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>

What a locale sets

Setting	From the locale	Explicit prop that wins
Day names	Short weekday names	`dayNames`
Month names	Long month names	`monthNames`
Short month names	Short month names	`shortMonthNames`
First day of the week	Week info of the locale	`sundayStart`

Underscore tags such as de_DE work. A malformed tag is ignored and the English defaults stay. dateFormat is not derived from the locale.

Names and dates are always Gregorian, even for locales that default to another calendar, such as fa-IR, ar-SA or th-TH. The month is named with its Gregorian name and the year is the Gregorian year. The aria-label of each day uses the same names.

Week start

The first day of the week comes from Intl.Locale week info. The calendar uses getWeekInfo() where it exists, then the weekInfo property. Where the engine has neither, it falls back to a table of regions that start the week on Sunday, Saturday or Friday, and uses Monday for the rest. A first day of 7 counts as Sunday.

sundayStart overrides all of this. sundayStart: true starts on Sunday, false on Monday.

Week numbers follow the same first day.

Labels

labels covers every string the calendar writes. Pass only the ones you want to change. The rest keep their English text.

<FunctionalCalendar
  v-model="value"
  is-date-range
  can-clear-range
  :presets="true"
  :labels="{
    clearRange: 'Effacer la période',
    quickRanges: 'Périodes rapides',
    presets: { today: 'Aujourd\'hui' },
  }"
/>

Label	Default	Used for
`previousMonth`, `nextMonth`	Previous month, Next month	Arrow buttons
`previousYear`, `nextYear`	Previous year, Next year	Month picker arrows
`previousYears`, `nextYears`	Previous years, Next years	Year picker arrows
`calendar`	Calendar	Name of the modal dialog
`close`	Close	Time picker close button
`clearRange`, `clearRanges`	Clear range, Clear ranges	Clear button
`startDate`, `endDate`	Start date, End date	Range input titles
`date`	Date	Single input title
`addDate`	Add a date	Tags input placeholder and name
`removeDate`	Remove	Remove button of a tag, followed by its date
`hour`, `minute`	Hour, Minute	Time picker titles and lists
`quickRanges`	Quick ranges	Name of the presets group
`range`	Range	Suffix in the label of a day in a numbered range
`rangeStart`, `rangeEnd`	range start, range end	Suffix in the label of the first and last day of a range
`today`	Today	Suffix in the label of today's date
`week`	Week	Name of a week number, followed by the number
`chooseMonth`, `chooseYear`	Choose month, Choose year	Name of the month picker and the year picker
`presets.today`	Today	Preset button
`presets.yesterday`	Yesterday	Preset button
`presets.last7Days`	Last 7 days	Preset button
`presets.last30Days`	Last 30 days	Preset button
`presets.thisMonth`	This month	Preset button
`presets.lastMonth`	Last month	Preset button

labels.presets merges key by key, so you can translate one preset. Labels can come from the global options and configs too. The more specific source wins, and calendars never share labels.