CODEWITHSUNDEEP
vue.jsfullcalendarlocalefullcalendar-4
Caroline Olivia
Caroline Olivia

Reputation: 356

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

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?

Upvotes: 2

Views: 3980

Answers (3)

Pedro Henrique
Pedro Henrique

Reputation: 1

in my case and I did so, I imported the language I wanted to

import ptBrLocale from @fullcalendar/core/locales/pt-br;

   <FullCalendar :options="options" />
    const options = reactive({
  plugins: [dayGridPlugin, listPlugin, interactionPlugin, timeGridPlugin],
  initialView: "dayGridMonth",
  headerToolbar: {
    left: "prev,next today",
    center: "title",
    right: "dayGridMonth,timeGridWeek,timeGridDay",
  },
  locale: "pt-br",
  locales: [ptBrLocale],
  editable: true,
  selectable: true,
  selectMirror: true,
  select: (value: any) => {
    id.value = id.value + 1;
    const calendar = value.view.calendar;
    calendar.unselect();
    calendar.addEvent({
      id: id.value,
      title: "new event " + id.value,
      start: value.start,
      end: value.end,
      allDay: true,
    });
  },

something like this, you can do the same

Upvotes: 0

optiman
optiman

Reputation: 93

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"
/>

Upvotes: 4

David
David

Reputation: 326

<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

Upvotes: 0

Related Questions