How to add FullCalendar to your Meteor project

This guide will help you integrate FullCalendar into your meteor project. FullCalendar is a open source JavaScript jQuery plugin for a full-sized calendar.

Getting Started:

First we want to setup our meteor project so that we can display our calendar. We need to start by adding the FullCalendar package this can be done by typing meteor add fullcalendar:fullcalendar into your terminal or by adding fullcalendar:fullcalendar to your packages list.

Creating the Calendar:

We are going to start by making a html file and create a template where the the calendar will be rendered. This will allow us to assign our calendar that we make to this div. I will be using iron:router to create a new route for the calendar.

<template name="calendar">
<div>
<div id="calendarDiv"></div>
</div>
</template>

Next we will need to create our js file that initializes the FullCalendar. Since we are using templates to display our calendar we will use the onRendered() call to create the calendar. This could also be done through $(document).ready(function() but we will use onRendered() like so:

Template.calendar.onRendered(() => {
$('#calendarDiv').fullCalendar();
});

We are initializing the calendar on the template calendar we created before. For the FullCalendar call we put the id of the div where we want the calendar to be displayed.

After creating the template and initializing the calendar to be displayed in it, it should look like the image bellow.

Default Calendar View

This is the default FullCalendar with no changes made to the calendar options. Next we can look at how we can change some of the setting to make the calendar more useful for us.

Changing the Appearance and Functionality of the Calendar:

We will change the header and add some events. All the documentation for FullCalendar can be found here.

Let’s start by creating a couple variables to hold the current day, month and year.

var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

Next we can change the header of the calendar so that on the left we can change the calendar view, in the middle it will show the current month, and on the left we will be able to move up or down the current month.

header: {
left: 'basicDay, basicWeek, month',
center: 'title',
right: 'today prev,next'
}

We can also change some other basic settings like whether the events are editable or if the calendar should display weekends. There are many more options to change and you can find the full list of options here.

editable: true,
weekends: false

Next we want to add some events so that we can see our calendar in action.

events: [{
id: 1,
title: 'Birthday',
start: new Date(y, m, 1),
allDay: true,
description: 'Happy Birthday',
}, {
id: 2,
title: 'Concert',
start: '2016-12-07T21:00:00',
end :'2016-12-07T23:00:00',
allDay: false,
color: '#e74c3c'
}, {
id: 3,
title: 'Lunch',
start: new Date(y, m, 16, 14),
end: new Date(y, m, 16, 16),
allDay: false,
color: '#3498db'
}, {
id: 4,
title: 'Class',
start: new Date(y, m, 20, 10),
allDay: false,
color: '#9b59b6'
}, {
id: 5,
title: 'Party',
start: new Date(y, m, 5, 18),
allDay: false,
color: '#e67e22'
}]

Here I created five events that each show some different ways to do things. When it comes to start and end times I showed one way in which the date is static start: '2016-12-07T20:00:00' this is a set date and time that doesn’t change. The other way to do it is with the new Date() function this allows the date to be dynamic and change with the current month and year, start: new Date (y, m, 20, 10) this uses the variables that we created earlier to get the current year and month of when it is being accessed.

Your final code should like like this when completed:

Template.calendar.onRendered(() => {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendarDiv').fullCalendar({
header: {
left: 'basicDay, basicWeek, month',
center: 'title',
right: 'today prev,next'
},
editable: true,
weekends: false,
events: [{
id: 1,
title: 'Birthday',
start: new Date(y, m, 1),
allDay: true,
description: 'Happy Birthday',
}, {
id: 2,
title: 'Concert',
start: '2016-12-07T21:00:00',
end :'2016-12-07T23:00:00',
allDay: false,
color: '#e74c3c'
}, {
id: 3,
title: 'Lunch',
start: new Date(y, m, 16, 14),
end: new Date(y, m, 16, 16),
allDay: false,
color: '#3498db'
}, {
id: 4,
title: 'Class',
start: new Date(y, m, 20, 10),
allDay: false,
color: '#9b59b6'
}, {
id: 5,
title: 'Party',
start: new Date(y, m, 5, 18),
allDay: false,
color: '#e67e22'
}]
});
});

Clicking and Hovering:

Now we can add some simple code to test clicking and hovering functions. For testing purpose we will use the basic alert function but if you would like to see how to integrate SweetAlerts 2 with FullCalendar go here.

Let’s start by creating the functions for when a date is clicked. This can be used to create a new event if a day is clicked. In this function we will display the date that is clicked on.

dayClick: function(date) {
alert("Clicked on " + date.format());
}

Next let’s make the function for when an event is clicked. This can be used to edit the event that is clicked. The function will display the title, description, and time of the event that is clicked. We will need to format the time so that it is readable. Formatting time is done through moments and the package momentjs:moment and will needed to be added to the project.

eventClick: function(event) {
alert("Event title: " + event.title + "\nEvent description: " + event.description + "\nEvent time: " + moment(event.start).format("hh:mm A"));
}

Lastly we will create a function for when you hover over an event. This can be used to display preview information about an event. The function we are making will change the color of the event that is being hovered over.

eventMouseover: function(calEvent) {
$(this).css('background-color', 'black');
}

When you are done your code should look like this:

Template.calendar.onRendered(() => {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendarDiv').fullCalendar({
header: {
left: 'basicDay, basicWeek, month',
center: 'title',
right: 'today prev,next'
},
editable: true,
weekends: false,
events: [{
id: 1,
title: 'Birthday',
start: new Date(y, m, 1),
allDay: true,
description: 'Happy Birthday',
}, {
id: 2,
title: 'Concert',
start: '2016-12-07T21:00:00',
end :'2016-12-07T23:00:00',
allDay: false,
color: '#e74c3c'
}, {
id: 3,
title: 'Lunch',
start: new Date(y, m, 16, 14),
end: new Date(y, m, 16, 16),
allDay: false,
color: '#3498db'
}, {
id: 4,
title: 'Class',
start: new Date(y, m, 20, 10),
allDay: false,
color: '#9b59b6'
}, {
id: 5,
title: 'Party',
start: new Date(y, m, 5, 18),
allDay: false,
color: '#e67e22'
}],
dayClick: function(date) {
alert("Clicked on " + date.format());
},
eventClick: function(event) {
alert("Event title: " + event.title + "\nEvent description: " + event.description + "\nEvent time: " + moment(event.start).format("hh:mm A"));
},
eventMouseover: function(calEvent) {
$(this).css('background-color', 'black');
}
});
});

For all the previous functions you can add what you need in order to make it useful for you. I show how to use SweetAlerts 2 to create new events and make changes to existing events here.

Conclusion:

This is how you would setup FullCalendar in your meteor project. This is only the start, you can go further and customize the calendar to your needs.

Credits:

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.