Full Calendar in BackBone.Js

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop event calendar (Almost similar to Google Calendar) and we are gonna built in BackBone App.

The concept is very simple, Jquery has a pretty cool plugin named FullCalendar. The figure at the top of this post shows how the pieces fit together, and here is the result -

DEMO

To Achieve this, lets first analyze the data requirements. For this post, I am assuming you have slight Idea of how Client Side MVC Framework works. I shall assume you have a JSON array with the following data -

• A string title
• A start date, encoded in ISO8601 format (for example, ‘2011-08-12T09:55:03Z’)
• An end date, encoded in ISO8601 format

data = [
{"start": "2015-06-20 15:00:00", "end": "2015-06-20 16:00:00", "title": "Java"},
{"start": "2015-06-20 15:00:00", "end": "2015-06-20 16:00:00", "title": "Java"},
{"start": "2015-06-20 15:00:00", "end": "2015-06-20 16:00:00", "title": "Java"}
];

We shall use this JSON array to populate the Backbone Collection and then we will use it to populate our view. Lets look at our HTML data. You can name it anything, I have named it as index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Backbone.js App | FullCalendar </title>
        <!-- Full Calendar Stylesheet -->
	<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.min.css" rel="stylesheet" />
        <!-- The main CSS file -->
	<link href="assets/css/style.css" rel="stylesheet" />
    </head>
    
    <body>
    	<div id="main">
            <h1>My Calendar</h1>
            <div id="calendar"></div>
        </div>
	<footer>
            <h2><a href="http://prashantb.me/full-calendar-in-backbone-js/">Full Calendar with BackBone.Js</a></h2>
        </footer>
        
        <!-- JavaScript Includes -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.1/backbone-min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.min.js"></script>
	<script src="assets/js/script.js"></script>
    </body>
</html>

calendar.html on GitHub Gist

Very simple HTML. Nothing to explain on it. The Calendar division is where we will populate the calendar using backbone.js. Please note - I am using Underscore.js for some functions which I may not use here, but its a good practice to have it, since you may require it. Also, FullCalendar has a dependency requirement of moment.min.js. Be sure to include that as well.

The JavaScript

Here is the overall idea of our Backbone code:

• First we will create a service model. It will have properties for the start/end date and time and the title of the event. An object of this class will be created for every service that we offer.
• Then we will create a Backbone collection that will store all the services. This collection will merely work on the type of model and similar to the JSON data provided. Please note - JSON data needs to be consistent with the model.
• After this, we define a view for the services. This view is the main view which is responsible for the data transfer to HTML. Primarily, it iterates through the JSON data and renders the Calendar Script essentials.

Here is the source code. Pardon me for no Comments. I am pretty lazy at it. Comment if anything is inappropriate or not understandable. I’ll respond quickly.

$(function() {
    data = [{
        "start": "2015-06-20 15:00:00",
        "end": "2015-06-20 16:00:00",
        "title": "Java"
    }, {
        "start": "2015-06-20 15:00:00",
        "end": "2015-06-20 16:00:00",
        "title": "Java"
    }, {
        "start": "2015-06-20 15:00:00",
        "end": "2015-06-20 16:00:00",
        "title": "Java"
    }];

    Service = Backbone.Model.extend({
        defaults: {
            title: null,
            start: null,
            end: null
        }
    });
    ServiceCollection = Backbone.Collection.extend({
        model: Service,
    });
    App = Backbone.View.extend({
        initialize: function() {
            this.model = new Service();
        },
        render: function() {
            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,basicDay',
                    ignoreTimezone: false
                },
                selectable: true,
                selectHelper: true,
                editable: true,
                ignoreTimezone: false,
            });
            $('#calendar').fullCalendar("addEventSource", this.collection.toJSON());
        }
    });
    var myCollection = new ServiceCollection(data);
    new App({
        collection: myCollection
    }).render();
});

fullcalendar.js on GitHub Gist

That’s it folks. Please leave your comment and suggestions. I will be writing more such stuff.