Add modal for new event details

This commit is contained in:
Chris Jean-Marie 2024-12-08 17:12:14 +00:00
parent ea0d26e4dd
commit 8b1cb60ef1
1 changed files with 27 additions and 6 deletions

View File

@ -8,6 +8,27 @@
<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>
@ -34,16 +55,16 @@
{
url: '/getevents/{{calendar.name}}',
color: '{{calendar.colour}}',
},
{% endfor %}
},
{% endfor %}
],
select: function (info) {
alert('selected ' + info.startStr + ' to ' + info.endStr);
let enddate = new Date(info.endStr);
enddate.setDate(enddate.getDate() - 1);
$('#eventDetailsModal').modal('show');
$('#eventDetailsModalDateRange').text(info.startStr + ' to ' + info.endStr);
info.view.calendar.addEvent({
id: uuidv4(),
title: 'New Event',
title: 'Cottage request',
start: info.startStr + 'T14:00:00',
end: info.endStr + 'T10:00:00',
allDay: false