Using Fullcalendar

I was looking for a calendar to use in an admin portal, to show exceptions on a given day.
So I decided to give FullCalendar (http://fullcalendar.io/) a try, and boy did it work out nice.

It took 4 steps:

  1. Create an HTML element where the calendar should be placed
  2. create the data
  3. create a little script to configure
  4. last, in my case, add a click handler to the day element to drill into the data.

So first, the HTML element:

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

Then step 2: the data.

My data comes from a database, and I select the following data:

{
    "id": "2016-05-02",
    "title": "119 errors",
    "start": "2016-05-02",
    "allDay": true,
    "className": "exceptionPurple"
  },
  {
    "id": "2016-05-03",
    "title": "21 errors",
    "start": "2016-05-03",
    "allDay": true,
    "className": "exceptionRed"
  },

The id is when I want to drill in on the data. I only show how many errors there are on a given day, and (see below) I hook a click event to the calendar to get all errors for a specific day, and I use the id of the event to see which day is selected.

The title holds the number of errors.

The start is the date in which the event is placed. It’s about the number of errors in a day, so it doesn’t have a start- or end time, but I set ‘allDay‘ to true.

The at the end I set the className. This (css) class is applied to the element in the calendar. In my case red means 10-20 exceptions that day, and purple 21-50. I also use other colors for no errors, 1, 2-5, 6-10, 51-100 and 100 or more.

Step 3 and 4, configure it.

This is were normally a lot of time and Googling is spent, but this one is really easy.

$(document).ready(function () {

$('#calendar').fullCalendar({
	events: '/exception/getexceptions',
	eventClick: function(calEvent, jsEvent, view) {
		toonlog(calEvent.id);
	},
	height: 700,
	//the element title contains html which gets escaped. This line sets the html content
	eventRender: function (event, element) {
		element.find('span.fc-title').html(element.find('span.fc-title').text());
	}
	});
});
function toonlog(eventId) {
	$.get('/exception/getexception/?dateinput=' + eventId, function (data) {
		$("#logcontent").html(data);
	});
}

First line in a jQuery load event, call the fullCalendar function on the element we created in step 1.
events property: this is the url of the api where the JSON (in step 2) is returned. The start- and enddate of the period is automatically sent along to this url as querystring parameters.
eventClick: the function that gets called when a user clicks on the event
eventRender: a function to use when there is html in the title (in the JSON)
function toonlog: the function which get called when the user clicks an event. This function goes to the server, gets all exceptiondata and returns it. The function then puts it in an HTML element called #logcontent.

(the toonlog functionality is left outside the scope of this article, but what it does is call to the /exception/getexception method on the server which then returns all the exceptiondata on a given day).

And then, when we add the css for all the colors

.exceptionRed {
	background-color: red;
	cursor: pointer;
}

.exceptionOrange {
	background-color: orange;
	cursor: pointer;
}
.exceptionBlack {
	background-color: black;
	color: white;
	cursor: pointer;
}
//other ones left out

this is the result (the today, next-month and previous-month buttons are automatically added):

fullcalendar

Uncategorized

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