chris
/
jean-marie
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
backend/templates/calendar.html
View File

@ -8,6 +8,27 @@
<div class="mh-100"> <div class="mh-100">
<div id="calendar" class="fc"></div> <div id="calendar" class="fc"></div>
</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 %} {% endblock center %}
{% block scripts %} {% block scripts %}
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script> <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>
@ -34,16 +55,16 @@
{ {
url: '/getevents/{{calendar.name}}', url: '/getevents/{{calendar.name}}',
color: '{{calendar.colour}}', color: '{{calendar.colour}}',
}, },
{% endfor %} {% endfor %}
], ],
select: function (info) { select: function (info) {
alert('selected ' + info.startStr + ' to ' + info.endStr); $('#eventDetailsModal').modal('show');
let enddate = new Date(info.endStr); $('#eventDetailsModalDateRange').text(info.startStr + ' to ' + info.endStr);
enddate.setDate(enddate.getDate() - 1);
info.view.calendar.addEvent({ info.view.calendar.addEvent({
id: uuidv4(), id: uuidv4(),
title: 'New Event', title: 'Cottage request',
start: info.startStr + 'T14:00:00', start: info.startStr + 'T14:00:00',
end: info.endStr + 'T10:00:00', end: info.endStr + 'T10:00:00',
allDay: false allDay: false