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>

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s