fullcalendar resource view
HTML
<link rel="stylesheet" href="http://tux.fi/~jarnok/fullcalendar-resourceviews/js/fullcalendar/fullcalendar.css">
<script src="https://fullcalendar.io/js/fullcalendar-3.0.1/fullcalendar.min.js"></script>
<script src="https://fullcalendar.io/js/fullcalendar-3.0.1/lib/jquery.min.js"></script>
<script src="https://fullcalendar.io/js/fullcalendar-3.0.1/lib/moment.min.js"></script>
<link rel="stylesheet" href="https://fullcalendar.io/js/fullcalendar-3.0.1/fullcalendar.print.css">
<link rel="stylesheet" href="https://fullcalendar.io/js/fullcalendar-3.0.1/fullcalendar.css">
<div id='calendar' style='margin:3em 0;font-size:13px'></div>
JavaScript
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'resourceDay,resourceWeek,resourceNextWeeks,resourceMonth'
},
defaultView: 'resourceMonth',
firstDay: 1,
editable: true,
selectable: true,
minTime: 8,
maxTime:16,
selectHelper: true,
resources: [
{
name: 'Resource 1',
id: 'resource1'
},
{
name: 'Resource 2',
id: 'resource2'
},
{
name: 'Resource 3',
id: 'resource3'
},
{
name: 'Resource 4',
id: 'resource4'
}
],
events: [
{
title: 'Lunch 12.15-14.45',
start: new Date(y, m, d, 12, 15),
end: new Date(y, m, d, 14, 45),
allDay: false,
resource: 'resource1'
},
{
title: 'All Day Event',
start: new Date(y, m, 1),
resource: 'resource2'
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d-3, 16, 0),
allDay: false,
resource: 'resource2'
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d+4, 16, 0),
allDay: false,
...