Add modal for new event details
This commit is contained in:
parent
ea0d26e4dd
commit
8b1cb60ef1
|
|
@ -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>
|
||||
|
|
@ -38,12 +59,12 @@
|
|||
{% 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
|
||||
|
|
|
|||
Loading…
Reference in New Issue