I am working on setting up an HTML modal for FullCalendar in Django using various solutions, but unfortunately, the modal does not appear when clicked. I have tried different approaches and consulted resources, but so far, I have not been successful.
Any help or solutions would be greatly appreciated.
Here are the package imports:
<script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/js/bootstrap-modal.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>
<link href='https://unpkg.com/@fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e3808c9186a3d7cdd0cdd2">[email protected]</a>/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f692978f91849f92b6c2d8c5d8c6">[email protected]</a>/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="35415c585052475c5175011b061b05">[email protected]</a>/main.min.css' rel='stylesheet' />
<script src='https://unpkg.com/@fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b2824392e0b7f6578657a">[email protected]</a>/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="462f283223342725322f2928067268756876">[email protected]</a>/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b0d4d1c9d7c2d9d4f0849e839e80">[email protected]</a>/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="17637e7a7270657e73572339243927">[email protected]</a>/main.min.js'></script>
Here is the script section:
<script type='text/javascript'>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
locale: 'pl',
selectable: true,
plugins: ['interaction', 'dayGrid'],
firstDay : 1,
header: {
left: 'today',
center: 'title',
right: 'prev, next',
},
events: [
{% for event in events %}
{
id: '{{event.id}}',
title: '{{event.title}}',
description: '{{event.description}}',
start: '{{event.start_date|date:"Y-m-d"}}',
end: '{{event.end_date|date:"Y-m-d"}}',
color: {% if event.done %}'YellowGreen '{%else%}'SkyBlue '{%endif%},
allDay: false,
},
{% endfor %}
],
eventClick: function(event) {
$('#fullCalModal').modal();
$('#modalTitle').html(event.title);
$('#modalBody').html(event.description);
},
});
calendar.render();
});
</script>
This is the HTML section:
<body>
<div id='calendar'></div>
</body>
<div id="fullCalModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 id="modalTitle" class="modal-title"></h4>
</div>
<div id="modalBody" class="modal-body"></div>
</div>
</div>
</div>