我有一個問題，我的 javascript 代碼在呼叫 fullCalendar 庫時沒有執行。fullCalendar 庫版本是 5.10.1，我的 jquery 版本是 3.6.0。我的日歷未按原樣顯示。
請幫助我或有人可以指導我我做錯了什么？謝謝您的幫助。
錯誤：jquery-3.6.0.min.js:2 Uncaught TypeError: $(...).fullCalendar 不是函式
這是我的 jquery/javascript 腳本
$(document).ready(function() {
$("#calendar").fullCalendar({
header: {
left: "prev,next today",
center: "title",
right: "month,agendaWeek,agendaDay"
},
defaultView: "month",
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectHelper: false,
editable: true,
eventLimit: true, // allow "more" link when too many events
select: function(start, end) {
var title = prompt("Event Content:");
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$("#calendar").fullCalendar("renderEvent", eventData, true); // stick? = true
}
$("#calendar").fullCalendar("unselect");
},
eventRender: function(event, element) {
element
.find(".fc-content")
.prepend("<span class='closeon material-icons'></span>");
element.find(".closeon").on("click", function() {
$("#calendar").fullCalendar("removeEvents", event._id);
});
},
eventClick: function(calEvent) {
var title = prompt("Edit Event Content:", calEvent.title);
calEvent.title = title;
$("#calendar").fullCalendar("updateEvent", calEvent);
}
});
});
uj5u.com熱心網友回復：
FullCalendar5.10.1 不是 jQuery 插件，因此它不能像$("#calendar").fullCalendar(...). 你應該像這樣初始化它
document.addEventListener('DOMContentLoaded', function(){
let calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
// header: {
// left: "prev,next today",
// center: "title",
// right: "month,agendaWeek,agendaDay"
// },
// defaultView: "month",
navLinks: true, // can click day/week names to navigate views
selectable: true,
// selectHelper: false,
editable: true,
// eventLimit: true, // allow "more" link when too many events
select: function(info ) {
let title = prompt("Event Content:");
if (title) {
calendar.addEvent({
title: title,
start: info.startStr,
end: info.endStr
})
}
calendar.unselect();
},
eventDidMount: function(info) {
// code for when event is rendered
},
eventClick: function(info) {
var title = prompt("Edit Event Content:", info.event.title);
// code to update event.
}
});
calendar.render();
});<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/main.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js"></script>
<div id='calendar'></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/427835.html
標籤：javascript jQuery 全日历 fullcalendar-5