78 lines
2.9 KiB
HTML
78 lines
2.9 KiB
HTML
{% extends "authorized.html" %}
|
|
{% block links %}
|
|
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.2.0/main.min.css'>
|
|
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.3.0/main.min.css'>
|
|
{% endblock links %}
|
|
{% block center %}
|
|
<h1>Calendar</h1>
|
|
<div class="mh-100">
|
|
<div id="calendar" class="fc"></div>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="eventDetailsModal" tabindex="-1" role="dialog" aria-labelledby="eventDetailsModalTitle"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="eventDetailsModalTitle">Event details</h5>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p id="eventDetailsModalDateRange"></p>
|
|
<p id="eventDetailsModalBody">Cottage request</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock center %}
|
|
{% block scripts %}
|
|
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js'></script>
|
|
<script src='https://cdn.jsdelivr.net/npm/uuid@8.3.2/dist/umd/uuidv4.min.js'></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
var calendarEl = document.getElementById('calendar');
|
|
var calendar = new FullCalendar.Calendar(calendarEl, {
|
|
initialView: 'dayGridMonth',
|
|
themeSystem: 'bootstrap5',
|
|
selectable: true,
|
|
displayEventTime: true,
|
|
displayEventEnd: true,
|
|
slotDuration: { hours: 12 },
|
|
slotLabelInterval: { hours: 24 },
|
|
headerToolbar: {
|
|
left: 'prev,next today',
|
|
center: 'title',
|
|
right: 'dayGridMonth,timeGridWeek,timeGridDay,multiMonthYear'
|
|
},
|
|
eventSources: [
|
|
{% for calendar in calendars %}
|
|
{
|
|
url: '/getevents/{{calendar.name}}',
|
|
color: '{{calendar.colour}}',
|
|
},
|
|
{% endfor %}
|
|
],
|
|
select: function (info) {
|
|
$('#eventDetailsModal').modal('show');
|
|
$('#eventDetailsModalDateRange').text(info.startStr + ' to ' + info.endStr);
|
|
|
|
info.view.calendar.addEvent({
|
|
id: uuidv4(),
|
|
title: 'Cottage request',
|
|
start: info.startStr + 'T14:00:00',
|
|
end: info.endStr + 'T10:00:00',
|
|
allDay: false
|
|
});
|
|
}
|
|
});
|
|
|
|
calendar.render();
|
|
});
|
|
</script>
|
|
{% endblock scripts %} |