Creating a fullCalendar event interactively

The following sample code will allow us to ask for a title for an event, create the event and then store it in the `fullCalendar` internal array of events.  By setting the stick property to true you can navigate away from the day of the event to other month, week or year and it will be kept in memory, unless you refresh the page:

 

// Create calendar when document is ready
$(document).ready(function() {

 // We will refer to $calendar in future code
 var $calendar = $("#calendar").fullCalendar({
   // Start of calendar options
   header: {
    left: 'title',
    right: 'today,month,agendaDay,agendaWeek prev,next'
   },

   // Make possible to respond to clicks and selections
   selectable: true,

   // This is the callback that will be triggered when a selection is made.
   // It gets start and end date/time as part of its arguments
   select: function(start, end, jsEvent, view) {

     // Ask for a title. If empty it will default to "New event"
     var title = prompt("Enter a title for this event", "New event");

     // If did not pressed Cancel button
     if (title != null) {
      // Create event
      var event = {
       title: title.trim() != "" ? title : "New event",
       start: start,
       end: end
      };

      // Push event into fullCalendar's array of events
      // and displays it. The last argument is the
      // "stick" value. If set to true the event
      // will "stick" even after you move to other
      // year, month, day or week.

      $calendar.fullCalendar("renderEvent", event, true);
     };
     // Whatever happens, unselect selection
     $calendar.fullCalendar("unselect");

    }, // End select callback

    // Make events editable, globally
    editable : true,

    // Callback triggered when we click on an event

    eventClick: function(event, jsEvent, view){
     // Ask for a title. If empty it will default to "New event"
     var newTitle = prompt("Enter a new title for this event", event.title);

     // If did not pressed Cancel button
     if (newTitle != null) {
          // Update event
          event.title = newTitle.trim() != "" ? newTitle : event.title;

          // Call the "updateEvent" method
          $calendar.fullCalendar("updateEvent", event);

        }
    } // End callback eventClick
  } // End of calendar options
 );
});

And here the screenshots:

Advertisements

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.

 

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