How do i get full translation on fullCalendar in Vue.js

Question

I have Fullcalendar in my Vue application and set the language to "da" But it doesn't translate everything.

The button "today" in the corner is not translated, but everything else is.

I have tried to import the locale files. Both all and "da".

import daLocale from '@fullcalendar/core/locales/da'
import allLocales from '@fullcalendar/core/locales-all'

I have also tried to put "allLocales" directly on the <fullCalender> tag

    <FullCalendar
       class="demo-app-calendar"
       ref="fullCalendar"
       defaultView="dayGridMonth"
       :plugins="calendarPlugins"
       :events="calendarEvents"
       locale="da"
       :locales="allLocales"
     />

and I have tried setting the CDN's in <head>

<script src='fullcalendar/core/locales-all.js'></script>
<script src='fullcalendar/core/locales/da.js'></script>

I have read everything in the docs, and in the docs about locales, it doesn't show how to do it in Vue.js DOCS

Is there any other setting I should do to get the full translation?

Here's slightly modified official demo, https://codesandbox.io/s/fullcalendar-vue-i9el9 . It shows that `locale="da" :locales="allLocales"` works as expected. In case you tried — Estus Flask, Feb 12 '20 at 15:35
you don't need to import a specific locale **and** all the locales. — ADyson, Feb 12 '20 at 23:45

score 4 · Answer 1 · answered Nov 27 '20 at 19:10

Here is my answer.

import FullCalendar from "@fullcalendar/vue";
import esLocale from "@fullcalendar/core/locales/es";

... ...

data() {
  return {
    calendarOptions: {
      plugins: [dayGridPlugin, interactionPlugin],
      initialView: "dayGridMonth",
      locale: esLocale,
      headerToolbar: {
        left: "title",
        right: "today dayGridWeek dayGridMonth",
      },
    },
  };
}

... ...

<FullCalendar
  ref="fullcalendar"
  :options="calendarOptions"
/>

score 0 · Answer 2 · answered Jun 29 '20 at 02:18

<template>
   <full-calendar :events="events" :config="config" />
</template>
<script>
import 'fullcalendar/dist/locale/da'
  data() {
    return {
      events: [],
      config: {
        locale: 'da'
      }
    }
  }
</script>

https://www.npmjs.com/package/vue-full-calendar#locale

How do i get full translation on fullCalendar in Vue.js

2 Answers2