CODEWITHSUNDEEP
javascriptfullcalendar
TsvetiZlateva
TsvetiZlateva

Reputation: 380

FullCalendar v5.10.1 using custom month and day names in locales

I'm using FullCalendar v5.10.1 and in the locales file that I'm using the months are translated by default, but they are not with capital letters (I'm using the bg.js locales file):

  'use strict';

  var bg = {
    code: 'bg',
    week: {
      dow: 1, // Monday is the first day of the week.
      doy: 7, // The week that contains Jan 1st is the first week of the year.
    },
    buttonText: {
      prev: 'Назад',
      next: 'Напред',
      today: 'Днес',
      month: 'Месец',
      week: 'Седмица',
      day: 'Ден',
      list: 'График',
    },
    allDayText: 'Цял ден',
    moreLinkText: function(n) {
      return '+още ' + n
    },
    noEventsText: 'Няма събития за показване',
  };

  return bg;

}());

Can I use some kind of an array for monthNames or for an example (what is the integrated property for months?):

monthNames: {
   1: 'Януари', //for January
   2: 'Февруари', //for February
   ...
}

or is there any other workaround for a custom months translation?

Upvotes: 0

Views: 1167

Answers (1)

TsvetiZlateva
TsvetiZlateva

Reputation: 380

So, thanks to @ADyson I got to the solution. I needed to change locales definitions at moment.js locales files:

var bg = moment.defineLocale('bg', { months: 'Януари_Февруари_Март_Април_Май_Юни_Юли_Август_Септември_Октомври_Ноември_Декември'.split( '_' )

then I included all needed scripts with custom translations:

<script src="~/plugins/moment/moment.min.js"></script> 
<script src="~/plugins/moment/moment-with-locales.min.js"></script> 
<script src="~/plugins/moment/locales.js"></script> 
<script src="~/plugins/moment/locale/bg.js" charset="UTF-8"></script>

At last I added the moment plugin as is written in the docs: https://fullcalendar.io/docs/moment-plugin. I've added:

<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.global.min.js'></script>

(but I downloaded it locally) and then formated the date:

var calendar = new FullCalendar.Calendar(calendarEl, { titleFormat: 'D MMMM YYYY' })

and it worked - now I have months with the desired translation :)

Upvotes: 2

Related Questions