FullCalendar - Full-sized drag & drop event calendar

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided forGoogle Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).

Source: arshaw.com

1. INCLUDE CSS AND JS FILES

<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>

2. HTML

<div id='calendar'></div>

3. JAVASCRIPT

$(document).ready(function() {
	$('#calendar').fullCalendar({
		defaultDate: '2014-06-12',
		editable: true,
		events: [
			{
				title: 'All Day Event',
				start: '2014-06-01'
			},
			{
				title: 'Long Event',
				start: '2014-06-07',
				end: '2014-06-10'
			},
			{
				id: 999,
				title: 'Repeating Event',
				start: '2014-06-09T16:00:00'
			},
			{
				id: 999,
				title: 'Repeating Event',
				start: '2014-06-16T16:00:00'
			},
			{
				title: 'Meeting',
				start: '2014-06-12T10:30:00',
				end: '2014-06-12T12:30:00'
			},
			{
				title: 'Lunch',
				start: '2014-06-12T12:00:00'
			},
			{
				title: 'Birthday Party',
				start: '2014-06-13T07:00:00'
			},
			{
				title: 'Click for Google',
				url: 'http://google.com/',
				start: '2014-06-28'
			}
		]
	});
});

More infomation at: http://arshaw.com/fullcalendar/docs/