Full Calendar : A JavaScript event calendar

Shares

FullCalendar is a drag-n-drop jQuery plugin for displaying events on a full-sized calendar.

Basic Usage

The first step in embedding a calendar on a web page is to have the right JavaScript and CSS files. Make sure you are including the FullCalendar stylesheet, as well as the FullCalendar, jQuery, and Moment JavaScript files, in the of your page:

<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='lib/jquery.min.js'></script>
<script src='lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>

jQuery and Moment must be loaded before FullCalendar’s JavaScript.

If you plan on doing dragging or resizing, you might need some additional dependencies. More information.

Once you have your dependencies, you need to write the JavaScript code that initializes the calendar. This code must be executed after the page has initialized. The best way to do this is with jQuery’s $(document).ready like so:

$(document).ready(function() {
 
    // page is now ready, initialize the calendar...
 
    $('#calendar').fullCalendar({
        // put your options and callbacks here
    })
 
});

The above code should be in a script tag in the head of your page. 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:

<div id='calendar'></div>
Subscribe to the JqueryPlugins.net mailing list:
* indicates required

Reply

Pin It on Pinterest