fullcalendar v5 getEventByID不是函数

问题描述

  var calendar_element = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendar_element,{
    headerToolbar: {
      left: "prev,next today",center: "title",right: "dayGridMonth,timeGridWeek,timeGridDay"
    },{% if initial_date %}
    initialDate: "{{ initial_date }}",{% endif %}
    initialView: "dayGridMonth",selectable: true,editable: true,eventClick: function(info) {
      info.jsEvent.preventDefault();
      $("#event-info-dialog").data("event_id",info.event.id);
      $("#event-info-dialog-content").html(info.event.title);
      eventInfo.dialog("option","title",info.event.title);
      eventInfo.dialog("open");
      return false;
    },select: function(info) {
      info.jsEvent.preventDefault();
      var do_event = confirm("Create a new event?");
      var delta = info.end - info.start;
      if (do_event) {
        if (delta === 86400000) {
          // 86400000ms is 24 hours - so one day apart - that means a user
          // clicked on a single day - the range method of fullcalendar assumes
          // it to be ending on the following day,hence the value of one. In
          // our use-case we want to just assume a single start date
          var create_url = "{% url 'create-event' %}?start-date=" + info.startStr;
        } else {
          // We subtract one because we're passing this value off to a form where
          // we adjust values based on user expectation; in this case the end
          // bounds of a date range is normally one more than the user selects,// but we are moving it back to the dates the user actually sees.
          var end_date = new Date();
          end_date.setDate(info.end.getDate() - 1);
          var endStr = end_date.toISOString().split('T')[0];
          // Build a url with some intial form data passed as arguments
          var create_url = "{% url 'create-event' %}?start-date=" + info.startStr + "&end-date=" + endStr;
        }
        $("#page-content").hide();
        $("#load-indicator").show();
        window.location = create_url;
      }
    },events: {{ events|safe }}
  });
  calendar.render();

  // Use link-url attribute of action items
  $(document).on("click",".cancel-event",function(e){
    var that = $(this);
    e.preventDefault();
    e.stopPropagation();
    var cancel_link = that.attr('href');
    var uuid = that.attr('uuid');
    event = calendar.getEventByID(uuid);
    var do_delete = confirm("Are you sure you want to cancel this event?");
    if (do_delete) {
      $.ajax({
        url: cancel_link,type: "DELETE",data: {"csrfmiddlewaretoken": "{{ csrf_token }}"},dataType: "json",beforeSend: function(xhr) {
          xhr.setRequestHeader("X-CSRFToken","{{ csrf_token }}");
        },success: function(result) {
          if (result["success"]) {
            event.remove();
          } else {
            alert(result["message"]);
          }
        }
      });
    }
  });

问题出在行event = calendar.getEventByID(uuid);上-我收到错误消息getEventByID is not a function，我不确定从那里去哪里。

当我检查日历对象时，我注意到原型属性还有另一个定义了getEventById的原型属性 ：

{…}
​
currentClassNames: Array(5) [ "fc","fc-media-screen","fc-direction-ltr",… ]
​
currentData: Object { viewTitle: "August 2020",calendarApi: {…},dispatch: dispatch(e),… }
​
currentDataManager: Object { computeOptionsData: it(),computeCurrentViewData: it(),organizeRawLocales: it(),… }
​
customContentRenderId: 0
​
el: <div id="calendar" class="fc fc-media-screen fc-di…standard fc-liquid-hack">​
handleAction: function handleAction(e)​
handleData: function handleData(e)​
handleRenderRequest: function handleRenderRequest()
​
isRendered: true
​
isRendering: true
​
renderRunner: Object { isRunning: false,isDirty: false,timeoutId: 0,… }
​
<prototype>: {…}
​​
batchRendering: function batchRendering(e)​​
constructor: function t(t,n)​​
destroy: function destroy()​​
pauseRendering: function pauseRendering()​​
render: function render()​​
resetOptions: function resetOptions(e,t)​​
resumeRendering: function resumeRendering()​​
setClassNames: function setClassNames(e)​​
setHeight: function setHeight(e)​​
updateSize: function updateSize()​​
view: 
​​
<get view()>: function get()​​
<prototype>: {…}
​​​
addEvent: function addEvent(e,t)​​​
addEventSource: function addEventSource(e)​​​
batchRendering: function batchRendering(e)​​​
changeView: function changeView(e,t)​​​
constructor: function e()​​​
dispatch: function dispatch(e)​​​
formatDate: function formatDate(e,t)​​​
formatIso: function formatIso(e,t)​​​
formatRange: function formatRange(e,t,n)​​​
getAvailableLocaleCodes: function getAvailableLocaleCodes()​​​
getCurrentData: function getCurrentData()​​​
getDate: function getDate()​​​
getEventById: function getEventById(e)

所以我不确定要去哪里-我真的不知道如何根据事件的ID查找事件。

解决方法

请记住JavaScript is case-sensitive。

该函数的名称（根据fullCalendar documentation）为getEventById，而不是getEventByID。

因此event = calendar.getEventById(uuid);应该可以工作。 （检查日历对象时看到的属性确实是该函数的正确名称-这就是它出现在其中的原因。）