<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//rawgit.com/seankenny/fullcalendar/v2/dist/fullcalendar.css" />
<style type="text/css">
body {
margin: 5px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
background-color: #ffffff;
}
.red {
background-color: rgb(255, 190, 190);
}
</style>
</head>
<body>
<p>
This is a 2.0.2 fork of the <a href="http://arshaw.com/fullcalendar/">http://arshaw.com/fullcalendar/</a> project. This fork is available at
<a href="https://github.com/seankenny/fullcalendar/tree/v2">https://github.com/seankenny/fullcalendar/tree/v2</a>.
</p>
<p>
You can download the css & js from <a href="https://github.com/seankenny/fullcalendar/tree/v2/dist">https://github.com/seankenny/fullcalendar/tree/v2/dist</a>
</p>
<p>I'd appreciate any issues being logged to <a href="https://github.com/seankenny/fullcalendar/issues">https://github.com/seankenny/fullcalendar/issues</a> with a label of v2.0!</p>
<p>By adding the 'resources' array to the calendar options and then by linking the id of this to the event 'resources', we can have resource events. We also have the option to add a 'className' to the resource to allow us to change how the resource 'column' looks. Here, we have resource 3 as red. Similar to the event object className, we can add as: 'className' : 'my-class' or 'className' : ['my-class','my-class-2']</p>
<div id='calendar'></div>
<p>Add the following to your head tag:</p>
<ul>
<li><link rel="stylesheet" href="fullcalendar.css"></li>
</ul>
<p>Add the following to the bottom of your body tag:</p>
<ul>
<li><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script></li>
<li><script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script></li>
<li><script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.1/moment.min.js"></script></li>
<li><script src="fullcalendar.js"></script></li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.1/moment.min.js"></script>
<script src="//rawgit.com/seankenny/fullcalendar/v2/dist/fullcalendar.js"></script>
<script src="script.js"></script>
</body>
</html>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,resourceDay'
},
defaultView: 'resourceDay',
editable: true,
droppable: true,
resources: [{
'id': 'resource1',
'name': 'Resource 1'
}, {
'id': 'resource2',
'name': 'Resource 2'
}, {
'id': 'resource3',
'name': 'Resource 3',
'className': ['red']
}],
events: [{
title: 'R1-R2: Lunch 12.15-14.45',
start: new Date(y, m, d, 12, 15),
end: new Date(y, m, d, 14, 45),
allDay: false,
resources: ['resource1', 'resource2']
}, {
title: 'R1: All day',
start: new Date(y, m, d, 10, 30),
end: new Date(y, m, d, 11, 0),
allDay: true,
resources: 'resource1'
}, {
title: 'R2: Meeting 11.00',
start: new Date(y, m, d, 11, 0),
allDay: true,
resources: 'resource2'
}, {
title: 'R1/R2: Lunch 12-14',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false,
resources: ['resource1', 'resource2']
}, {
id: 777,
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false,
resources: ['resource1']
}, {
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d - 3, 16, 0),
allDay: false,
resources: 'resource2'
}, {
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d + 4, 16, 0),
allDay: false,
resources: 'resource2'
}],
// the 'ev' parameter is the mouse event rather than the resource 'event'
// the ev.data is the resource column clicked upon
selectable: true,
selectHelper: true,
select: function(start, end, ev) {
console.log(start);
console.log(end);
console.log(ev.data); // resources
},
eventClick: function(event) {
console.log(event);
},
eventDrop: function (event, delta, revertFunc) {
console.log(event);
}
});
});