Date/time formats accepted by fullCalendar events

To render fullCalendar events the date format is very important. Since version 2.0 `fullCalendar` depends on the awesome MomentJS library.  The dates a `moment` object understands by default are in the ISO 8601 format. If they are not, MomentJS falls back to a regular JavaScript Date object, but it  issues a warning that the fall back could be removed in the future.

So, it is always recommended to use the ISO 8601 format in the  event objects we feed `fullCalendar`.  For dates use “YYYY-MM-DD” and for combined date and time use one of these: “YYYY-MM-DD hh:mm:ss” or “YYYY-MM-DDThh:mm:ss“, where a space or the letter “T” separates the time from the date. The time uses the 24-hour clock format.

One of the common mistakes when formatting dates for `fullCalendar` is forgetting to zero-pad the numbers, in the date or time.  This is a valid date: “2016-01-04 08:30:00“, but not this one “2016-1-4 8:30:00” because some numbers are not zero-padded.  Some times finding this bug is like searching for a sneaky semicolon in JavaScript code.

When the events are generated by a server side application you must take care of correctly formatting the `start` and `end` dates and times.  For example, in Python we will always use this formatting strings: “%Y-%m-%d” for dates and “%Y%m-%d %H:%M:%S” for date and time.

I should mention that MomentJS is very capable of parsing almost any reasonable date/time string, but I think we should take responsibility for returning what it expects by default. Of course, this will not always be possible, specially if we do not have control of the application generating the events.

 

Advertisements

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>

 

Switching fullCalendar views

This is the javascript to add buttons for the month, week and daily views:

JavaScript (fc-more-views.js)

$(document).ready(function() {
    var $calendar = $("#calendar").fullCalendar(
            {  // Start of options
                header: {
                    left:   'title',
                    center: '',
                    right:  'today,month,agendaDay,agendaWeek prev,next'
                }  // End of options
            }
        );
    }
);

HTML (fc-more-views.html)

<html>
    <head>
        <title>Using fullCalendar</title>
        	<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>
        

<style>
        #calendar {
            width: 80%;
            display: block;
            margin-left: auto;
            margin-right: auto;
            }
            
        .centered {
            text-align: center;
        }
        
        </style>

    </head>

<body>


<h1 class="centered">Different views of fullCalendar</h1>





<div id="calendar"></div>



<script src="fc-more-views.js"></script>

</body>
</html>

These are the available views now:

fullCalendar basic display

This sample has just enough code to have a working fullCalendar instance.

JavaScript (fcbasic.js)


$(document).ready(function() {
    var $calendar = $(&amp;amp;amp;quot;#calendar&amp;amp;amp;quot;).fullCalendar();
};

HTML page (fcbasic.html)

<html>
    <head>
        <title>Using fullCalendar</title>
        <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>
        
        <style>
        #calendar {
            width: 80%;
            display: block;
            margin-left: auto;
            margin-right: auto;
            }
            
        .centered {
            text-align: center;
        }
        
        </style>
    </head>

<body>
<h1 class="centered">A basic instance of fullCalendar</h1>

<div id="calendar"></div>

<script src="fcbasic.js"></script>

</body>
</html>

This gives us a month view calendar with simple navigation and plain appearance:

fcbasic