115 lines
4.6 KiB
HTML
115 lines
4.6 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 %}
|
|
<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">
|
|
<form id="eventDetailsModalForm">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="eventDetailsModalTitle">Request dates</h5>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label for="eventStart">Starting</label>
|
|
<input type="date" class="form-control" id="eventStart" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="eventEnd">Leaving</label>
|
|
<input type="date" class="form-control" id="eventEnd" required>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" id="eventDetailsModalClose" class="btn btn-secondary"
|
|
data-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Send Request</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock center %}
|
|
{% block scripts %}
|
|
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.17/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'
|
|
},
|
|
events: '/calendar/getevents',
|
|
select: function (info) {
|
|
$('#eventStart').val(info.startStr);
|
|
$('#eventEnd').val(info.endStr);
|
|
$('#eventDetailsModal').modal('show');
|
|
}
|
|
});
|
|
|
|
calendar.render();
|
|
|
|
document.getElementById('eventDetailsModalForm').addEventListener('submit', function (e) {
|
|
e.preventDefault();
|
|
var start = document.getElementById('eventStart').value;
|
|
var end = document.getElementById('eventEnd').value;
|
|
|
|
// Prepare the event data
|
|
var eventData = {
|
|
start: start,
|
|
end: end
|
|
};
|
|
|
|
// Send data to the API
|
|
fetch('/calendar/newrequest', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(eventData)
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) throw new Error('Network response was not ok');
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
// Optionally, use the response to add the event to the calendar
|
|
$('#eventDetailsModal').modal('hide');
|
|
calendar.addEvent({
|
|
title: data.title,
|
|
start: data.start,
|
|
end: data.end,
|
|
allDay: data.allDay,
|
|
backgroundColor: data.backgroundColor
|
|
});
|
|
e.target.reset();
|
|
})
|
|
.catch(error => {
|
|
console.error('Error creating event:', error);
|
|
alert('An error occurred while creating the event.');
|
|
});
|
|
});
|
|
|
|
document.getElementById('eventDetailsModalClose').addEventListener('click', function () {
|
|
$('#eventDetailsModal').modal('hide');
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock scripts %} |