full-calendar basic example
HTML
<script src="http://fullcalendar.io/js/fullcalendar-3.4.0/lib/moment.min.js"></script>
<link rel="stylesheet" href="http://fullcalendar.io/js/fullcalendar-3.4.0/fullcalendar.css">
<script src="http://fullcalendar.io/js/fullcalendar-3.4.0/fullcalendar.min.js"></script>
<div id='calendar'></div>
JavaScript
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2014-06-12',
defaultView: 'month',
editable: true,
eventOrder : 'state',
events: [
{
title: '2Meeting',
start: '2014-06-12T10:30:00',
end: '2014-06-12T12:30:00',
state: 'California',
},
{
title: '1Meeting',
start: '2014-06-12T10:30:00',
end: '2014-06-12T12:20:00',
state: 'California',
},
{
title: '4Meeting',
start: '2014-06-12T10:30:00',
end: '2014-06-12T12:30:00',
state: 'Awanda',
},
{
title: '3Meeting',
start: '2014-06-12T10:30:00',
end: '2014-06-12T12:30:00',
state: 'Atlanta',
}
]
});
});