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'>&#xe5cd;</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);
    }
  });
});

CodePudding user response：

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/[email protected]/main.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js"></script>

<div id='calendar'></div>