Блог

   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   "amp;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 , и я не уверен, куда идти дальше.

Когда я проверяю объект calendar, я замечаю, что атрибут prototype имеет другой атрибут prototype, который определяет 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)
  

Итак, я не уверен, куда идти — я действительно не знаю, как искать событие на основе его идентификатора.

Важно помнить, что JavaScript чувствителен к регистру.

Имя функции (согласно документации по FullCalendar) является getEventById , не getEventByID .

Поэтому event = calendar.getEventById(uuid); должно сработать. (Свойство, которое вы видели при проверке объекта calendar, действительно является правильным именем функции — вот почему оно там появляется.)