locale documentation

[shrpne]

Looks like locale options is not documented. I don't see it in the props list

[rodolfosaraiva]

Same issue, how can i change locale?

[nathanreyes]

Locale can be set up one of two ways.

1. Automatically: Let the plugin detect the user's locale (uses Intl.DateTimeFormat().resolvedOptions().locale)
2. Manually pass in a locale string as an option:

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

Vue.use(VCalendar, {
  locale: 'es' // Spanish
});

Note: If you use the manual approach, that locale will get forced for all users internationally.

As of now, the reason it is not documented is because I see little benefit to forcing all users to use one specific locale.

The only downside to this approach is if you need a locale that is not supported out of the box. See the list for reference. If that is the case, I would need to add support for passing in a custom locale object.

[niksib]

@nathanreyes How can I change locale if I use the calendar from CDN?

[nathanreyes]

Currently, there is no way to force a locale via CDN. However, it still does try and detect the locale automatically. Is there a specific locale you had in mind that needed to be supported?

[niksib]

@nathanreyes I need ukrainian, if you can't add this language, how can i customize calendar?.

[EricMcRay]

@niksib you can do a little hack like below. You can pass any options and reinstall any plugin which not available on global scope.

Vue._installedPlugins.find(function(plugin){
  if(plugin.hasOwnProperty('Calendar')){
     plugin.install(Vue, { locale: 'uk'})
  }
});

[niksib]

@EricMcRay Thanks, but the calendar doesn't support the Ukrainian language.

[niksib]

@EricMcRay when I use your little hack and set weekends(Saturday, Sunday)

{
   highlight: {
      backgroundColor: '#e9ecef',
  },
  contentStyle: {
     color: '#333',
  },
  dates: [
      {
         weekdays: [6, 7],
       },
  ],
}

I have this:

[nathanreyes]

@niksib What version of the plugin are you currently using?

[niksib]

@nathanreyes Sorry it's my fail, I had to put this: weekdays: [1, 7]
1 - Saturday, 7 - Sunday
But I'm still waiting Ukrainian :)

[nathanreyes]

@niksib Yes, I was about to post that :)

[nathanreyes]

