Internationalization / Locales

[jdriesen]

Hi,

Calendar gives us the possibility to "translate" it's properties (like months, etc). It's called... "Internationalization / Locales" See this example https://fullcalendar.io/js/fullcalendar-3.8.0/demos/locales.html

Can you tell me the best or recommended 'approach' to implement this in your Vue Solution ?

Thanks in advance for your reply.

Kind regards, Johnny

[BrockReece]

Hi Johnny,

Have you seen the Locale docs? You should be able to set the locale key in the calendar's config prop and it should work.

<full-calendar :events="events" :config="config" />
...
<script>
...
  data() {
    return {
      events: [],
      config: {
        locale: 'en',
      },
    }
  },
...
</script>

Hope that helps?

[jdriesen]

Thanks for the info. Yes, I saw the Locale docu ...

My question is more like... Which component is responsible for loading the translation files... (or... what's the optimal scenario...)

To be more precise... My Vue Calendar will only become available in 3 languages... (nl, fr, en)

I know I can send the desired language via the config params... But how can I avoid that full-calender will load ALL the translations... (that's a lot of overhead, cause only 3 languages will be used)

Grtz, Johnny

[BrockReece]

You should handle the locale library loading in the parent component or the main.js This component only loads the base fullcalendar.js so you will just have to handle importing the locale libs...

import 'fullcalendar/dist/locale/nl.js'
import 'fullcalendar/dist/locale/fr.js'
import 'fullcalendar/dist/locale/en.js'

export default {
...

[jdriesen]

Ahhhaaaa... OK... I think I was making it all faaar toooo complicated.

Thanks again @BrockReece ... Super help & support !

Grtz, Johnny

[BrockReece]

No problem, Merry Christmas :)

[jdriesen]

mmm ...

Adding these imports one by one to main.js gives me compile errors... (complaining about the fact that the js files can't be found, though they are REALLY there... triple checked the path...)

Adding import 'fullcalendar/dist/locale-all.js' to main.js does NOT give me compile errors, But it complains about ... 'cannot find property datepicker of undefined'

Still some research to do ...

Grtz, Johnny

[jdriesen]

Almost solved... This does the trick... import { nl } from 'fullcalendar/dist/locale/nl.js' import { fr } from 'fullcalendar/dist/locale/fr.js'

(the language files are exporting objects, that's why ...)

Grtz & Happy X-mas to you too ! Johnny

[jdriesen]

Coming back to this.... I think your component is not listening to a 'config' change... (or at least, the config change is not passed to the calendar)

Try changing the language 'on the fly'... Meaning... create a button outside you vue-calendar, and change the language... You'll notice that the calendar only changes the language after some kind of 'refresh'...

I hope I explanation is clear... of not, please let me know... Certainly willing to help and clarify !

Grtz, Johnny

[BrockReece]

No, you are right, it doesn't listen for changes. However you can use a combination of this component's fireMethod function and fullcalendar's Get/Set utility to update the locale on the fly. (Infact that link uses setting locale as an example)

this.$refs.calendar.fireMethod('option', 'locale', 'fr')

Hope that helps.

[jdriesen]

Thanks for your reply @BrockReece

Going to give it a try as soon as I'm in my office. Will keep you updated.

Grtz, Johnny