Locales ​

A locale includes multiple settings that are typically assigned on a per region basis. This currently includes the following:

There are multiple ways which you can configure the locale for a specific calendar. Locales may be configured globally via the defaults object as well as on a per-calendar basis with the locale prop.

Default Locale ​

<VCalendar />

With no locale specified, the locale detected by the Internationalization API is used.

Default w/ Props ​

<VCalendar :first-day-of-week="2" :masks="{ title: 'MMM YYYY' }" />

Uses the detected locale with customized firstDayOfWeek or masks that will override the built-in locale settings. When using a customized masks prop, the default masks will supply any masks that are missing, so you are free to provide single overrides.

String Locale ​

<VCalendar locale="es" />

With a string locale, the locale with the matching identifier is used. The Internationalization API is used to generate the dayNames, dayNamesShort, dayNamesShorter, dayNamesNarrow, monthNames and monthNamesShort properties. Because the API does not provide common values for the firstDayOfWeek or masks these are loaded from the plugin defaults (unless specifically provided via props).

Object Locale ​

<VCalendar :locale="{ id: 'da', firstDayOfWeek: 2, masks: { weekdays: 'WW' } }" />

With an object locale, you can simply provide all the settings you need together in a single object. Note that firstDayOfWeek and masks props will override this object.

Custom Defaults ​

More conveniently, you may override or provide missing locale information via the locales property of the defaults object when using VCalendar. This should be an object with the locale identifier as the key and an object with the locale settings.

import Vue from 'vue'
import VCalendar from 'v-calendar'

Vue.use(VCalendar, {
  locales: {
    'pt-PT': {
      firstDayOfWeek: 1,
      masks: {
        L: 'YYYY-MM-DD',
        // ...optional `title`, `weekdays`, `navMonths`, etc
      }
    }
  }
});

Then, all you need to do is reference your locale when using the calendar component.

<VCalendar locale="pt-PT" />