137 lines
5.2 KiB
HTML
137 lines
5.2 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block content %}
|
|
<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: '/all_events',
|
|
selectable: true,
|
|
selectHelper: true,
|
|
editable: true,
|
|
eventLimit: true,
|
|
select: function (start, end, allDay) {
|
|
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': '{{ user }}', 'start': start, 'end': end},
|
|
dataType: "json",
|
|
success: function (data) {
|
|
calendar.fullCalendar('refetchEvents');
|
|
},
|
|
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) {
|
|
calendar.fullCalendar('refetchEvents');
|
|
},
|
|
error: function (data) {
|
|
calendar.fullCalendar('refetchEvents');
|
|
},
|
|
|
|
});
|
|
},
|
|
eventRender: function (event, element, view)
|
|
{
|
|
$(element).css('width','20%');
|
|
$(element).css('background-color', mycolor(event.title));
|
|
$(element).tooltip({title: event.title});
|
|
},
|
|
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');
|
|
},
|
|
error: function (data) {
|
|
calendar.fullCalendar('refetchEvents');
|
|
}
|
|
});
|
|
},
|
|
|
|
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');
|
|
calendar.fullCalendar('refetchEvents');
|
|
},
|
|
error: function (data) {
|
|
alert('Could not remove');
|
|
}
|
|
});
|
|
}
|
|
},
|
|
|
|
});
|
|
});
|
|
|
|
</script>
|
|
<br/>
|
|
<h2 align="center"><a href="#">Nieuwe Molens Gent -- Fitness calendar</a></h2>
|
|
<br/>
|
|
<div id="calendar"></div>
|
|
<p>
|
|
Klik op de gewenste plaats in de kalender om een nieuwe reservatie toe te voegen. Je username wordt ingevuld als titel van het event.
|
|
</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>
|
|
|
|
</div>
|
|
{% endblock %}
|