I've encountered an issue with implementing my model data into a FullCalendar library template in JavaScript. Despite seeing others do the same successfully, I keep getting errors as the template tags fail to register properly.
<script>
document.addEventListener('DOMContentLoaded', function() {
var Calendar = FullCalendar.Calendar;
var Draggable = FullCalendarInteraction.Draggable;
var containerEl = document.getElementById('external-events');
var calendarEl = document.getElementById('calendar');
var checkbox = document.getElementById('drop-remove');
// initialize the calendar
// -----------------------------------------------------------------
var calendar = new Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'bootstrap', 'interaction' ],
themeSystem: 'bootstrap',
selectable: true,
select: function(info) {
var titleStr = prompt('Enter Title');
var date = new Date(info.startStr + 'T00:00:00'); // will be in local time
if (!isNaN(date.valueOf())) { // valid?
calendar.addEvent({
title: titleStr,
start: date,
allDay: true,
});
}
},
locale: "sv",
header: {
left: 'prev,next today',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
customButtons: {
},
eventClick: function(info) {
alert('Event: ' + info.event.title);
},
editable: true,
droppable: true,
events: [
{% for event in events %}
{
title: "{{ event.name}}",
start: '{{ event.start|date:"Y-m-d" }}',
end: '{{ event.end|date:"Y-m-d" }}',
},
{% endfor %}
],
});
calendar.render();
});
</script>
My challenge lies with the {% for event in events %} loop where the model data does not seem to translate into the JavaScript template correctly. While I can display the data within HTML tags, integrating it into the JavaScript code remains problematic. Would appreciate any assistance on this matter.
The approach taken in these posts appears to be successful: FullCalendar in Django