mirror of
https://github.com/jokob-sk/NetAlertX.git
synced 2025-12-07 09:36:05 -08:00
CR/LF correction
This commit is contained in:
pucherot
106
front/lib/fullcalendar-scheduler/demos/background-events.html
Normal file
106
front/lib/fullcalendar-scheduler/demos/background-events.html
Normal file
@@ -0,0 +1,106 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<link href='../lib/fullcalendar.min.css' rel='stylesheet' />
|
||||
<link href='../lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
|
||||
<link href='../scheduler.min.css' rel='stylesheet' />
|
||||
<script src='../lib/moment.min.js'></script>
|
||||
<script src='../lib/jquery.min.js'></script>
|
||||
<script src='../lib/fullcalendar.min.js'></script>
|
||||
<script src='../scheduler.min.js'></script>
|
||||
<script>
|
||||
|
||||
$(function() { // document ready
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
now: '2018-04-07',
|
||||
editable: true, // enable draggable events
|
||||
aspectRatio: 1.8,
|
||||
scrollTime: '00:00', // undo default 6am scrollTime
|
||||
header: {
|
||||
left: 'today prev,next',
|
||||
center: 'title',
|
||||
right: 'timelineDay,timelineThreeDays,agendaWeek,month'
|
||||
},
|
||||
defaultView: 'timelineDay',
|
||||
views: {
|
||||
timelineThreeDays: {
|
||||
type: 'timeline',
|
||||
duration: { days: 3 }
|
||||
}
|
||||
},
|
||||
resourceLabelText: 'Rooms',
|
||||
resources: [
|
||||
{ id: 'a', title: 'Auditorium A' },
|
||||
{ id: 'b', title: 'Auditorium B', eventColor: 'green' },
|
||||
{ id: 'c', title: 'Auditorium C', eventColor: 'orange' },
|
||||
{ id: 'd', title: 'Auditorium D', children: [
|
||||
{ id: 'd1', title: 'Room D1' },
|
||||
{ id: 'd2', title: 'Room D2' }
|
||||
] },
|
||||
{ id: 'e', title: 'Auditorium E' },
|
||||
{ id: 'f', title: 'Auditorium F', eventColor: 'red' },
|
||||
{ id: 'g', title: 'Auditorium G' },
|
||||
{ id: 'h', title: 'Auditorium H' },
|
||||
{ id: 'i', title: 'Auditorium I' },
|
||||
{ id: 'j', title: 'Auditorium J' },
|
||||
{ id: 'k', title: 'Auditorium K' },
|
||||
{ id: 'l', title: 'Auditorium L' },
|
||||
{ id: 'm', title: 'Auditorium M' },
|
||||
{ id: 'n', title: 'Auditorium N' },
|
||||
{ id: 'o', title: 'Auditorium O' },
|
||||
{ id: 'p', title: 'Auditorium P' },
|
||||
{ id: 'q', title: 'Auditorium Q' },
|
||||
{ id: 'r', title: 'Auditorium R' },
|
||||
{ id: 's', title: 'Auditorium S' },
|
||||
{ id: 't', title: 'Auditorium T' },
|
||||
{ id: 'u', title: 'Auditorium U' },
|
||||
{ id: 'v', title: 'Auditorium V' },
|
||||
{ id: 'w', title: 'Auditorium W' },
|
||||
{ id: 'x', title: 'Auditorium X' },
|
||||
{ id: 'y', title: 'Auditorium Y' },
|
||||
{ id: 'z', title: 'Auditorium Z' }
|
||||
],
|
||||
events: [
|
||||
|
||||
// background event, associated with a resource
|
||||
{ id: 'bg1', resourceId: 'b', rendering: 'background', start: '2018-04-07T01:00:00', end: '2018-04-07T04:00:00' },
|
||||
|
||||
// background event, NOT associated with a resource
|
||||
{ id: 'bg2', rendering: 'background', start: '2018-04-07T05:00:00', end: '2018-04-07T08:00:00' },
|
||||
|
||||
// normal events...
|
||||
{ id: '1', resourceId: 'b', start: '2018-04-07T02:00:00', end: '2018-04-07T07:00:00', title: 'event 1' },
|
||||
{ id: '2', resourceId: 'c', start: '2018-04-07T05:00:00', end: '2018-04-07T22:00:00', title: 'event 2' },
|
||||
{ id: '3', resourceId: 'd', start: '2018-04-06', end: '2018-04-08', title: 'event 3' },
|
||||
{ id: '4', resourceId: 'e', start: '2018-04-07T03:00:00', end: '2018-04-07T08:00:00', title: 'event 4' },
|
||||
{ id: '5', resourceId: 'f', start: '2018-04-07T00:30:00', end: '2018-04-07T02:30:00', title: 'event 5' }
|
||||
]
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
<style>
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#calendar {
|
||||
max-width: 900px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id='calendar'></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
113
front/lib/fullcalendar-scheduler/demos/column-grouping.html
Normal file
113
front/lib/fullcalendar-scheduler/demos/column-grouping.html
Normal file
@@ -0,0 +1,113 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<link href='../lib/fullcalendar.min.css' rel='stylesheet' />
|
||||
<link href='../lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
|
||||
<link href='../scheduler.min.css' rel='stylesheet' />
|
||||
<script src='../lib/moment.min.js'></script>
|
||||
<script src='../lib/jquery.min.js'></script>
|
||||
<script src='../lib/fullcalendar.min.js'></script>
|
||||
<script src='../scheduler.min.js'></script>
|
||||
<script>
|
||||
|
||||
$(function() { // document ready
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
now: '2018-04-07',
|
||||
editable: true,
|
||||
aspectRatio: 1.8,
|
||||
scrollTime: '00:00',
|
||||
header: {
|
||||
left: 'today prev,next',
|
||||
center: 'title',
|
||||
right: 'timelineDay,timelineThreeDays,agendaWeek,month'
|
||||
},
|
||||
defaultView: 'timelineDay',
|
||||
views: {
|
||||
timelineThreeDays: {
|
||||
type: 'timeline',
|
||||
duration: { days: 3 }
|
||||
}
|
||||
},
|
||||
resourceAreaWidth: '40%',
|
||||
resourceColumns: [
|
||||
{
|
||||
group: true,
|
||||
labelText: 'Building',
|
||||
field: 'building'
|
||||
},
|
||||
{
|
||||
labelText: 'Room',
|
||||
field: 'title'
|
||||
},
|
||||
{
|
||||
labelText: 'Occupancy',
|
||||
field: 'occupancy'
|
||||
}
|
||||
],
|
||||
resources: [
|
||||
{ id: 'a', building: '460 Bryant', title: 'Auditorium A', occupancy: 40 },
|
||||
{ id: 'b', building: '460 Bryant', title: 'Auditorium B', occupancy: 40, eventColor: 'green' },
|
||||
{ id: 'c', building: '460 Bryant', title: 'Auditorium C', occupancy: 40, eventColor: 'orange' },
|
||||
{ id: 'd', building: '460 Bryant', title: 'Auditorium D', occupancy: 40, children: [
|
||||
{ id: 'd1', title: 'Room D1', occupancy: 10 },
|
||||
{ id: 'd2', title: 'Room D2', occupancy: 10 }
|
||||
] },
|
||||
{ id: 'e', building: '460 Bryant', title: 'Auditorium E', occupancy: 40 },
|
||||
{ id: 'f', building: '460 Bryant', title: 'Auditorium F', occupancy: 40, eventColor: 'red' },
|
||||
{ id: 'g', building: '564 Pacific', title: 'Auditorium G', occupancy: 40 },
|
||||
{ id: 'h', building: '564 Pacific', title: 'Auditorium H', occupancy: 40 },
|
||||
{ id: 'i', building: '564 Pacific', title: 'Auditorium I', occupancy: 40 },
|
||||
{ id: 'j', building: '564 Pacific', title: 'Auditorium J', occupancy: 40 },
|
||||
{ id: 'k', building: '564 Pacific', title: 'Auditorium K', occupancy: 40 },
|
||||
{ id: 'l', building: '564 Pacific', title: 'Auditorium L', occupancy: 40 },
|
||||
{ id: 'm', building: '564 Pacific', title: 'Auditorium M', occupancy: 40 },
|
||||
{ id: 'n', building: '564 Pacific', title: 'Auditorium N', occupancy: 40 },
|
||||
{ id: 'o', building: '564 Pacific', title: 'Auditorium O', occupancy: 40 },
|
||||
{ id: 'p', building: '564 Pacific', title: 'Auditorium P', occupancy: 40 },
|
||||
{ id: 'q', building: '564 Pacific', title: 'Auditorium Q', occupancy: 40 },
|
||||
{ id: 'r', building: '564 Pacific', title: 'Auditorium R', occupancy: 40 },
|
||||
{ id: 's', building: '564 Pacific', title: 'Auditorium S', occupancy: 40 },
|
||||
{ id: 't', building: '564 Pacific', title: 'Auditorium T', occupancy: 40 },
|
||||
{ id: 'u', building: '564 Pacific', title: 'Auditorium U', occupancy: 40 },
|
||||
{ id: 'v', building: '564 Pacific', title: 'Auditorium V', occupancy: 40 },
|
||||
{ id: 'w', building: '564 Pacific', title: 'Auditorium W', occupancy: 40 },
|
||||
{ id: 'x', building: '564 Pacific', title: 'Auditorium X', occupancy: 40 },
|
||||
{ id: 'y', building: '564 Pacific', title: 'Auditorium Y', occupancy: 40 },
|
||||
{ id: 'z', building: '564 Pacific', title: 'Auditorium Z', occupancy: 40 }
|
||||
],
|
||||
events: [
|
||||
{ id: '1', resourceId: 'b', start: '2018-04-07T02:00:00', end: '2018-04-07T07:00:00', title: 'event 1' },
|
||||
{ id: '2', resourceId: 'c', start: '2018-04-07T05:00:00', end: '2018-04-07T22:00:00', title: 'event 2' },
|
||||
{ id: '3', resourceId: 'd', start: '2018-04-06', end: '2018-04-08', title: 'event 3' },
|
||||
{ id: '4', resourceId: 'e', start: '2018-04-07T03:00:00', end: '2018-04-07T08:00:00', title: 'event 4' },
|
||||
{ id: '5', resourceId: 'f', start: '2018-04-07T00:30:00', end: '2018-04-07T02:30:00', title: 'event 5' }
|
||||
]
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
<style>
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#calendar {
|
||||
max-width: 900px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id='calendar'></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
108
front/lib/fullcalendar-scheduler/demos/columns.html
Normal file
108
front/lib/fullcalendar-scheduler/demos/columns.html
Normal file
@@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<link href='../lib/fullcalendar.min.css' rel='stylesheet' />
|
||||
<link href='../lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
|
||||
<link href='../scheduler.min.css' rel='stylesheet' />
|
||||
<script src='../lib/moment.min.js'></script>
|
||||
<script src='../lib/jquery.min.js'></script>
|
||||
<script src='../lib/fullcalendar.min.js'></script>
|
||||
<script src='../scheduler.min.js'></script>
|
||||
<script>
|
||||
|
||||
$(function() { // document ready
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
now: '2018-04-07',
|
||||
editable: true,
|
||||
aspectRatio: 1.8,
|
||||
scrollTime: '00:00',
|
||||
header: {
|
||||
left: 'today prev,next',
|
||||
center: 'title',
|
||||
right: 'timelineDay,timelineThreeDays,agendaWeek,month'
|
||||
},
|
||||
defaultView: 'timelineDay',
|
||||
views: {
|
||||
timelineThreeDays: {
|
||||
type: 'timeline',
|
||||
duration: { days: 3 }
|
||||
}
|
||||
},
|
||||
resourceAreaWidth: '30%',
|
||||
resourceColumns: [
|
||||
{
|
||||
labelText: 'Room',
|
||||
field: 'title'
|
||||
},
|
||||
{
|
||||
labelText: 'Occupancy',
|
||||
field: 'occupancy'
|
||||
}
|
||||
],
|
||||
resources: [
|
||||
{ id: 'a', title: 'Auditorium A', occupancy: 40 },
|
||||
{ id: 'b', title: 'Auditorium B', occupancy: 40, eventColor: 'green' },
|
||||
{ id: 'c', title: 'Auditorium C', occupancy: 40, eventColor: 'orange' },
|
||||
{ id: 'd', title: 'Auditorium D', occupancy: 40, children: [
|
||||
{ id: 'd1', title: 'Room D1', occupancy: 10 },
|
||||
{ id: 'd2', title: 'Room D2', occupancy: 10 }
|
||||
] },
|
||||
{ id: 'e', title: 'Auditorium E', occupancy: 40 },
|
||||
{ id: 'f', title: 'Auditorium F', occupancy: 40, eventColor: 'red' },
|
||||
{ id: 'g', title: 'Auditorium G', occupancy: 40 },
|
||||
{ id: 'h', title: 'Auditorium H', occupancy: 40 },
|
||||
{ id: 'i', title: 'Auditorium I', occupancy: 40 },
|
||||
{ id: 'j', title: 'Auditorium J', occupancy: 40 },
|
||||
{ id: 'k', title: 'Auditorium K', occupancy: 40 },
|
||||
{ id: 'l', title: 'Auditorium L', occupancy: 40 },
|
||||
{ id: 'm', title: 'Auditorium M', occupancy: 40 },
|
||||
{ id: 'n', title: 'Auditorium N', occupancy: 40 },
|
||||
{ id: 'o', title: 'Auditorium O', occupancy: 40 },
|
||||
{ id: 'p', title: 'Auditorium P', occupancy: 40 },
|
||||
{ id: 'q', title: 'Auditorium Q', occupancy: 40 },
|
||||
{ id: 'r', title: 'Auditorium R', occupancy: 40 },
|
||||
{ id: 's', title: 'Auditorium S', occupancy: 40 },
|
||||
{ id: 't', title: 'Auditorium T', occupancy: 40 },
|
||||
{ id: 'u', title: 'Auditorium U', occupancy: 40 },
|
||||
{ id: 'v', title: 'Auditorium V', occupancy: 40 },
|
||||
{ id: 'w', title: 'Auditorium W', occupancy: 40 },
|
||||
{ id: 'x', title: 'Auditorium X', occupancy: 40 },
|
||||
{ id: 'y', title: 'Auditorium Y', occupancy: 40 },
|
||||
{ id: 'z', title: 'Auditorium Z', occupancy: 40 }
|
||||
],
|
||||
events: [
|
||||
{ id: '1', resourceId: 'b', start: '2018-04-07T02:00:00', end: '2018-04-07T07:00:00', title: 'event 1' },
|
||||
{ id: '2', resourceId: 'c', start: '2018-04-07T05:00:00', end: '2018-04-07T22:00:00', title: 'event 2' },
|
||||
{ id: '3', resourceId: 'd', start: '2018-04-06', end: '2018-04-08', title: 'event 3' },
|
||||
{ id: '4', resourceId: 'e', start: '2018-04-07T03:00:00', end: '2018-04-07T08:00:00', title: 'event 4' },
|
||||
{ id: '5', resourceId: 'f', start: '2018-04-07T00:30:00', end: '2018-04-07T02:30:00', title: 'event 5' }
|
||||
]
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
<style>
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#calendar {
|
||||
max-width: 900px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id='calendar'></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
132
front/lib/fullcalendar-scheduler/demos/dynamic-add-remove.html
Normal file
132
front/lib/fullcalendar-scheduler/demos/dynamic-add-remove.html
Normal file
@@ -0,0 +1,132 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<link href='../lib/fullcalendar.min.css' rel='stylesheet' />
|
||||
<link href='../lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
|
||||
<link href='../scheduler.min.css' rel='stylesheet' />
|
||||
<script src='../lib/moment.min.js'></script>
|
||||
<script src='../lib/jquery.min.js'></script>
|
||||
<script src='../lib/fullcalendar.min.js'></script>
|
||||
<script src='../scheduler.min.js'></script>
|
||||
<script>
|
||||
|
||||
$(function() { // document ready
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
now: '2018-04-07',
|
||||
editable: true,
|
||||
aspectRatio: 1.8,
|
||||
scrollTime: '00:00',
|
||||
header: {
|
||||
left: 'promptResource today prev,next',
|
||||
center: 'title',
|
||||
right: 'timelineDay,timelineThreeDays,agendaWeek,month'
|
||||
},
|
||||
customButtons: {
|
||||
promptResource: {
|
||||
text: '+ room',
|
||||
click: function() {
|
||||
var title = prompt('Room name');
|
||||
if (title) {
|
||||
$('#calendar').fullCalendar(
|
||||
'addResource',
|
||||
{ title: title },
|
||||
true // scroll to the new resource?
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
defaultView: 'timelineDay',
|
||||
views: {
|
||||
timelineThreeDays: {
|
||||
type: 'timeline',
|
||||
duration: { days: 3 }
|
||||
}
|
||||
},
|
||||
resourceLabelText: 'Rooms',
|
||||
resourceRender: function(resource, cellEls) {
|
||||
cellEls.on('click', function() {
|
||||
if (confirm('Are you sure you want to delete ' + resource.title + '?')) {
|
||||
$('#calendar').fullCalendar('removeResource', resource);
|
||||
}
|
||||
});
|
||||
},
|
||||
resources: [
|
||||
{ id: 'a', title: 'Auditorium A' },
|
||||
{ id: 'b', title: 'Auditorium B', eventColor: 'green' },
|
||||
{ id: 'c', title: 'Auditorium C', eventColor: 'orange' },
|
||||
{ id: 'd', title: 'Auditorium D', children: [
|
||||
{ id: 'd1', title: 'Room D1' },
|
||||
{ id: 'd2', title: 'Room D2' }
|
||||
] },
|
||||
{ id: 'e', title: 'Auditorium E' },
|
||||
{ id: 'f', title: 'Auditorium F', eventColor: 'red' },
|
||||
{ id: 'g', title: 'Auditorium G' },
|
||||
{ id: 'h', title: 'Auditorium H' },
|
||||
{ id: 'i', title: 'Auditorium I' },
|
||||
{ id: 'j', title: 'Auditorium J' },
|
||||
{ id: 'k', title: 'Auditorium K' },
|
||||
{ id: 'l', title: 'Auditorium L' },
|
||||
{ id: 'm', title: 'Auditorium M' },
|
||||
{ id: 'n', title: 'Auditorium N' },
|
||||
{ id: 'o', title: 'Auditorium O' },
|
||||
{ id: 'p', title: 'Auditorium P' },
|
||||
{ id: 'q', title: 'Auditorium Q' },
|
||||
{ id: 'r', title: 'Auditorium R' },
|
||||
{ id: 's', title: 'Auditorium S' },
|
||||
{ id: 't', title: 'Auditorium T' },
|
||||
{ id: 'u', title: 'Auditorium U' },
|
||||
{ id: 'v', title: 'Auditorium V' },
|
||||
{ id: 'w', title: 'Auditorium W' },
|
||||
{ id: 'x', title: 'Auditorium X' },
|
||||
{ id: 'y', title: 'Auditorium Y' },
|
||||
{ id: 'z', title: 'Auditorium Z' }
|
||||
],
|
||||
events: [
|
||||
{ id: '1', resourceId: 'b', start: '2018-04-07T02:00:00', end: '2018-04-07T07:00:00', title: 'event 1' },
|
||||
{ id: '2', resourceId: 'c', start: '2018-04-07T05:00:00', end: '2018-04-07T22:00:00', title: 'event 2' },
|
||||
{ id: '3', resourceId: 'd', start: '2018-04-06', end: '2018-04-08', title: 'event 3' },
|
||||
{ id: '4', resourceId: 'e', start: '2018-04-07T03:00:00', end: '2018-04-07T08:00:00', title: 'event 4' },
|
||||
{ id: '5', resourceId: 'f', start: '2018-04-07T00:30:00', end: '2018-04-07T02:30:00', title: 'event 5' }
|
||||
]
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
<style>
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#calendar {
|
||||
max-width: 900px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
.fc-resource-area td {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
HINT: click on a resource to delete it.
|
||||
</p>
|
||||
|
||||
<div id='calendar'></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
193
front/lib/fullcalendar-scheduler/demos/external-dragging.html
Normal file
193
front/lib/fullcalendar-scheduler/demos/external-dragging.html
Normal file
@@ -0,0 +1,193 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<link href='../lib/fullcalendar.min.css' rel='stylesheet' />
|
||||
<link href='../lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
|
||||
<link href='../scheduler.min.css' rel='stylesheet' />
|
||||
<script src='../lib/moment.min.js'></script>
|
||||
<script src='../lib/jquery.min.js'></script>
|
||||
<script src='../lib/jquery-ui.min.js'></script>
|
||||
<script src='../lib/fullcalendar.min.js'></script>
|
||||
<script src='../scheduler.min.js'></script>
|
||||
<script>
|
||||
|
||||
$(function() { // document ready
|
||||
|
||||
|
||||
/* initialize the external events
|
||||
-----------------------------------------------------------------*/
|
||||
|
||||
$('#external-events .fc-event').each(function() {
|
||||
|
||||
// store data so the calendar knows to render an event upon drop
|
||||
$(this).data('event', {
|
||||
title: $.trim($(this).text()), // use the element's text as the event title
|
||||
stick: true // maintain when user navigates (see docs on the renderEvent method)
|
||||
});
|
||||
|
||||
// make the event draggable using jQuery UI
|
||||
$(this).draggable({
|
||||
zIndex: 999,
|
||||
revert: true, // will cause the event to go back to its
|
||||
revertDuration: 0 // original position after the drag
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
/* initialize the calendar
|
||||
-----------------------------------------------------------------*/
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
now: '2018-04-07',
|
||||
editable: true, // enable draggable events
|
||||
droppable: true, // this allows things to be dropped onto the calendar
|
||||
aspectRatio: 1.8,
|
||||
scrollTime: '00:00', // undo default 6am scrollTime
|
||||
header: {
|
||||
left: 'today prev,next',
|
||||
center: 'title',
|
||||
right: 'timelineDay,timelineThreeDays,agendaWeek,month'
|
||||
},
|
||||
defaultView: 'timelineDay',
|
||||
views: {
|
||||
timelineThreeDays: {
|
||||
type: 'timeline',
|
||||
duration: { days: 3 }
|
||||
}
|
||||
},
|
||||
resourceLabelText: 'Rooms',
|
||||
resources: [
|
||||
{ id: 'a', title: 'Auditorium A' },
|
||||
{ id: 'b', title: 'Auditorium B', eventColor: 'green' },
|
||||
{ id: 'c', title: 'Auditorium C', eventColor: 'orange' },
|
||||
{ id: 'd', title: 'Auditorium D', children: [
|
||||
{ id: 'd1', title: 'Room D1' },
|
||||
{ id: 'd2', title: 'Room D2' }
|
||||
] },
|
||||
{ id: 'e', title: 'Auditorium E' },
|
||||
{ id: 'f', title: 'Auditorium F', eventColor: 'red' },
|
||||
{ id: 'g', title: 'Auditorium G' },
|
||||
{ id: 'h', title: 'Auditorium H' },
|
||||
{ id: 'i', title: 'Auditorium I' },
|
||||
{ id: 'j', title: 'Auditorium J' },
|
||||
{ id: 'k', title: 'Auditorium K' },
|
||||
{ id: 'l', title: 'Auditorium L' },
|
||||
{ id: 'm', title: 'Auditorium M' },
|
||||
{ id: 'n', title: 'Auditorium N' },
|
||||
{ id: 'o', title: 'Auditorium O' },
|
||||
{ id: 'p', title: 'Auditorium P' },
|
||||
{ id: 'q', title: 'Auditorium Q' },
|
||||
{ id: 'r', title: 'Auditorium R' },
|
||||
{ id: 's', title: 'Auditorium S' },
|
||||
{ id: 't', title: 'Auditorium T' },
|
||||
{ id: 'u', title: 'Auditorium U' },
|
||||
{ id: 'v', title: 'Auditorium V' },
|
||||
{ id: 'w', title: 'Auditorium W' },
|
||||
{ id: 'x', title: 'Auditorium X' },
|
||||
{ id: 'y', title: 'Auditorium Y' },
|
||||
{ id: 'z', title: 'Auditorium Z' }
|
||||
],
|
||||
events: [
|
||||
{ id: '1', resourceId: 'b', start: '2018-04-07T02:00:00', end: '2018-04-07T07:00:00', title: 'event 1' },
|
||||
{ id: '2', resourceId: 'c', start: '2018-04-07T05:00:00', end: '2018-04-07T22:00:00', title: 'event 2' },
|
||||
{ id: '3', resourceId: 'd', start: '2018-04-06', end: '2018-04-08', title: 'event 3' },
|
||||
{ id: '4', resourceId: 'e', start: '2018-04-07T03:00:00', end: '2018-04-07T08:00:00', title: 'event 4' },
|
||||
{ id: '5', resourceId: 'f', start: '2018-04-07T00:30:00', end: '2018-04-07T02:30:00', title: 'event 5' }
|
||||
],
|
||||
drop: function(date, jsEvent, ui, resourceId) {
|
||||
console.log('drop', date.format(), resourceId);
|
||||
|
||||
// is the "remove after drop" checkbox checked?
|
||||
if ($('#drop-remove').is(':checked')) {
|
||||
// if so, remove the element from the "Draggable Events" list
|
||||
$(this).remove();
|
||||
}
|
||||
},
|
||||
eventReceive: function(event) { // called when a proper external event is dropped
|
||||
console.log('eventReceive', event);
|
||||
},
|
||||
eventDrop: function(event) { // called when an event (already on the calendar) is moved
|
||||
console.log('eventDrop', event);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
<style>
|
||||
|
||||
body {
|
||||
margin-top: 40px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
|
||||
}
|
||||
|
||||
#wrap {
|
||||
width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#external-events {
|
||||
float: left;
|
||||
width: 150px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #ccc;
|
||||
background: #eee;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#external-events h4 {
|
||||
font-size: 16px;
|
||||
margin-top: 0;
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
#external-events .fc-event {
|
||||
margin: 10px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#external-events p {
|
||||
margin: 1.5em 0;
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#external-events p input {
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#calendar {
|
||||
float: right;
|
||||
width: 900px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='wrap'>
|
||||
|
||||
<div id='external-events'>
|
||||
<h4>Draggable Events</h4>
|
||||
<div class='fc-event'>My Event 1</div>
|
||||
<div class='fc-event'>My Event 2</div>
|
||||
<div class='fc-event'>My Event 3</div>
|
||||
<div class='fc-event'>My Event 4</div>
|
||||
<div class='fc-event'>My Event 5</div>
|
||||
<p>
|
||||
<input type='checkbox' id='drop-remove' />
|
||||
<label for='drop-remove'>remove after drop</label>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id='calendar'></div>
|
||||
|
||||
<div style='clear:both'></div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
74
front/lib/fullcalendar-scheduler/demos/gcal.html
Normal file
74
front/lib/fullcalendar-scheduler/demos/gcal.html
Normal file
@@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<link href='../lib/fullcalendar.min.css' rel='stylesheet' />
|
||||
<link href='../lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
|
||||
<link href='../scheduler.min.css' rel='stylesheet' />
|
||||
<script src='../lib/moment.min.js'></script>
|
||||
<script src='../lib/jquery.min.js'></script>
|
||||
<script src='../lib/fullcalendar.min.js'></script>
|
||||
<script src='../lib/gcal.min.js'></script>
|
||||
<script src='../scheduler.min.js'></script>
|
||||
<script>
|
||||
|
||||
$(function() { // document ready
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
now: '2018-04-07',
|
||||
editable: true, // enable draggable events
|
||||
aspectRatio: 1.8,
|
||||
scrollTime: '00:00', // undo default 6am scrollTime
|
||||
header: {
|
||||
left: 'today prev,next',
|
||||
center: 'title',
|
||||
right: 'timelineMonth,timelineYear'
|
||||
},
|
||||
defaultView: 'timelineMonth',
|
||||
|
||||
/*
|
||||
NOTE: unfortunately, Scheduler doesn't know how to associated events from
|
||||
Google Calendar with resources, so if you specify a resource list,
|
||||
nothing will show up :( Working on some solutions.
|
||||
*/
|
||||
|
||||
// THIS KEY WON'T WORK IN PRODUCTION!!!
|
||||
// To make your own Google API key, follow the directions here:
|
||||
// http://fullcalendar.io/docs/google_calendar/
|
||||
googleCalendarApiKey: 'AIzaSyDcnW6WejpTOCffshGDDb4neIrXVUA1EAE',
|
||||
|
||||
// US Holidays
|
||||
events: 'usa__en@holiday.calendar.google.com',
|
||||
|
||||
eventClick: function(event) {
|
||||
// opens events in a popup window
|
||||
window.open(event.url, 'gcalevent', 'width=700,height=600');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
<style>
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#calendar {
|
||||
max-width: 900px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id='calendar'></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
98
front/lib/fullcalendar-scheduler/demos/grouping.html
Normal file
98
front/lib/fullcalendar-scheduler/demos/grouping.html
Normal file
@@ -0,0 +1,98 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<link href='../lib/fullcalendar.min.css' rel='stylesheet' />
|
||||
<link href='../lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
|
||||
<link href='../scheduler.min.css' rel='stylesheet' />
|
||||
<script src='../lib/moment.min.js'></script>
|
||||
<script src='../lib/jquery.min.js'></script>
|
||||
<script src='../lib/fullcalendar.min.js'></script>
|
||||
<script src='../scheduler.min.js'></script>
|
||||
<script>
|
||||
|
||||
$(function() { // document ready
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
now: '2018-04-07',
|
||||
editable: true,
|
||||
aspectRatio: 1.8,
|
||||
scrollTime: '00:00',
|
||||
header: {
|
||||
left: 'today prev,next',
|
||||
center: 'title',
|
||||
right: 'timelineDay,timelineThreeDays,agendaWeek,month'
|
||||
},
|
||||
defaultView: 'timelineDay',
|
||||
views: {
|
||||
timelineThreeDays: {
|
||||
type: 'timeline',
|
||||
duration: { days: 3 }
|
||||
}
|
||||
},
|
||||
resourceGroupField: 'building',
|
||||
resources: [
|
||||
{ id: 'a', building: '460 Bryant', title: 'Auditorium A' },
|
||||
{ id: 'b', building: '460 Bryant', title: 'Auditorium B', eventColor: 'green' },
|
||||
{ id: 'c', building: '460 Bryant', title: 'Auditorium C', eventColor: 'orange' },
|
||||
{ id: 'd', building: '460 Bryant', title: 'Auditorium D', children: [
|
||||
{ id: 'd1', title: 'Room D1', occupancy: 10 },
|
||||
{ id: 'd2', title: 'Room D2', occupancy: 10 }
|
||||
] },
|
||||
{ id: 'e', building: '460 Bryant', title: 'Auditorium E' },
|
||||
{ id: 'f', building: '460 Bryant', title: 'Auditorium F', eventColor: 'red' },
|
||||
{ id: 'g', building: '564 Pacific', title: 'Auditorium G' },
|
||||
{ id: 'h', building: '564 Pacific', title: 'Auditorium H' },
|
||||
{ id: 'i', building: '564 Pacific', title: 'Auditorium I' },
|
||||
{ id: 'j', building: '564 Pacific', title: 'Auditorium J' },
|
||||
{ id: 'k', building: '564 Pacific', title: 'Auditorium K' },
|
||||
{ id: 'l', building: '564 Pacific', title: 'Auditorium L' },
|
||||
{ id: 'm', building: '564 Pacific', title: 'Auditorium M' },
|
||||
{ id: 'n', building: '564 Pacific', title: 'Auditorium N' },
|
||||
{ id: 'o', building: '564 Pacific', title: 'Auditorium O' },
|
||||
{ id: 'p', building: '564 Pacific', title: 'Auditorium P' },
|
||||
{ id: 'q', building: '564 Pacific', title: 'Auditorium Q' },
|
||||
{ id: 'r', building: '564 Pacific', title: 'Auditorium R' },
|
||||
{ id: 's', building: '564 Pacific', title: 'Auditorium S' },
|
||||
{ id: 't', building: '564 Pacific', title: 'Auditorium T' },
|
||||
{ id: 'u', building: '564 Pacific', title: 'Auditorium U' },
|
||||
{ id: 'v', building: '564 Pacific', title: 'Auditorium V' },
|
||||
{ id: 'w', building: '564 Pacific', title: 'Auditorium W' },
|
||||
{ id: 'x', building: '564 Pacific', title: 'Auditorium X' },
|
||||
{ id: 'y', building: '564 Pacific', title: 'Auditorium Y' },
|
||||
{ id: 'z', building: '564 Pacific', title: 'Auditorium Z' }
|
||||
],
|
||||
events: [
|
||||
{ id: '1', resourceId: 'b', start: '2018-04-07T02:00:00', end: '2018-04-07T07:00:00', title: 'event 1' },
|
||||
{ id: '2', resourceId: 'c', start: '2018-04-07T05:00:00', end: '2018-04-07T22:00:00', title: 'event 2' },
|
||||
{ id: '3', resourceId: 'd', start: '2018-04-06', end: '2018-04-08', title: 'event 3' },
|
||||
{ id: '4', resourceId: 'e', start: '2018-04-07T03:00:00', end: '2018-04-07T08:00:00', title: 'event 4' },
|
||||
{ id: '5', resourceId: 'f', start: '2018-04-07T00:30:00', end: '2018-04-07T02:30:00', title: 'event 5' }
|
||||
]
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
<style>
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#calendar {
|
||||
max-width: 900px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id='calendar'></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
117
front/lib/fullcalendar-scheduler/demos/js/theme-chooser.js
Normal file
117
front/lib/fullcalendar-scheduler/demos/js/theme-chooser.js
Normal file
@@ -0,0 +1,117 @@
|
||||
|
||||
function initThemeChooser(settings) {
|
||||
var isInitialized = false;
|
||||
var $currentStylesheet = $();
|
||||
var $loading = $('#loading');
|
||||
var $systemSelect = $('#theme-system-selector select')
|
||||
.on('change', function() {
|
||||
setThemeSystem(this.value);
|
||||
});
|
||||
|
||||
setThemeSystem($systemSelect.val());
|
||||
|
||||
|
||||
function setThemeSystem(themeSystem) {
|
||||
var $allSelectWraps = $('.selector[data-theme-system]').hide();
|
||||
var $selectWrap = $allSelectWraps.filter('[data-theme-system="' + themeSystem +'"]').show();
|
||||
var $select = $selectWrap.find('select')
|
||||
.off('change') // avoid duplicate handlers :(
|
||||
.on('change', function() {
|
||||
setTheme(themeSystem, this.value);
|
||||
});
|
||||
|
||||
setTheme(themeSystem, $select.val());
|
||||
}
|
||||
|
||||
|
||||
function setTheme(themeSystem, themeName) {
|
||||
var stylesheetUrl = generateStylesheetUrl(themeSystem, themeName);
|
||||
var $stylesheet;
|
||||
|
||||
function done() {
|
||||
if (!isInitialized) {
|
||||
isInitialized = true;
|
||||
settings.init(themeSystem);
|
||||
}
|
||||
else {
|
||||
settings.change(themeSystem);
|
||||
}
|
||||
|
||||
showCredits(themeSystem, themeName);
|
||||
}
|
||||
|
||||
if (stylesheetUrl) {
|
||||
$stylesheet = $('<link rel="stylesheet" type="text/css" href="' + stylesheetUrl + '"/>').appendTo('head');
|
||||
$loading.show();
|
||||
|
||||
whenStylesheetLoaded($stylesheet[0], function() {
|
||||
$currentStylesheet.remove();
|
||||
$currentStylesheet = $stylesheet;
|
||||
$loading.hide();
|
||||
done();
|
||||
});
|
||||
} else {
|
||||
$currentStylesheet.remove();
|
||||
$currentStylesheet = $();
|
||||
done();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function generateStylesheetUrl(themeSystem, themeName) {
|
||||
if (themeSystem === 'jquery-ui') {
|
||||
return 'https://code.jquery.com/ui/1.12.1/themes/' + themeName + '/jquery-ui.css';
|
||||
}
|
||||
else if (themeSystem === 'bootstrap3') {
|
||||
if (themeName) {
|
||||
return 'https://bootswatch.com/3/' + themeName + '/bootstrap.min.css';
|
||||
}
|
||||
else { // the default bootstrap theme
|
||||
return 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
|
||||
}
|
||||
}
|
||||
else if (themeSystem === 'bootstrap4') {
|
||||
if (themeName) {
|
||||
return 'https://bootswatch.com/4/' + themeName + '/bootstrap.min.css';
|
||||
}
|
||||
else { // the default bootstrap4 theme
|
||||
return 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function showCredits(themeSystem, themeName) {
|
||||
var creditId;
|
||||
|
||||
if (themeSystem === 'jquery-ui') {
|
||||
creditId = 'jquery-ui';
|
||||
}
|
||||
else if (themeSystem === 'bootstrap3') {
|
||||
if (themeName) {
|
||||
creditId = 'bootstrap-custom';
|
||||
}
|
||||
else {
|
||||
creditId = 'bootstrap-standard';
|
||||
}
|
||||
}
|
||||
|
||||
$('.credits').hide()
|
||||
.filter('[data-credit-id="' + creditId + '"]').show();
|
||||
}
|
||||
|
||||
|
||||
function whenStylesheetLoaded(linkNode, callback) {
|
||||
var isReady = false;
|
||||
|
||||
function ready() {
|
||||
if (!isReady) { // avoid double-call
|
||||
isReady = true;
|
||||
callback();
|
||||
}
|
||||
}
|
||||
|
||||
linkNode.onload = ready; // does not work cross-browser
|
||||
setTimeout(ready, 2000); // max wait. also handles browsers that don't support onload
|
||||
}
|
||||
}
|
||||
99
front/lib/fullcalendar-scheduler/demos/json.html
Normal file
99
front/lib/fullcalendar-scheduler/demos/json.html
Normal file
@@ -0,0 +1,99 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<link href='../lib/fullcalendar.min.css' rel='stylesheet' />
|
||||
<link href='../lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
|
||||
<link href='../scheduler.min.css' rel='stylesheet' />
|
||||
<script src='../lib/moment.min.js'></script>
|
||||
<script src='../lib/jquery.min.js'></script>
|
||||
<script src='../lib/fullcalendar.min.js'></script>
|
||||
<script src='../scheduler.min.js'></script>
|
||||
<script>
|
||||
|
||||
$(function() { // document ready
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
now: '2018-04-07',
|
||||
editable: true, // enable draggable events
|
||||
aspectRatio: 1.8,
|
||||
scrollTime: '00:00', // undo default 6am scrollTime
|
||||
header: {
|
||||
left: 'today prev,next',
|
||||
center: 'title',
|
||||
right: 'timelineDay,timelineThreeDays,agendaWeek,month'
|
||||
},
|
||||
defaultView: 'timelineDay',
|
||||
views: {
|
||||
timelineThreeDays: {
|
||||
type: 'timeline',
|
||||
duration: { days: 3 }
|
||||
}
|
||||
},
|
||||
resourceLabelText: 'Rooms',
|
||||
|
||||
resources: { // you can also specify a plain string like 'json/resources.json'
|
||||
url: 'json/resources.json',
|
||||
error: function() {
|
||||
$('#script-warning').show();
|
||||
}
|
||||
},
|
||||
|
||||
events: { // you can also specify a plain string like 'json/events.json'
|
||||
url: 'json/events.json',
|
||||
error: function() {
|
||||
$('#script-warning').show();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
<style>
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#script-warning {
|
||||
display: none;
|
||||
background: #eee;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 0 10px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
color: red;
|
||||
}
|
||||
|
||||
#loading {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
#calendar {
|
||||
max-width: 900px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id='script-warning'>
|
||||
This page should be running from a webserver, to allow fetching from the <code>json/</code> directory.
|
||||
</div>
|
||||
|
||||
<div id='loading'>loading...</div>
|
||||
|
||||
<div id='calendar'></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
7
front/lib/fullcalendar-scheduler/demos/json/events.json
Normal file
7
front/lib/fullcalendar-scheduler/demos/json/events.json
Normal file
@@ -0,0 +1,7 @@
|
||||
[
|
||||
{ "id": "1", "resourceId": "b", "start": "2018-04-07T02:00:00", "end": "2018-04-07T07:00:00", "title": "event 1" },
|
||||
{ "id": "2", "resourceId": "c", "start": "2018-04-07T05:00:00", "end": "2018-04-07T22:00:00", "title": "event 2" },
|
||||
{ "id": "3", "resourceId": "d", "start": "2018-04-06", "end": "2018-04-08", "title": "event 3" },
|
||||
{ "id": "4", "resourceId": "e", "start": "2018-04-07T03:00:00", "end": "2018-04-07T08:00:00", "title": "event 4" },
|
||||
{ "id": "5", "resourceId": "f", "start": "2018-04-07T00:30:00", "end": "2018-04-07T02:30:00", "title": "event 5" }
|
||||
]
|
||||
31
front/lib/fullcalendar-scheduler/demos/json/resources.json
Normal file
31
front/lib/fullcalendar-scheduler/demos/json/resources.json
Normal file
@@ -0,0 +1,31 @@
|
||||
[
|
||||
{ "id": "a", "title": "Auditorium A" },
|
||||
{ "id": "b", "title": "Auditorium B", "eventColor": "green" },
|
||||
{ "id": "c", "title": "Auditorium C", "eventColor": "orange" },
|
||||
{ "id": "d", "title": "Auditorium D", "children": [
|
||||
{ "id": "d1", "title": "Room D1" },
|
||||
{ "id": "d2", "title": "Room D2" }
|
||||
] },
|
||||
{ "id": "e", "title": "Auditorium E" },
|
||||
{ "id": "f", "title": "Auditorium F", "eventColor": "red" },
|
||||
{ "id": "g", "title": "Auditorium G" },
|
||||
{ "id": "h", "title": "Auditorium H" },
|
||||
{ "id": "i", "title": "Auditorium I" },
|
||||
{ "id": "j", "title": "Auditorium J" },
|
||||
{ "id": "k", "title": "Auditorium K" },
|
||||
{ "id": "l", "title": "Auditorium L" },
|
||||
{ "id": "m", "title": "Auditorium M" },
|
||||
{ "id": "n", "title": "Auditorium N" },
|
||||
{ "id": "o", "title": "Auditorium O" },
|
||||
{ "id": "p", "title": "Auditorium P" },
|
||||
{ "id": "q", "title": "Auditorium Q" },
|
||||
{ "id": "r", "title": "Auditorium R" },
|
||||
{ "id": "s", "title": "Auditorium S" },
|
||||
{ "id": "t", "title": "Auditorium T" },
|
||||
{ "id": "u", "title": "Auditorium U" },
|
||||
{ "id": "v", "title": "Auditorium V" },
|
||||
{ "id": "w", "title": "Auditorium W" },
|
||||
{ "id": "x", "title": "Auditorium X" },
|
||||
{ "id": "y", "title": "Auditorium Y" },
|
||||
{ "id": "z", "title": "Auditorium Z" }
|
||||
]
|
||||
108
front/lib/fullcalendar-scheduler/demos/misc-callbacks.html
Normal file
108
front/lib/fullcalendar-scheduler/demos/misc-callbacks.html
Normal file
@@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<link href='../lib/fullcalendar.min.css' rel='stylesheet' />
|
||||
<link href='../lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
|
||||
<link href='../scheduler.min.css' rel='stylesheet' />
|
||||
<script src='../lib/moment.min.js'></script>
|
||||
<script src='../lib/jquery.min.js'></script>
|
||||
<script src='../lib/fullcalendar.min.js'></script>
|
||||
<script src='../scheduler.min.js'></script>
|
||||
<script>
|
||||
|
||||
$(function() { // document ready
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
now: '2018-04-07',
|
||||
editable: true,
|
||||
aspectRatio: 1.8,
|
||||
scrollTime: '00:00',
|
||||
header: {
|
||||
left: 'today prev,next',
|
||||
center: 'title',
|
||||
right: 'timelineDay,timelineThreeDays,agendaWeek,month'
|
||||
},
|
||||
defaultView: 'timelineDay',
|
||||
views: {
|
||||
timelineThreeDays: {
|
||||
type: 'timeline',
|
||||
duration: { days: 3 }
|
||||
}
|
||||
},
|
||||
|
||||
// the point if this demo is to demonstrate dayClick...
|
||||
dayClick: function(date, jsEvent, view, resourceObj) {
|
||||
console.log('dayClick', date.format(), resourceObj);
|
||||
},
|
||||
|
||||
resourceLabelText: 'Rooms',
|
||||
resources: [
|
||||
{ id: 'a', title: 'Auditorium A' },
|
||||
{ id: 'b', title: 'Auditorium B', eventColor: 'green' },
|
||||
{ id: 'c', title: 'Auditorium C', eventColor: 'orange' },
|
||||
{ id: 'd', title: 'Auditorium D', children: [
|
||||
{ id: 'd1', title: 'Room D1' },
|
||||
{ id: 'd2', title: 'Room D2' }
|
||||
] },
|
||||
{ id: 'e', title: 'Auditorium E' },
|
||||
{ id: 'f', title: 'Auditorium F', eventColor: 'red' },
|
||||
{ id: 'g', title: 'Auditorium G' },
|
||||
{ id: 'h', title: 'Auditorium H' },
|
||||
{ id: 'i', title: 'Auditorium I' },
|
||||
{ id: 'j', title: 'Auditorium J' },
|
||||
{ id: 'k', title: 'Auditorium K' },
|
||||
{ id: 'l', title: 'Auditorium L' },
|
||||
{ id: 'm', title: 'Auditorium M' },
|
||||
{ id: 'n', title: 'Auditorium N' },
|
||||
{ id: 'o', title: 'Auditorium O' },
|
||||
{ id: 'p', title: 'Auditorium P' },
|
||||
{ id: 'q', title: 'Auditorium Q' },
|
||||
{ id: 'r', title: 'Auditorium R' },
|
||||
{ id: 's', title: 'Auditorium S' },
|
||||
{ id: 't', title: 'Auditorium T' },
|
||||
{ id: 'u', title: 'Auditorium U' },
|
||||
{ id: 'v', title: 'Auditorium V' },
|
||||
{ id: 'w', title: 'Auditorium W' },
|
||||
{ id: 'x', title: 'Auditorium X' },
|
||||
{ id: 'y', title: 'Auditorium Y' },
|
||||
{ id: 'z', title: 'Auditorium Z' }
|
||||
],
|
||||
events: [
|
||||
{ id: '1', resourceId: 'b', start: '2018-04-07T02:00:00', end: '2018-04-07T07:00:00', title: 'event 1' },
|
||||
{ id: '2', resourceId: 'c', start: '2018-04-07T05:00:00', end: '2018-04-07T22:00:00', title: 'event 2' },
|
||||
{ id: '3', resourceId: 'd', start: '2018-04-06', end: '2018-04-08', title: 'event 3' },
|
||||
{ id: '4', resourceId: 'e', start: '2018-04-07T03:00:00', end: '2018-04-07T08:00:00', title: 'event 4' },
|
||||
{ id: '5', resourceId: 'f', start: '2018-04-07T00:30:00', end: '2018-04-07T02:30:00', title: 'event 5' }
|
||||
]
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
<style>
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#calendar {
|
||||
max-width: 900px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id='calendar'></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
108
front/lib/fullcalendar-scheduler/demos/no-overlap.html
Normal file
108
front/lib/fullcalendar-scheduler/demos/no-overlap.html
Normal file
@@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<link href='../lib/fullcalendar.min.css' rel='stylesheet' />
|
||||
<link href='../lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
|
||||
<link href='../scheduler.min.css' rel='stylesheet' />
|
||||
<script src='../lib/moment.min.js'></script>
|
||||
<script src='../lib/jquery.min.js'></script>
|
||||
<script src='../lib/fullcalendar.min.js'></script>
|
||||
<script src='../scheduler.min.js'></script>
|
||||
<script>
|
||||
|
||||
$(function() { // document ready
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
now: '2018-04-07',
|
||||
editable: true,
|
||||
aspectRatio: 1.8,
|
||||
scrollTime: '00:00',
|
||||
header: {
|
||||
left: 'today prev,next',
|
||||
center: 'title',
|
||||
right: 'timelineDay,timelineThreeDays,agendaWeek,month'
|
||||
},
|
||||
defaultView: 'timelineDay',
|
||||
views: {
|
||||
timelineThreeDays: {
|
||||
type: 'timeline',
|
||||
duration: { days: 3 }
|
||||
}
|
||||
},
|
||||
eventOverlap: false, // will cause the event to take up entire resource height
|
||||
resourceAreaWidth: '25%',
|
||||
resourceLabelText: 'Rooms',
|
||||
resources: [
|
||||
{ id: 'a', title: 'Auditorium A' },
|
||||
{ id: 'b', title: 'Auditorium B', eventColor: 'green' },
|
||||
{ id: 'c', title: 'Auditorium C', eventColor: 'orange' },
|
||||
{ id: 'd', title: 'Auditorium D', children: [
|
||||
{ id: 'd1', title: 'Room D1' },
|
||||
{ id: 'd2', title: 'Room D2' }
|
||||
] },
|
||||
{ id: 'e', title: 'Auditorium E' },
|
||||
{ id: 'f', title: 'Auditorium F', eventColor: 'red' },
|
||||
{ id: 'g', title: 'Auditorium G' },
|
||||
{ id: 'h', title: 'Auditorium H' },
|
||||
{ id: 'i', title: 'Auditorium I' },
|
||||
{ id: 'j', title: 'Auditorium J' },
|
||||
{ id: 'k', title: 'Auditorium K' },
|
||||
{ id: 'l', title: 'Auditorium L' },
|
||||
{ id: 'm', title: 'Auditorium M' },
|
||||
{ id: 'n', title: 'Auditorium N' },
|
||||
{ id: 'o', title: 'Auditorium O' },
|
||||
{ id: 'p', title: 'Auditorium P' },
|
||||
{ id: 'q', title: 'Auditorium Q' },
|
||||
{ id: 'r', title: 'Auditorium R' },
|
||||
{ id: 's', title: 'Auditorium S' },
|
||||
{ id: 't', title: 'Auditorium T' },
|
||||
{ id: 'u', title: 'Auditorium U' },
|
||||
{ id: 'v', title: 'Auditorium V' },
|
||||
{ id: 'w', title: 'Auditorium W' },
|
||||
{ id: 'x', title: 'Auditorium X' },
|
||||
{ id: 'y', title: 'Auditorium Y' },
|
||||
{ id: 'z', title: 'Auditorium Z' }
|
||||
],
|
||||
events: [
|
||||
{ id: '1', resourceId: 'b', start: '2018-04-07T02:00:00', end: '2018-04-07T07:00:00', title: 'event 1' },
|
||||
{ id: '2', resourceId: 'c', start: '2018-04-07T05:00:00', end: '2018-04-07T22:00:00', title: 'event 2' },
|
||||
{ id: '3', resourceId: 'd', start: '2018-04-06', end: '2018-04-08', title: 'event 3' },
|
||||
{ id: '4', resourceId: 'e', start: '2018-04-07T03:00:00', end: '2018-04-07T08:00:00', title: 'event 4' },
|
||||
{ id: '5', resourceId: 'f', start: '2018-04-07T00:30:00', end: '2018-04-07T02:30:00', title: 'event 5' }
|
||||
]
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
<style>
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#calendar {
|
||||
max-width: 900px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
Things render a bit differently with <code>eventOverlap:false</code>
|
||||
</p>
|
||||
|
||||
<div id='calendar'></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
112
front/lib/fullcalendar-scheduler/demos/ordering.html
Normal file
112
front/lib/fullcalendar-scheduler/demos/ordering.html
Normal file
@@ -0,0 +1,112 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<link href='../lib/fullcalendar.min.css' rel='stylesheet' />
|
||||
<link href='../lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
|
||||
<link href='../scheduler.min.css' rel='stylesheet' />
|
||||
<script src='../lib/moment.min.js'></script>
|
||||
<script src='../lib/jquery.min.js'></script>
|
||||
<script src='../lib/fullcalendar.min.js'></script>
|
||||
<script src='../scheduler.min.js'></script>
|
||||
<script>
|
||||
|
||||
$(function() { // document ready
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
now: '2018-04-07',
|
||||
editable: true,
|
||||
aspectRatio: 1.8,
|
||||
scrollTime: '00:00',
|
||||
header: {
|
||||
left: 'today prev,next',
|
||||
center: 'title',
|
||||
right: 'timelineDay,timelineThreeDays,agendaWeek,month'
|
||||
},
|
||||
defaultView: 'timelineDay',
|
||||
views: {
|
||||
timelineThreeDays: {
|
||||
type: 'timeline',
|
||||
duration: { days: 3 }
|
||||
}
|
||||
},
|
||||
resourceAreaWidth: '30%',
|
||||
resourceColumns: [
|
||||
{
|
||||
labelText: 'Room',
|
||||
field: 'title'
|
||||
},
|
||||
{
|
||||
labelText: 'Occupancy',
|
||||
field: 'occupancy'
|
||||
}
|
||||
],
|
||||
resourceOrder: '-occupancy,title', // when occupancy tied, order by title
|
||||
resources: [
|
||||
{ id: 'a', title: 'Auditorium A', occupancy: 40 },
|
||||
{ id: 'b', title: 'Auditorium B', occupancy: 40, eventColor: 'green' },
|
||||
{ id: 'c', title: 'Auditorium C', occupancy: 40, eventColor: 'orange' },
|
||||
{ id: 'd', title: 'Auditorium D', occupancy: 40 },
|
||||
{ id: 'e', title: 'Auditorium E', occupancy: 40 },
|
||||
{ id: 'f', title: 'Auditorium F', occupancy: 40, eventColor: 'red' },
|
||||
{ id: 'g', title: 'Auditorium G', occupancy: 40 },
|
||||
{ id: 'h', title: 'Auditorium H', occupancy: 40 },
|
||||
{ id: 'i', title: 'Auditorium I', occupancy: 50 },
|
||||
{ id: 'j', title: 'Auditorium J', occupancy: 50 },
|
||||
{ id: 'k', title: 'Auditorium K', occupancy: 40 },
|
||||
{ id: 'l', title: 'Auditorium L', occupancy: 40 },
|
||||
{ id: 'm', title: 'Auditorium M', occupancy: 40 },
|
||||
{ id: 'n', title: 'Auditorium N', occupancy: 80 },
|
||||
{ id: 'o', title: 'Auditorium O', occupancy: 80 },
|
||||
{ id: 'p', title: 'Auditorium P', occupancy: 40 },
|
||||
{ id: 'q', title: 'Auditorium Q', occupancy: 40 },
|
||||
{ id: 'r', title: 'Auditorium R', occupancy: 40 },
|
||||
{ id: 's', title: 'Auditorium S', occupancy: 40 },
|
||||
{ id: 't', title: 'Auditorium T', occupancy: 40 },
|
||||
{ id: 'u', title: 'Auditorium U', occupancy: 40 },
|
||||
{ id: 'v', title: 'Auditorium V', occupancy: 40 },
|
||||
{ id: 'w', title: 'Auditorium W', occupancy: 40 },
|
||||
{ id: 'x', title: 'Auditorium X', occupancy: 40 },
|
||||
{ id: 'y', title: 'Auditorium Y', occupancy: 40 },
|
||||
{ id: 'z', title: 'Auditorium Z', occupancy: 40 }
|
||||
],
|
||||
events: [
|
||||
{ id: '1', resourceId: 'b', start: '2018-04-07T02:00:00', end: '2018-04-07T07:00:00', title: 'event 1' },
|
||||
{ id: '2', resourceId: 'c', start: '2018-04-07T05:00:00', end: '2018-04-07T22:00:00', title: 'event 2' },
|
||||
{ id: '3', resourceId: 'd', start: '2018-04-06', end: '2018-04-08', title: 'event 3' },
|
||||
{ id: '4', resourceId: 'e', start: '2018-04-07T03:00:00', end: '2018-04-07T08:00:00', title: 'event 4' },
|
||||
{ id: '5', resourceId: 'f', start: '2018-04-07T00:30:00', end: '2018-04-07T02:30:00', title: 'event 5' }
|
||||
]
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
<style>
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#calendar {
|
||||
max-width: 900px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Ordered by occupancy (descending)</p>
|
||||
|
||||
<div id='calendar'></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
104
front/lib/fullcalendar-scheduler/demos/rendering-hooks.html
Normal file
104
front/lib/fullcalendar-scheduler/demos/rendering-hooks.html
Normal file
@@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<link href='../lib/fullcalendar.min.css' rel='stylesheet' />
|
||||
<link href='../lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
|
||||
<link href='../scheduler.min.css' rel='stylesheet' />
|
||||
<script src='../lib/moment.min.js'></script>
|
||||
<script src='../lib/jquery.min.js'></script>
|
||||
<script src='../lib/fullcalendar.min.js'></script>
|
||||
<script src='../scheduler.min.js'></script>
|
||||
<script>
|
||||
|
||||
$(function() { // document ready
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
now: '2018-04-07',
|
||||
editable: true, // enable draggable events
|
||||
aspectRatio: 1.8,
|
||||
scrollTime: '00:00', // undo default 6am scrollTime
|
||||
header: {
|
||||
left: 'today prev,next',
|
||||
center: 'title',
|
||||
right: 'timelineDay,timelineThreeDays,agendaWeek,month'
|
||||
},
|
||||
defaultView: 'timelineDay',
|
||||
views: {
|
||||
timelineThreeDays: {
|
||||
type: 'timeline',
|
||||
duration: { days: 3 }
|
||||
}
|
||||
},
|
||||
resourceLabelText: 'Rooms',
|
||||
resourceText: function(resource) {
|
||||
return 'Auditorium ' + ('' + resource.id).toUpperCase();
|
||||
},
|
||||
resourceRender: function(resource, leftCells, rightCells) {
|
||||
if (resource.id == 'h') {
|
||||
leftCells.css('background-color', 'rgb(255, 243, 206)');
|
||||
rightCells.css('background-color', 'rgba(255, 243, 206, .5)');
|
||||
}
|
||||
},
|
||||
resources: [
|
||||
{ id: 'a' },
|
||||
{ id: 'b', eventColor: 'green' },
|
||||
{ id: 'c', eventColor: 'orange' },
|
||||
{ id: 'd' },
|
||||
{ id: 'e' },
|
||||
{ id: 'f', eventColor: 'red' },
|
||||
{ id: 'g' },
|
||||
{ id: 'h' },
|
||||
{ id: 'i' },
|
||||
{ id: 'j' },
|
||||
{ id: 'k' },
|
||||
{ id: 'l' },
|
||||
{ id: 'm' },
|
||||
{ id: 'n' },
|
||||
{ id: 'o' },
|
||||
{ id: 'p' },
|
||||
{ id: 'q' },
|
||||
{ id: 'r' },
|
||||
{ id: 's' },
|
||||
{ id: 't' },
|
||||
{ id: 'u' },
|
||||
{ id: 'v' },
|
||||
{ id: 'w' },
|
||||
{ id: 'x' },
|
||||
{ id: 'y' },
|
||||
{ id: 'z' }
|
||||
],
|
||||
events: [
|
||||
{ id: '1', resourceId: 'b', start: '2018-04-07T02:00:00', end: '2018-04-07T07:00:00', title: 'event 1' },
|
||||
{ id: '2', resourceId: 'c', start: '2018-04-07T05:00:00', end: '2018-04-07T22:00:00', title: 'event 2' },
|
||||
{ id: '3', resourceId: 'd', start: '2018-04-06', end: '2018-04-08', title: 'event 3' },
|
||||
{ id: '4', resourceId: 'e', start: '2018-04-07T03:00:00', end: '2018-04-07T08:00:00', title: 'event 4' },
|
||||
{ id: '5', resourceId: 'f', start: '2018-04-07T00:30:00', end: '2018-04-07T02:30:00', title: 'event 5' }
|
||||
]
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
<style>
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#calendar {
|
||||
max-width: 900px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id='calendar'></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
104
front/lib/fullcalendar-scheduler/demos/scale.html
Normal file
104
front/lib/fullcalendar-scheduler/demos/scale.html
Normal file
@@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<link href='../lib/fullcalendar.min.css' rel='stylesheet' />
|
||||
<link href='../lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
|
||||
<link href='../scheduler.min.css' rel='stylesheet' />
|
||||
<script src='../lib/moment.min.js'></script>
|
||||
<script src='../lib/jquery.min.js'></script>
|
||||
<script src='../lib/fullcalendar.min.js'></script>
|
||||
<script src='../scheduler.min.js'></script>
|
||||
<script>
|
||||
|
||||
$(function() { // document ready
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
now: '2018-04-07',
|
||||
editable: true,
|
||||
aspectRatio: 1.8,
|
||||
scrollTime: '00:00',
|
||||
header: {
|
||||
left: 'today prev,next',
|
||||
center: 'title',
|
||||
right: 'timelineDay,timelineTenDay,timelineMonth,timelineYear'
|
||||
},
|
||||
defaultView: 'timelineDay',
|
||||
views: {
|
||||
timelineDay: {
|
||||
buttonText: ':15 slots',
|
||||
slotDuration: '00:15'
|
||||
},
|
||||
timelineTenDay: {
|
||||
type: 'timeline',
|
||||
duration: { days: 10 }
|
||||
}
|
||||
},
|
||||
navLinks: true,
|
||||
resourceAreaWidth: '25%',
|
||||
resourceLabelText: 'Rooms',
|
||||
resources: [
|
||||
{ id: 'a', title: 'Auditorium A' },
|
||||
{ id: 'b', title: 'Auditorium B', eventColor: 'green' },
|
||||
{ id: 'c', title: 'Auditorium C', eventColor: 'orange' },
|
||||
{ id: 'd', title: 'Auditorium D', children: [
|
||||
{ id: 'd1', title: 'Room D1' },
|
||||
{ id: 'd2', title: 'Room D2' }
|
||||
] },
|
||||
{ id: 'e', title: 'Auditorium E' },
|
||||
{ id: 'f', title: 'Auditorium F', eventColor: 'red' },
|
||||
{ id: 'g', title: 'Auditorium G' },
|
||||
{ id: 'h', title: 'Auditorium H' },
|
||||
{ id: 'i', title: 'Auditorium I' },
|
||||
{ id: 'j', title: 'Auditorium J' },
|
||||
{ id: 'k', title: 'Auditorium K' },
|
||||
{ id: 'l', title: 'Auditorium L' },
|
||||
{ id: 'm', title: 'Auditorium M' },
|
||||
{ id: 'n', title: 'Auditorium N' },
|
||||
{ id: 'o', title: 'Auditorium O' },
|
||||
{ id: 'p', title: 'Auditorium P' },
|
||||
{ id: 'q', title: 'Auditorium Q' },
|
||||
{ id: 'r', title: 'Auditorium R' },
|
||||
{ id: 's', title: 'Auditorium S' },
|
||||
{ id: 't', title: 'Auditorium T' },
|
||||
{ id: 'u', title: 'Auditorium U' },
|
||||
{ id: 'v', title: 'Auditorium V' },
|
||||
{ id: 'w', title: 'Auditorium W' },
|
||||
{ id: 'x', title: 'Auditorium X' },
|
||||
{ id: 'y', title: 'Auditorium Y' },
|
||||
{ id: 'z', title: 'Auditorium Z' }
|
||||
],
|
||||
events: [
|
||||
{ id: '1', resourceId: 'b', start: '2018-04-07T02:00:00', end: '2018-04-07T07:00:00', title: 'event 1' },
|
||||
{ id: '2', resourceId: 'c', start: '2018-04-07T05:00:00', end: '2018-04-07T22:00:00', title: 'event 2' },
|
||||
{ id: '3', resourceId: 'd', start: '2018-04-06', end: '2018-04-08', title: 'event 3' },
|
||||
{ id: '4', resourceId: 'e', start: '2018-04-07T03:00:00', end: '2018-04-07T08:00:00', title: 'event 4' },
|
||||
{ id: '5', resourceId: 'f', start: '2018-04-07T00:30:00', end: '2018-04-07T02:30:00', title: 'event 5' }
|
||||
]
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
<style>
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#calendar {
|
||||
max-width: 900px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id='calendar'></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
128
front/lib/fullcalendar-scheduler/demos/selectable.html
Normal file
128
front/lib/fullcalendar-scheduler/demos/selectable.html
Normal file
@@ -0,0 +1,128 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<link href='../lib/fullcalendar.min.css' rel='stylesheet' />
|
||||
<link href='../lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
|
||||
<link href='../scheduler.min.css' rel='stylesheet' />
|
||||
<script src='../lib/moment.min.js'></script>
|
||||
<script src='../lib/jquery.min.js'></script>
|
||||
<script src='../lib/fullcalendar.min.js'></script>
|
||||
<script src='../scheduler.min.js'></script>
|
||||
<script>
|
||||
|
||||
$(function() { // document ready
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
now: '2018-04-07',
|
||||
selectable: true,
|
||||
selectHelper: true,
|
||||
editable: true, // enable draggable events
|
||||
aspectRatio: 1.8,
|
||||
scrollTime: '00:00', // undo default 6am scrollTime
|
||||
header: {
|
||||
left: 'today prev,next',
|
||||
center: 'title',
|
||||
right: 'timelineDay,timelineThreeDays,agendaWeek,month'
|
||||
},
|
||||
defaultView: 'timelineDay',
|
||||
views: {
|
||||
timelineThreeDays: {
|
||||
type: 'timeline',
|
||||
duration: { days: 3 }
|
||||
}
|
||||
},
|
||||
resourceLabelText: 'Rooms',
|
||||
resources: [
|
||||
{ id: 'a', title: 'Auditorium A' },
|
||||
{ id: 'b', title: 'Auditorium B', eventColor: 'green' },
|
||||
{ id: 'c', title: 'Auditorium C', eventColor: 'orange' },
|
||||
{ id: 'd', title: 'Auditorium D', children: [
|
||||
{ id: 'd1', title: 'Room D1' },
|
||||
{ id: 'd2', title: 'Room D2' }
|
||||
] },
|
||||
{ id: 'e', title: 'Auditorium E' },
|
||||
{ id: 'f', title: 'Auditorium F', eventColor: 'red' },
|
||||
{ id: 'g', title: 'Auditorium G' },
|
||||
{ id: 'h', title: 'Auditorium H' },
|
||||
{ id: 'i', title: 'Auditorium I' },
|
||||
{ id: 'j', title: 'Auditorium J' },
|
||||
{ id: 'k', title: 'Auditorium K' },
|
||||
{ id: 'l', title: 'Auditorium L' },
|
||||
{ id: 'm', title: 'Auditorium M' },
|
||||
{ id: 'n', title: 'Auditorium N' },
|
||||
{ id: 'o', title: 'Auditorium O' },
|
||||
{ id: 'p', title: 'Auditorium P' },
|
||||
{ id: 'q', title: 'Auditorium Q' },
|
||||
{ id: 'r', title: 'Auditorium R' },
|
||||
{ id: 's', title: 'Auditorium S' },
|
||||
{ id: 't', title: 'Auditorium T' },
|
||||
{ id: 'u', title: 'Auditorium U' },
|
||||
{ id: 'v', title: 'Auditorium V' },
|
||||
{ id: 'w', title: 'Auditorium W' },
|
||||
{ id: 'x', title: 'Auditorium X' },
|
||||
{ id: 'y', title: 'Auditorium Y' },
|
||||
{ id: 'z', title: 'Auditorium Z' }
|
||||
],
|
||||
events: [
|
||||
{ id: '1', resourceId: 'b', start: '2018-04-07T02:00:00', end: '2018-04-07T07:00:00', title: 'event 1' },
|
||||
{ id: '2', resourceId: 'c', start: '2018-04-07T05:00:00', end: '2018-04-07T22:00:00', title: 'event 2' },
|
||||
{ id: '3', resourceId: 'd', start: '2018-04-06', end: '2018-04-08', title: 'event 3' },
|
||||
{ id: '4', resourceId: 'e', start: '2018-04-07T03:00:00', end: '2018-04-07T08:00:00', title: 'event 4' },
|
||||
{ id: '5', resourceId: 'f', start: '2018-04-07T00:30:00', end: '2018-04-07T02:30:00', title: 'event 5' }
|
||||
],
|
||||
select: function(start, end, jsEvent, view, resource) {
|
||||
console.log(
|
||||
'select callback',
|
||||
start.format(),
|
||||
end.format(),
|
||||
resource ? resource.id : '(no resource)'
|
||||
);
|
||||
},
|
||||
dayClick: function(date, jsEvent, view, resource) {
|
||||
console.log(
|
||||
'dayClick',
|
||||
date.format(),
|
||||
resource ? resource.id : '(no resource)'
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
$('#select-G').on('click', function() {
|
||||
$('#calendar').fullCalendar('select', '2018-04-07T02:00:00', '2018-04-07T07:00:00', 'g');
|
||||
});
|
||||
|
||||
$('#select-unspecified').on('click', function() {
|
||||
$('#calendar').fullCalendar('select', '2018-04-07T02:00:00', '2018-04-07T07:00:00');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
<style>
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#calendar {
|
||||
max-width: 900px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id='calendar'></div>
|
||||
|
||||
<p style='text-align:center'>
|
||||
<button id='select-G'>select G</button>
|
||||
<button id='select-unspecified'>select w/o a resource</button>
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
98
front/lib/fullcalendar-scheduler/demos/simple.html
Normal file
98
front/lib/fullcalendar-scheduler/demos/simple.html
Normal file
@@ -0,0 +1,98 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<link href='../lib/fullcalendar.min.css' rel='stylesheet' />
|
||||
<link href='../lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
|
||||
<link href='../scheduler.min.css' rel='stylesheet' />
|
||||
<script src='../lib/moment.min.js'></script>
|
||||
<script src='../lib/jquery.min.js'></script>
|
||||
<script src='../lib/fullcalendar.min.js'></script>
|
||||
<script src='../scheduler.min.js'></script>
|
||||
<script>
|
||||
|
||||
$(function() { // document ready
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
now: '2018-04-07',
|
||||
editable: true, // enable draggable events
|
||||
aspectRatio: 1.8,
|
||||
scrollTime: '00:00', // undo default 6am scrollTime
|
||||
header: {
|
||||
left: 'today prev,next',
|
||||
center: 'title',
|
||||
right: 'timelineDay,timelineThreeDays,agendaWeek,month,listWeek'
|
||||
},
|
||||
defaultView: 'timelineDay',
|
||||
views: {
|
||||
timelineThreeDays: {
|
||||
type: 'timeline',
|
||||
duration: { days: 3 }
|
||||
}
|
||||
},
|
||||
resourceLabelText: 'Rooms',
|
||||
resources: [
|
||||
{ id: 'a', title: 'Auditorium A' },
|
||||
{ id: 'b', title: 'Auditorium B', eventColor: 'green' },
|
||||
{ id: 'c', title: 'Auditorium C', eventColor: 'orange' },
|
||||
{ id: 'd', title: 'Auditorium D', children: [
|
||||
{ id: 'd1', title: 'Room D1' },
|
||||
{ id: 'd2', title: 'Room D2' }
|
||||
] },
|
||||
{ id: 'e', title: 'Auditorium E' },
|
||||
{ id: 'f', title: 'Auditorium F', eventColor: 'red' },
|
||||
{ id: 'g', title: 'Auditorium G' },
|
||||
{ id: 'h', title: 'Auditorium H' },
|
||||
{ id: 'i', title: 'Auditorium I' },
|
||||
{ id: 'j', title: 'Auditorium J' },
|
||||
{ id: 'k', title: 'Auditorium K' },
|
||||
{ id: 'l', title: 'Auditorium L' },
|
||||
{ id: 'm', title: 'Auditorium M' },
|
||||
{ id: 'n', title: 'Auditorium N' },
|
||||
{ id: 'o', title: 'Auditorium O' },
|
||||
{ id: 'p', title: 'Auditorium P' },
|
||||
{ id: 'q', title: 'Auditorium Q' },
|
||||
{ id: 'r', title: 'Auditorium R' },
|
||||
{ id: 's', title: 'Auditorium S' },
|
||||
{ id: 't', title: 'Auditorium T' },
|
||||
{ id: 'u', title: 'Auditorium U' },
|
||||
{ id: 'v', title: 'Auditorium V' },
|
||||
{ id: 'w', title: 'Auditorium W' },
|
||||
{ id: 'x', title: 'Auditorium X' },
|
||||
{ id: 'y', title: 'Auditorium Y' },
|
||||
{ id: 'z', title: 'Auditorium Z' }
|
||||
],
|
||||
events: [
|
||||
{ id: '1', resourceId: 'b', start: '2018-04-07T02:00:00', end: '2018-04-07T07:00:00', title: 'event 1' },
|
||||
{ id: '2', resourceId: 'c', start: '2018-04-07T05:00:00', end: '2018-04-07T22:00:00', title: 'event 2' },
|
||||
{ id: '3', resourceId: 'd', start: '2018-04-06', end: '2018-04-08', title: 'event 3' },
|
||||
{ id: '4', resourceId: 'e', start: '2018-04-07T03:00:00', end: '2018-04-07T08:00:00', title: 'event 4' },
|
||||
{ id: '5', resourceId: 'f', start: '2018-04-07T00:30:00', end: '2018-04-07T02:30:00', title: 'event 5' }
|
||||
]
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
<style>
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#calendar {
|
||||
max-width: 900px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id='calendar'></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
227
front/lib/fullcalendar-scheduler/demos/themes.html
Normal file
227
front/lib/fullcalendar-scheduler/demos/themes.html
Normal file
@@ -0,0 +1,227 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<link href='https://use.fontawesome.com/releases/v5.0.6/css/all.css' rel='stylesheet'>
|
||||
<link href='../lib/fullcalendar.min.css' rel='stylesheet' />
|
||||
<link href='../lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
|
||||
<link href='../scheduler.min.css' rel='stylesheet' />
|
||||
<script src='../lib/moment.min.js'></script>
|
||||
<script src='../lib/jquery.min.js'></script>
|
||||
<script src='../lib/fullcalendar.min.js'></script>
|
||||
<script src='../scheduler.min.js'></script>
|
||||
<script src='js/theme-chooser.js'></script>
|
||||
<script>
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
initThemeChooser({
|
||||
|
||||
init: function(themeSystem) {
|
||||
$('#calendar').fullCalendar({
|
||||
themeSystem: themeSystem,
|
||||
now: '2018-04-07',
|
||||
editable: true, // enable draggable events
|
||||
aspectRatio: 1.8,
|
||||
scrollTime: '00:00', // undo default 6am scrollTime
|
||||
header: {
|
||||
left: 'today prev,next',
|
||||
center: 'title',
|
||||
right: 'timelineDay,timelineThreeDays,agendaWeek,month,listWeek'
|
||||
},
|
||||
defaultView: 'timelineDay',
|
||||
views: {
|
||||
timelineThreeDays: {
|
||||
type: 'timeline',
|
||||
duration: { days: 3 }
|
||||
}
|
||||
},
|
||||
resourceLabelText: 'Rooms',
|
||||
resources: [
|
||||
{ id: 'a', title: 'Auditorium A' },
|
||||
{ id: 'b', title: 'Auditorium B', eventColor: 'green' },
|
||||
{ id: 'c', title: 'Auditorium C', eventColor: 'orange' },
|
||||
{ id: 'd', title: 'Auditorium D', children: [
|
||||
{ id: 'd1', title: 'Room D1' },
|
||||
{ id: 'd2', title: 'Room D2' }
|
||||
] },
|
||||
{ id: 'e', title: 'Auditorium E' },
|
||||
{ id: 'f', title: 'Auditorium F', eventColor: 'red' },
|
||||
{ id: 'g', title: 'Auditorium G' },
|
||||
{ id: 'h', title: 'Auditorium H' },
|
||||
{ id: 'i', title: 'Auditorium I' },
|
||||
{ id: 'j', title: 'Auditorium J' },
|
||||
{ id: 'k', title: 'Auditorium K' },
|
||||
{ id: 'l', title: 'Auditorium L' },
|
||||
{ id: 'm', title: 'Auditorium M' },
|
||||
{ id: 'n', title: 'Auditorium N' },
|
||||
{ id: 'o', title: 'Auditorium O' },
|
||||
{ id: 'p', title: 'Auditorium P' },
|
||||
{ id: 'q', title: 'Auditorium Q' },
|
||||
{ id: 'r', title: 'Auditorium R' },
|
||||
{ id: 's', title: 'Auditorium S' },
|
||||
{ id: 't', title: 'Auditorium T' },
|
||||
{ id: 'u', title: 'Auditorium U' },
|
||||
{ id: 'v', title: 'Auditorium V' },
|
||||
{ id: 'w', title: 'Auditorium W' },
|
||||
{ id: 'x', title: 'Auditorium X' },
|
||||
{ id: 'y', title: 'Auditorium Y' },
|
||||
{ id: 'z', title: 'Auditorium Z' }
|
||||
],
|
||||
events: [
|
||||
{ id: '1', resourceId: 'b', start: '2018-04-07T02:00:00', end: '2018-04-07T07:00:00', title: 'event 1' },
|
||||
{ id: '2', resourceId: 'c', start: '2018-04-07T05:00:00', end: '2018-04-07T22:00:00', title: 'event 2' },
|
||||
{ id: '3', resourceId: 'd', start: '2018-04-06', end: '2018-04-08', title: 'event 3' },
|
||||
{ id: '4', resourceId: 'e', start: '2018-04-07T03:00:00', end: '2018-04-07T08:00:00', title: 'event 4' },
|
||||
{ id: '5', resourceId: 'f', start: '2018-04-07T00:30:00', end: '2018-04-07T02:30:00', title: 'event 5' }
|
||||
]
|
||||
});
|
||||
},
|
||||
|
||||
change: function(themeSystem) {
|
||||
$('#calendar').fullCalendar('option', 'themeSystem', themeSystem);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
<style>
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#top,
|
||||
#calendar.fc-unthemed {
|
||||
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
|
||||
}
|
||||
|
||||
#top {
|
||||
background: #eee;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 0 10px;
|
||||
line-height: 40px;
|
||||
font-size: 12px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#top .selector {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#top select {
|
||||
font: inherit; /* mock what Boostrap does, don't compete */
|
||||
}
|
||||
|
||||
.left { float: left }
|
||||
.right { float: right }
|
||||
.clear { clear: both }
|
||||
|
||||
#calendar {
|
||||
max-width: 900px;
|
||||
margin: 40px auto;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id='top'>
|
||||
|
||||
<div class='left'>
|
||||
|
||||
<div id='theme-system-selector' class='selector'>
|
||||
Theme System:
|
||||
|
||||
<select>
|
||||
<option value='bootstrap4' selected>Bootstrap 4</option>
|
||||
<option value='bootstrap3'>Bootstrap 3</option>
|
||||
<option value='jquery-ui'>jQuery UI</option>
|
||||
<option value='standard'>unthemed</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div data-theme-system="bootstrap3" class='selector' style='display:none'>
|
||||
Theme Name:
|
||||
|
||||
<select>
|
||||
<option value='' selected>Default</option>
|
||||
<option value='cosmo'>Cosmo</option>
|
||||
<option value='cyborg'>Cyborg</option>
|
||||
<option value='darkly'>Darkly</option>
|
||||
<option value='flatly'>Flatly</option>
|
||||
<option value='journal'>Journal</option>
|
||||
<option value='lumen'>Lumen</option>
|
||||
<option value='paper'>Paper</option>
|
||||
<option value='readable'>Readable</option>
|
||||
<option value='sandstone'>Sandstone</option>
|
||||
<option value='simplex'>Simplex</option>
|
||||
<option value='slate'>Slate</option>
|
||||
<option value='solar'>Solar</option>
|
||||
<option value='spacelab'>Spacelab</option>
|
||||
<option value='superhero'>Superhero</option>
|
||||
<option value='united'>United</option>
|
||||
<option value='yeti'>Yeti</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div data-theme-system="jquery-ui" class='selector' style='display:none'>
|
||||
Theme Name:
|
||||
|
||||
<select>
|
||||
<option value='black-tie'>Black Tie</option>
|
||||
<option value='blitzer'>Blitzer</option>
|
||||
<option value='cupertino' selected>Cupertino</option>
|
||||
<option value='dark-hive'>Dark Hive</option>
|
||||
<option value='dot-luv'>Dot Luv</option>
|
||||
<option value='eggplant'>Eggplant</option>
|
||||
<option value='excite-bike'>Excite Bike</option>
|
||||
<option value='flick'>Flick</option>
|
||||
<option value='hot-sneaks'>Hot Sneaks</option>
|
||||
<option value='humanity'>Humanity</option>
|
||||
<option value='le-frog'>Le Frog</option>
|
||||
<option value='mint-choc'>Mint Choc</option>
|
||||
<option value='overcast'>Overcast</option>
|
||||
<option value='pepper-grinder'>Pepper Grinder</option>
|
||||
<option value='redmond'>Redmond</option>
|
||||
<option value='smoothness'>Smoothness</option>
|
||||
<option value='south-street'>South Street</option>
|
||||
<option value='start'>Start</option>
|
||||
<option value='sunny'>Sunny</option>
|
||||
<option value='swanky-purse'>Swanky Purse</option>
|
||||
<option value='trontastic'>Trontastic</option>
|
||||
<option value='ui-darkness'>UI Darkness</option>
|
||||
<option value='ui-lightness'>UI Lightness</option>
|
||||
<option value='vader'>Vader</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<span id='loading' style='display:none'>loading theme...</span>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='right'>
|
||||
<span class='credits' data-credit-id='bootstrap-standard' style='display:none'>
|
||||
<a href='https://getbootstrap.com/docs/3.3/' target='_blank'>Theme by Bootstrap</a>
|
||||
</span>
|
||||
<span class='credits' data-credit-id='bootstrap-custom' style='display:none'>
|
||||
<a href='https://bootswatch.com/' target='_blank'>Theme by Bootswatch</a>
|
||||
</span>
|
||||
<span class='credits' data-credit-id='jquery-ui' style='display:none'>
|
||||
<a href='http://jqueryui.com/themeroller/' target='_blank'>Theme by jQuery UI</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class='clear'></div>
|
||||
</div>
|
||||
|
||||
<div id='calendar'></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,99 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<link href='../lib/fullcalendar.min.css' rel='stylesheet' />
|
||||
<link href='../lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
|
||||
<link href='../scheduler.min.css' rel='stylesheet' />
|
||||
<script src='../lib/moment.min.js'></script>
|
||||
<script src='../lib/jquery.min.js'></script>
|
||||
<script src='../lib/fullcalendar.min.js'></script>
|
||||
<script src='../scheduler.min.js'></script>
|
||||
<script>
|
||||
|
||||
$(function() { // document ready
|
||||
|
||||
$('#calendar').fullCalendar({
|
||||
defaultView: 'agendaDay',
|
||||
defaultDate: '2018-04-07',
|
||||
editable: true,
|
||||
selectable: true,
|
||||
eventLimit: true, // allow "more" link when too many events
|
||||
header: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'agendaDay,agendaTwoDay,agendaWeek,month'
|
||||
},
|
||||
views: {
|
||||
agendaTwoDay: {
|
||||
type: 'agenda',
|
||||
duration: { days: 2 },
|
||||
|
||||
// views that are more than a day will NOT do this behavior by default
|
||||
// so, we need to explicitly enable it
|
||||
groupByResource: true
|
||||
|
||||
//// uncomment this line to group by day FIRST with resources underneath
|
||||
//groupByDateAndResource: true
|
||||
}
|
||||
},
|
||||
|
||||
//// uncomment this line to hide the all-day slot
|
||||
//allDaySlot: false,
|
||||
|
||||
resources: [
|
||||
{ id: 'a', title: 'Room A' },
|
||||
{ id: 'b', title: 'Room B', eventColor: 'green' },
|
||||
{ id: 'c', title: 'Room C', eventColor: 'orange' },
|
||||
{ id: 'd', title: 'Room D', eventColor: 'red' }
|
||||
],
|
||||
events: [
|
||||
{ id: '1', resourceId: 'a', start: '2018-04-06', end: '2018-04-08', title: 'event 1' },
|
||||
{ id: '2', resourceId: 'a', start: '2018-04-07T09:00:00', end: '2018-04-07T14:00:00', title: 'event 2' },
|
||||
{ id: '3', resourceId: 'b', start: '2018-04-07T12:00:00', end: '2018-04-08T06:00:00', title: 'event 3' },
|
||||
{ id: '4', resourceId: 'c', start: '2018-04-07T07:30:00', end: '2018-04-07T09:30:00', title: 'event 4' },
|
||||
{ id: '5', resourceId: 'd', start: '2018-04-07T10:00:00', end: '2018-04-07T15:00:00', title: 'event 5' }
|
||||
],
|
||||
|
||||
select: function(start, end, jsEvent, view, resource) {
|
||||
console.log(
|
||||
'select',
|
||||
start.format(),
|
||||
end.format(),
|
||||
resource ? resource.id : '(no resource)'
|
||||
);
|
||||
},
|
||||
dayClick: function(date, jsEvent, view, resource) {
|
||||
console.log(
|
||||
'dayClick',
|
||||
date.format(),
|
||||
resource ? resource.id : '(no resource)'
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
<style>
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#calendar {
|
||||
max-width: 900px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id='calendar'></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user