由于 javascript 中的错误，我的 FullCalendar 无法正常工作

Question

我有一个问题，我的 javascript 代码在调用 fullCalendar 库时没有执行。 fullCalendar库版本是5.10.1，我的jquery版本是3.6.0。我的日历未按原样显示。

请帮助我或者有人可以指导我我做错了什么？。谢谢你的帮助。

ERROR: jquery-3.6.0.min.js:2 Uncaught TypeError: $(...).fullCalendar is not a function

这是我的 jquery/javascript 脚本

$(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);
    }
  });
});

Answer 1

FullCalendar 5.10.1 不是 jQuery 插件，因此不能像 $("#calendar").fullCalendar(...) 那样初始化。你应该像这样初始化它

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>

由于 javascript 中的错误，我的 FullCalendar 无法正常工作

my FullCalendar is not working due to an error in javascript

javascript

jquery

fullcalendar

fullcalendar-5