I have an issue, my javascript code is not executing when it calls the fullCalendar library. The fullCalendar library version is 5.10.1, and my jquery version is 3.6.0. My calendar is not shown as is.
Please help me or someone can guide me on what am I doing wrong?. Thank you for your help.
ERROR: jquery-3.6.0.min.js:2 Uncaught TypeError: $(...).fullCalendar is not a function
Here is my jquery/javascript script
$(document).ready(function() {
$("#calendar").fullCalendar({
header: {
left: "prev,next today",
center: "title",
right: "month,agendaWeek,agendaDay"
},
defaultView: "month",
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectHelper: false,
editable: true,
eventLimit: true, // allow "more" link when too many events
select: function(start, end) {
var title = prompt("Event Content:");
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$("#calendar").fullCalendar("renderEvent", eventData, true); // stick? = true
}
$("#calendar").fullCalendar("unselect");
},
eventRender: function(event, element) {
element
.find(".fc-content")
.prepend("<span class='closeon material-icons'></span>");
element.find(".closeon").on("click", function() {
$("#calendar").fullCalendar("removeEvents", event._id);
});
},
eventClick: function(calEvent) {
var title = prompt("Edit Event Content:", calEvent.title);
calEvent.title = title;
$("#calendar").fullCalendar("updateEvent", calEvent);
}
});
});
FullCalendar 5.10.1 is not a jQuery plugin hence it cannot not be initialize like $("#calendar").fullCalendar(...). You should instead initialize it like so
document.addEventListener('DOMContentLoaded', function(){
let calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
// header: {
// left: "prev,next today",
// center: "title",
// right: "month,agendaWeek,agendaDay"
// },
// defaultView: "month",
navLinks: true, // can click day/week names to navigate views
selectable: true,
// selectHelper: false,
editable: true,
// eventLimit: true, // allow "more" link when too many events
select: function(info ) {
let title = prompt("Event Content:");
if (title) {
calendar.addEvent({
title: title,
start: info.startStr,
end: info.endStr
})
}
calendar.unselect();
},
eventDidMount: function(info) {
// code for when event is rendered
},
eventClick: function(info) {
var title = prompt("Edit Event Content:", info.event.title);
// code to update event.
}
});
calendar.render();
});<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.css">
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.js"></script>
<div id='calendar'></div>