如何解决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);应该可以工作。 （检查日历对象时看到的属性确实是该函数的正确名称-这就是它出现在其中的原因。）
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。