Changing the language of the calendar

fullCalendar provides good support for internationalization. We can change the locale of our calendars and display dates and times according to different international regions. There are 52 language files distributed with fullCalendar in the folder “lang“:

ar.js, ar-ma.js, ar-sa.js, ar-tn.js, bg.js, ca.js, cs.js, da.js,
de-at.js, de.js, el.js, en-au.js, en-ca.js, en-gb.js, en-ie.js,
en-nz.js, es.js, fa.js, fi.js, fr-ca.js, fr-ch.js, fr.js, he.js,
hi.js, hr.js, hu.js, id.js,is.js, it.js, ja.js, ko.js, lt.js, lv.js,
nb.js, nl.js, pl.js, pt-br.js, pt.js, ro.js, ru.js, sk.js, sl.js,
sr-cyrl.js, sr.js, sv.js, th.js, tr.js, uk.js, vi.js, zh-cn.js, zh-tw.js

For this example we will change the locale to Spanish (“es”). The change only needs to happen in the HTML page. What we need to do is to include the language files for fullCalendar in the appropriate order:

<!-- Spanish language file loaded after fullcalendar.js -->
<script src='fullcalendar/lang/es.js'></script>

To display correctly all international characters when changing locales it is important that the page charset be declared UTF-8. That is why we have this meta tag on top of every HTML page:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

The calendar looks like this in Spanish:

fc-locale-1fc-locale-2

This is th e full HTML:

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Using fullCalendar</title>

    <!-- 
        All CSS and JS files needed for fullCalendar. Change you
        files locations accordingly.        
        -->

    <link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
    <script src='fullcalendar/lib/jquery.min.js'></script>
    <script src='fullcalendar/lib/moment.min.js'></script>
    <script src='fullcalendar/fullcalendar.js'></script>

    <!-- fullCalendar spanish language file loaded after fullcalendar.js -->
    <script src='fullcalendar/lang/es.js'></script>

    <!-- Some styles for the calendar and other elements -->
    <style>
        #calendar {
            width: 80%;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        
        .centered {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1 class="centered">Calendar using locale "es-ES" Spanish)</h1>

    <!-- The calendar container -->
    <div id="calendar"></div>

    <!-- Calendar creation script -->
    <script src="fc-locale.js"></script>

</body>

</html>