[英]fullcalendar v5 getEventByID is not a function
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
并且我不确定从那里到 go 的位置。
当我检查日历 object 时,我注意到原型属性有另一个定义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)
所以我不确定 go 在哪里 - 我真的不知道如何根据它的 ID 查找事件。
请务必记住JavaScript 区分大小写。
function 的名称(根据fullCalendar 文档)是getEventById
,而不是getEventByID
。
因此event = calendar.getEventById(uuid);
应该管用。 (您在检查日历 object 时看到的属性确实是 function 的正确名称 - 这就是它出现在那里的原因。)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.