If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Featured templates

JS Animated. How to work with FullCalendar plugin

This tutorial is going to show you how to work with a FullCalendar plugin included to some JS Animated templates.

JS Animated. How to work with FullCalendar plugin

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar. It uses AJAX to fetch events on-the-fly for each month and is easily configured.

Basic Usage

If your template comes with such a calendar, it means the plugin is already embedded with right JavaScript and CSS files, including the FullCalendar stylesheet, as well as the FullCalendar and jQuery JS files, in the <head> section of your page:

<link rel="stylesheet" href="css/fullcalendar.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/fullcalendar.min.js"></script>

Beside the dependencies, your web page should also have the JavaScript code that initializes the calendar. This code should be executed after the page has initialized with  the help of jQuery’s $(document).ready function enclosed into a <script> tag in the head of your page:

<script type='text/javascript'>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
</script>

where:

  1. The new Date() method creates a new Date with the current date and time
  2. The getDate() method returns the day of the month (from 1 to 31) for the specified date
  3. The getMonth() method returns the month (from 0 to 11) for the specified date, according to local time (January is 0, February is 1, and so on)
  4. The getFullYear() method returns the year (four digits) of the specified date. (e.g.: 2013).

The other part of the code looks like:

		$('#calendar').fullCalendar({
			editable: true,
			weekMode: 'liquid',
			url:'#',

  1. editable  – Determines whether the events on the calendar can be modified
  2. weekMode – Determines the number of weeks displayed in a month view. Also determines each week’s height. Its available options:
    • ‘fixed’– The calendar will always be 6 weeks tall. The height will always be the same, as determined by height, contentHeight, or aspectRatio.
    • ‘liquid’ – The calendar will have either 4, 5, or 6 weeks, depending on the month. The height of the weeks will stretch to fill the available height, as determined by height, contentHeight, or aspectRatio.
    • ‘variable’– The calendar will have either 4, 5, or 6 weeks, depending on the month. Each week will have the same constant height, meaning the calendar’s height will change month-to-month.
  3. url:’#’, – FullCalendar can display events from a public Google Calendar. It can serve as a backend that manages and persistently stores event data (a feature that FullCalendar currently lacks).

For more info on the general display see http://arshaw.com/fullcalendar/docs/display/

Next comes the event source object. An "event source" is anything that provides FullCalendar with data about events. Since version 1.5, Event Objects can have "options" associated with them:

events: [
				{
					title: 'Praent vestibulum',
					start: new Date(y, m, 1, 9, 00),
					end: new Date(y, m, 1, 10, 00),
					allDay: false
				},
				{
					title: 'Vestibulum iaculis lacinia',
					start: new Date(y, m, 2, 16, 00),
					allDay: false
				},
				{
					title: 'Integer rutrum ante eu lacus',
					start: new Date(y, m, 4, 16, 00),
					allDay: false
				},
				{
					title: 'Aliquam erat volpat. Duis ac turpis',
					start: new Date(y, m, 9, 16, 00),
					allDay: false
				},
				{
					title: 'Donec in velit vel ipsum',
					start: new Date(y, m, 10, 16, 00),
					allDay: false
				},
				{
					title: 'Praent vestibulum',
					start: new Date(y, m, 13, 9, 00),
					allDay: false
				},
				{
					title: 'Vestibulum iaculis lacinia',
					start: new Date(y, m, 15, 16, 00),
					allDay: false
				},
				{
					title: 'Integer rutrum ante eu lacus',
					start: new Date(y, m, 17, 16, 00),
					allDay: false
				},
				{
					title: 'nteger rutrum ante eu lacusi',
					start: new Date(y, m, 18, 16, 00),
					allDay: false
				},
				{
					title: 'Integer rutrum ante eu lacus',
					start: new Date(y, m, 19, 16, 00),
					allDay: false
				},
				{
					title: 'Integer rutrum ante eu lacus',
					start: new Date(y, m, 23, 16, 00),
					allDay: false
				},
				{
					title: 'nteger rutrum ante eu lacus',
					start: new Date(y, m, 24, 16, 00),
					allDay: false
				},
				{
					title: 'Integer rutrum ante eu lacus',
					start: new Date(y, m, 27, 16, 00),
					allDay: false
				},
				{
					title: 'Integer rutrum ante eu lacus',
					start: new Date(y, m, 28, 16, 00),
					allDay: false
				},
				{
					title: 'Vestibulum iaculis lacinia',
					start: new Date(y, m, 29, 16, 00),
					allDay: false
				},
				{
					title: 'Praent vestibulum',
					start: new Date(y, m, 30, 9, 00),
					allDay: false
				}
			]
		});
		
	});
    </script>

In order to display new events, you can edit the existing standard JavaScript objects that FullCalendar uses to store information about a calendar event. You can copy  them to add more events. Below is an example of the part in your code that needs to be edited or copied:

				{
					title: 'Praent vestibulum',
					start: new Date(y, m, 1, 9, 00),
					end: new Date(y, m, 1, 10, 00),
					allDay: false
				},
                

Let’s take a closer look at the properties:

  1.  title (String. Required)  – The text on an event’s element. E.g. can be changed to
    ‘A new event’,
  2. start (Date. Required) – The date/time an event begins. For instance, if you are going to add a new event dated 05.23 (current year) that starts at 4.30 p.m., the line should be changed to:
    start: new Date(y, m, 23, 16, 30);
  3. allDay (true or false. Optional) – Whether an event occurs at a specific time-of-day. This property affects whether an event’s time is shown.
    When specifying Event Objects for events or eventSources, omitting this property will make it inherit from allDayDefault, which is normally true.
  4. end (Date. Optional) – The date/time an event ends.
  • If an event is all-day… the end date is inclusive. This means an event with start Nov 10 and end Nov 12 will span 3 days on the calendar.
  • If an event is NOT all-day… the end date is exclusive. This is only a gotcha when your end has time 00:00. It means your event ends on midnight, and it will not span through the next day.

For other events that you can use see http://arshaw.com/fullcalendar/docs/event_data/Event_Object/

The code relies on there being an element with an id of "calendar" in the body of your page. The calendar will be placed inside this div:

This all allows you to see a month-based calendar with some random events on it.

Options

Most of FullCalendar’s documentation describes options that affect the look or behavior of the calendar. Options are usually set when the calendar is initialized, like this:

$('#calendar').fullCalendar({
weekends: false // will hide Saturdays and Sundays
});

Callbacks

Callbacks are sort of like options, but they are functions that get called whenever something special happens. In the following example, an alert box will appear whenever the user clicks on a day:

$('#calendar').fullCalendar({

    dayClick: function() { 

        alert('a day has been clicked!');

    }

});

For more information on the FullCalendar plugin you can visit http://arshaw.com/fullcalendar/. Here you can download the latest releases of the plugin as well as get support from the developers.

Feel free to check the detailed video tutorial below:

JS Animated. How to work with FullCalendar plugin