To resolve this issue, a bug will get fixed that will support all locales supported by Intl.DateTimeFormat (not just those that aren't cross-checked with the plugin). @niksib This should fix Ukrainian locale detection.

Also, the docs site will more elaborately explain how locales are resolved.

[nathanreyes]

Resolved by 19b8d6f.

[achwilko]

I really appreciate you work on v-calendar but I have a silly question - how can I update locales during application lifetime?

I'm setting locales during installation, like below:

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

Vue.use(VCalendar, {
  locale: 'pl-PL'
});

..and wondering how can I change above locale in component's method etc. Is there any workaround?

[lgomes2m]

I have the same problem as @achwilko
I need to change language on the run.
Is there a solution?

Thanks!

[hisenbergguj]

@lgomes2m having the same trouble, did you find any solution for that?

[lgomes2m]

@hisenbergguj
Yes, I did a workaround.

At template I put a key at v-date-picker:

`<v-date-picker

    mode="single"

    v-model="selectedValue"

    :theme-styles='themeStyles'

    :is-inline="true"

    :available-dates="availableDates"

    :min-date="new Date()"

    :max-date="$moment().add(1, 'M').toDate()"

    v-on:dayclick="daySelected"

    @update:page="monthChange"

    :key="currentLanguage" 
  >
  </v-date-picker>`

And currentLanguage is a computed var:

`computed: {

currentLanguage() {

  setupCalendar({

    locale: this.$store.getters['current_language'] == "br" ? "pt" : "en"

  })

  return this.$store.getters['current_language']

}

}`

When you call setupCalendar() it didn't re render vcalendar but it actually change its locale, I am using currentLanguage as a key because when it changes it forces de component to render again and now it will use the correct language.

@Chemahin gave another solution here but I didn't test it yet.

I hope it helps you.

[hisenbergguj]

@lgomes2m I have tried your solution but it gives me "setupCalendar" is not defined".
I have already import it like this : import VCalendar, {setupCalendar} from 'v-calendar';

do you have any idea, what am I doing wrong here?

[alehandro-dev]

I do not remember exactly. But you have to connect this part in main.js file...Vue.use(VCalendar, { firstDayOfWeek: 1, locale:'nl-NL', datePickerTintColor: "#00c7d6", datePickerShowDayPopover: false, weekdays: 'WW', }); пт, 21 сент. 2018 г. в 8:32, hisenbergguj <notifications@github.com>:

…

@lgomes2m <https://github.com/lgomes2m> I have tried your solution but it gives me "setupCalendar" is not defined". I have already import it like this : import VCalendar, {setupCalendar} from 'v-calendar'; do you have any idea, what am I doing wrong here? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#101 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AVSocAbtF5ExCVLusQ5y4oygaMeeNTF0ks5udHoIgaJpZM4S4dAj> .

[lgomes2m]

@hisenbergguj

Sorry.... I don't know why...
I am importing like this:
import { setupCalendar, Calendar } from 'v-calendar'

And in main.js:

import VCalendar from 'v-calendar'
Vue.use(VCalendar)

[alehandro-dev]

try to do this: пт, 21 сент. 2018 г. в 15:41, lgomes2m <notifications@github.com>:

…

@hisenbergguj <https://github.com/hisenbergguj> Sorry.... I don't know why... I am importing like this: import { setupCalendar, Calendar } from 'v-calendar' And in main.js: ` import VCalendar from 'v-calendar' Vue.use(VCalendar) ` — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#101 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AVSocPvihAW9ib7xDOFMrOHNNrvzelysks5udN5kgaJpZM4S4dAj> .

[alehandro-dev]

try to do this: in main.js import Vue from 'vue';import VCalendar from 'v-calendar';import 'v-calendar/lib/v-calendar.min.css'; Vue.use(VCalendar, { firstDayOfWeek: 1, locale:'nl-NL', datePickerTintColor: "#00c7d6", datePickerShowDayPopover: false, weekdays: 'WW', }); in your component : <v-calendar </v-calendar> пт, 21 сент. 2018 г. в 15:41, lgomes2m <notifications@github.com>:

…

@hisenbergguj <https://github.com/hisenbergguj> Sorry.... I don't know why... I am importing like this: import { setupCalendar, Calendar } from 'v-calendar' And in main.js: ` import VCalendar from 'v-calendar' Vue.use(VCalendar) ` — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#101 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AVSocPvihAW9ib7xDOFMrOHNNrvzelysks5udN5kgaJpZM4S4dAj> .

[nr007]

Hey @nathanreyes, thank you very much for your work on this amazing calendar! I have one request... Could you add support for Slovenian locale (sl-SI)? It has the same date format as Croatian. Thank you!

[nxic]

Locale can be set up one of two ways.

1. Automatically: Let the plugin detect the user's locale (uses Intl.DateTimeFormat().resolvedOptions().locale)
2. Manually pass in a locale string as an option:

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

Vue.use(VCalendar, {
  locale: 'es' // Spanish
});

Note: If you use the manual approach, that locale will get forced for all users internationally.

As of now, the reason it is not documented is because I see little benefit to forcing all users to use one specific locale.

The only downside to this approach is if you need a locale that is not supported out of the box. See the list for reference. If that is the case, I would need to add support for passing in a custom locale object.

I want to set custom locale all my date-pickers across my project but it isn't working. It's kinda only available if I set locale attribute on all my date-pickers one by one. How could I set locale default in Vue.use or something.

    Vue.use(VCalendar, {
      componentPrefix: 'v',
      locale: 'mn-MN',
      locales: {
        'mn-MN': {
          firstDayOfWeek: 2,
          masks: {
            L: "YYYY-MM-DD",
          }
        }
      }
    });

but it won't make any changes

<v-date-picker v-model="filters.from" :input-props="{ placeholder: $t('startDate') }" locale="mn-MN" class="form-control date"/>

if I set my locale on every use I could use my declared locale without problem show as like above.

[titosobabas]

I'm from Mexico, so I needed to display the weekdays in spanish, so I used this code:

<v-calendar
    locale="es"
></v-calendar>

But as this translate to spanish weekday names in lowercase I had to add a css rule (this is up to you) to capitalize the weekday to something like "Lunes" and not "lunes" like this:

<style>
.vc-weekday {
    text-transform: capitalize;
}
</style>

Cheers

[AlmasF]

Hello, can you please add kk-KZ locale nathanreyes

[redhemd]

i second @AlmasF. can you add kk-KZ please