FullCalendar today-button: date instead of text // issue with the lang

Question

I want to show the current date instead of a fixed text in the today-button. This >> irismediainfo3.lili.de is the development-website I am working on. I could not find an option for that in the docs, so I searched in the moment.js-docs and found:

moment().format();

and used it in the FullCalendar like this:

buttonText: {
                next: '>',
                nextYear: '>>',
                prev: '<',
                prevYear: '<<',
                today: moment().format("MMMM YYYY")
            },

The result was good, but only in English. The FullCalendar should be multilingual, so I tried to combined it with

moment.locale(String);

First try:

buttonText: {
                next: '>',
                nextYear: '>>',
                prev: '<',
                prevYear: '<<',
                today: moment().locale('de').format("MMMM YYYY")
                },

But there were no changes. I thought moment.js maybe could access the lang-files of FullCalendar. And here comes my first question:

moment.js is included in FullCalendar. Where do I have to put the lang-files in the FullCalendar directory to make it accessible for the moment.js?

I found a more complex syntax and the next try which did not crash my FullCalendar was:

buttonText: {
                next: '>',
                nextYear: '>>',
                prev: '<',
                prevYear: '<<',
                today: moment().locale('de', {months : "Januar_Februar_M&#228;rz_April_Mai_Juni_Juli_August_September_Oktober_November_Dezember".split("_")}).format("MMMM YYYY")
        },

It did not crash my FullCalendar, but it also did not have any influence.

Actually the 'de' in the code and the long string with the months names is created by the compiler of the CMS I use. It is called SPIP. The URL at the beginning contains a language-variable. If you change that variable to "en", "fr" or "de" (others work as well, but the website will be made for those languages) you can see the FullCalendar changing the language. Only the today-button stays in English. The language-variable from the URL will be given to the FullCalendar code automatically. As long as the rest of the FullCalendar is changing the language the variable from the URL is passed correctly.

I even tried to take the full moment.js code with all languages from the momentjs.com homepage and paste it in the moment.js file in the FullCalendar lib directory. But even then the language did not change.

Is it possible to define the language moment.js is supposed to use inline?

Thanks for your time and help. Nils T.

Answer 1

Well, I found out how to do it.

Step 1: Get the languages. Go to the locale directory of moment.js on github and download the languages you need. I took de.js, en.js & fr.js.

Step 2: Upload them to your server. I made a new folder in the FullCalendar directory on my server and called it "momentjs_locale" and uploaded the files there.

Step 3: Link the languages files. To be safe I linked them in the same place where I link the FullCalendar files right behind the link to moment.js So for me it looks like:

<link href='../fullcalendar.css' rel='stylesheet' />

<link href='../fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src="momentjs_locale/de.js"></script>
<script src="momentjs_locale/en.js"></script>
<script src="momentjs_locale/fr.js"></script>
<script src='../lib/jquery.min.js'></script>
<script src='../fullcalendar.min.js'></script>

Step 4: Use it. Now you can use the languages like it is described in the documentation of moment.js.

<script>

    $(document).ready(function() {

//Here I am setting the global language for moment.js to german (which is "en" by default.)
    moment.locale("de");

        $('#calendar').fullCalendar({

            buttonText: {
                    //Here I make the button show French date instead of a text.
                    today: moment().locale("fr").format("MMMM YYYY") 
            },
            //more options...

        });

    });

</script>

So if someone got a similar question, I hope this could help it. Ciao :)