Full Calender – An open source JavaScript event calendar with customization
FullCalendar is a jQuery plugin that provides a full-sized, drag & drop event calendar like the one below. It uses AJAX to fetch events on-the-fly and is easily configured to use your own feed format. It is visually customizable with a rich API.
 
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 <head> 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>
An that’s it, you should see a month-based calendar that has no events on it. If you want to learn how to display events, visit the Google Calendar or Event Data sections.
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 so:
$('#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!');
}
});
Methods
Methods provide ways to manipulate the calendar from JavaScript code. A method operates on the jQuery object of a calendar that has already been initialized, using the familiar fullCalendar command, but in a completely different way:
$('#calendar').fullCalendar('next');
This will call the next method and will force to the calendar to move to the next month/week/day.
//
Latest: fullcalendar-2.2.6.zip
Includes a basic stylesheet, the Google Calendar extension, and the necessary Moment and jQuery files.
Bower Component
You can install FullCalendar through Bower, a package manager for web components. Once you have the bower command line tool installed, you can type:
$ bower install fullcalendar You might need to run bower cache clean first to get the latest versions because of a repo switcheroo.
CDNJS
CDNJS is kind enough to host FullCalendar’s files through a reliable CDN, which you can directly link to from your site. However, the files might not be immediately available after a release, as it takes some time for them to get approved and uploaded, so keep that in mind. Here are the URLs of the latest files:
//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.jsNote the
//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.css
//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.print.css // at the beginning of each URL. This causes the files to be fetched over the same protocol as the current page, whether it is http:// or https://
DEMO:Â http://fullcalendar.io/js/fullcalendar-2.2.6/demos/external-dragging.html
Website:Â http://fullcalendar.io
Thanks for reaeding,
SABIT SOLUTIONS
Reblogged this on NABEEL SHAHID's Blogs and commented:
Updated post