Skip to content
On this page

Locales

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

SettingDescription
firstDayOfWeekThe day the specified the first day of the week. This is a number from 1 to 7 (Sunday to Saturday, respectfully).
masksSet of masks to use for common sections of the calendar including the title, weekday labels, month labels in the navigation pane and more.
dayNamesFull length identifiers for the days of the week.
dayNamesShort3-character identifiers for the days of the week.
dayNamesShorter2-character identifiers for the days of the week.
dayNamesNarrow1-character identifiers for the days of the week.
monthNamesFull length identifiers for the months of the year.
monthNamesShortAbbreviated identifiers for the months of the year.

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.

Tip

The well supported Internationalization API is used to derive month and weekday names and formatting. This helps keep the package size down, as well as supporting multiple locales in the most performant and isomorphic way.

Default Locale

html
<VCalendar />

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

Default w/ Props

html
<VCalendar :first-day-of-week="2" :masks="{ title: 'MMM YYYY' }" />
M
T
W
T
F
S
S
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5

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

html
<VCalendar locale="es" />
L
M
X
J
V
S
D
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5

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

html
<VCalendar :locale="{ id: 'da', firstDayOfWeek: 2, masks: { weekdays: 'WW' } }" />
ma
ti
on
to
fr
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5

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.

js
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.

html
<VCalendar locale="pt-PT" />
S
T
Q
Q
S
S
D
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5

Released under the MIT License.