162 lines
6.4 KiB
HTML
162 lines
6.4 KiB
HTML
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css"/>
|
|
<link rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css"/>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
|
|
<script>
|
|
function mycolor(str){
|
|
var hash = 0;
|
|
for (var i = 0; i < str.length; i++) {
|
|
hash = str.charCodeAt(i) + ((hash << 5) - hash);
|
|
}
|
|
return "#" + intToRGB(hash);
|
|
}
|
|
|
|
function intToRGB(i){
|
|
var c = (i & 0x00FFFFFF)
|
|
.toString(16)
|
|
.toUpperCase();
|
|
|
|
return "00000".substring(0, 6 - c.length) + c;
|
|
}
|
|
|
|
$(document).ready(function () {
|
|
var calendar = $('#calendar').fullCalendar({
|
|
defaultView: 'agendaWeek',
|
|
allDaySlot: false,
|
|
nowIndicator: true,
|
|
selectMirror: true,
|
|
longPressDelay: 500,
|
|
header: {
|
|
left: 'prev,next today',
|
|
center: 'title',
|
|
right: 'month,agendaWeek,agendaDay'
|
|
},
|
|
events: [
|
|
{% for event in events %}
|
|
{
|
|
title: "{{ event.name}}",
|
|
start: '{{ event.start|date:"Y-m-d H:i" }}',
|
|
end: '{{ event.end|date:"Y-m-d H:i" }}',
|
|
id: '{{ event.id }}',
|
|
backgroundColor: mycolor('{{ event.name }}'),
|
|
},
|
|
{% endfor %}
|
|
],
|
|
selectable: true,
|
|
selectHelper: true,
|
|
editable: true,
|
|
eventLimit: true,
|
|
select: function (start, end, allDay) {
|
|
var title = prompt("Enter Your Name");
|
|
if (title) {
|
|
var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
|
|
var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
|
|
$.ajax({
|
|
type: "GET",
|
|
url: '/add_event',
|
|
data: {'title': title, 'start': start, 'end': end},
|
|
dataType: "json",
|
|
success: function (data) {
|
|
//alert("Added Successfully");
|
|
location.reload();
|
|
},
|
|
failure: function (data) {
|
|
alert('There is a problem!!!');
|
|
}
|
|
});
|
|
}
|
|
},
|
|
eventResize: function (event) {
|
|
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
|
|
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
|
|
var title = event.title;
|
|
var id = event.id;
|
|
$.ajax({
|
|
type: "GET",
|
|
url: '/update',
|
|
data: {'title': title, 'start': start, 'end': end, 'id': id},
|
|
dataType: "json",
|
|
success: function (data) {
|
|
//alert('Event Update');
|
|
},
|
|
failure: function (data) {
|
|
alert('There is a problem!!!');
|
|
}
|
|
});
|
|
},
|
|
|
|
eventAfterRender: function(event, element, view)
|
|
{
|
|
$(element).css('width','20%');
|
|
},
|
|
eventDrop: function (event) {
|
|
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
|
|
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
|
|
var title = event.title;
|
|
var id = event.id;
|
|
$.ajax({
|
|
type: "GET",
|
|
url: '/update',
|
|
data: {'title': title, 'start': start, 'end': end, 'id': id},
|
|
dataType: "json",
|
|
success: function (data) {
|
|
//alert('Event Update');
|
|
},
|
|
failure: function (data) {
|
|
alert('There is a problem!!!');
|
|
}
|
|
});
|
|
},
|
|
|
|
eventClick: function (event) {
|
|
if (confirm("Are you sure you want to remove it?")) {
|
|
var id = event.id;
|
|
$.ajax({
|
|
type: "GET",
|
|
url: '/remove',
|
|
data: {'id': id},
|
|
dataType: "json",
|
|
success: function (data) {
|
|
//alert('Event Removed');
|
|
location.reload();
|
|
},
|
|
failure: function (data) {
|
|
alert('There is a problem!!!');
|
|
}
|
|
});
|
|
}
|
|
},
|
|
|
|
});
|
|
});
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<br/>
|
|
<h2 align="center"><a href="#">Nieuwe Molens Gent -- Fitness calendar</a></h2>
|
|
<br/>
|
|
<div class="container">
|
|
<div id="calendar"></div>
|
|
<p>
|
|
Klik op de gewenste plaats in de kalender om een nieuwe reservatie toe te voegen, vul je naam in in het dialoogvenster.
|
|
</p>
|
|
<p>
|
|
Je kan een reservatie verwijderen door er op te klikken en deletion te confirmeren.
|
|
</p>
|
|
<p>
|
|
Je kan een event verschuiven of verlengen/verkorten door het vast te nemen en te verschuiven.
|
|
</p>
|
|
<p>
|
|
Indien het niet lukt om op een reeds gerserveerd moment een nieuwe reservatie aan te maken,
|
|
</p>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|