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是区分大小写的。
函数的名称(根据完整的Calendar文档(是getEventById，而不是getEventByID。
因此event = calendar.getEventById(uuid);应该起作用。(当你检查日历对象时，你看到的属性确实是函数的正确名称——这就是它出现在那里的原因。(