javascript - 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 查找事件。

标签： javascriptfullcalendarfullcalendar-5

javascript - fullcalendar v5 getEventByID 不是函数

问题描述

解决方案

推荐阅读