在FullCalendar V5.中更新事件

Question

我在FullCalendar v5中用模态更新事件时遇到问题。

我已经尽力寻找解决方案，但不幸的是我失败了。

第一部分是打开和关闭模态，然后是默认事件的一些数据。

从数组中读取事件，然后当你点击一天或选择多天时，一个模态将打开，在你点击提交后，事件的数据将添加到日历中

$(document).ready(function() {
var modal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0];
$("#open").click(function() {
modal.style.display = "block";
});
// When the user clicks on <span> (x), close the modal
$("span").click(function() {
modal.style.display = "none";
$('#EventT').val('');
});
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}

const myEvents = {
title: "event5",
start: '2022-08-21',
end: '2022-08-29'
}
var myEvent = [{
id: 'eve',
title: 'event1',
start: '2022-08-21'
},
{
title: 'event2',
start: '2010-01-05',
end: '2010-01-07'
},
{
title: 'event3',
start: '2010-01-09T12:30:00',
},
{
title: myEvents.title,
start: myEvents.start,
end: myEvents.end,
}
];


var localeSelectorEl = document.getElementById('locale-selector');
var calendarEl = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},

initialDate: '2020-09-12',
navLinks: true, // can click day/week names to navigate views
selectable: true,
nowIndicator: true,
selectMirror: true,
select: function(info) {
var modal = document.getElementById("myModal");
document.getElementById("StartD").value = info.startStr;
document.getElementById("EndD").value = info.endStr;
modal.style.display = "block";
calendar.unselect()
},

dateClick: function(info) {
var modal = document.getElementById("myModal");
modal.style.display = "block";
document.getElementById("StartD").value = info.dateStr;
document.getElementById("EndD").value = info.dateStr;
},
eventClick: function(info) {
var modal = document.getElementById("myModal");
modal.style.display = "block";
document.getElementById("EventT").value = info.event.title;
document.getElementById("StartD").value = info.event.startStr;
// document.getElementById("EndD").value = info.event.endStr;
var ddd = info.event.endStr;
if (ddd.length === 0) {
document.getElementById("EndD").value = info.event.startStr;
} else {
document.getElementById("EndD").value = info.event.endStr;
}
},
editable: true,
dayMaxEvents: true,
eventSources: [{
events: myEvent,
}
]
});
calendar.render();
$("#submit").on("click", function(event) {
var title = $("#EventT").val();
var start = $("#StartD").val();
var end = $("#EndD").val();
modal.style.display = "none";
if (title) {
calendar.addEvent({
title: title,
start: start,
end: end,
}
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

当"保存"；按钮点击您的"；编辑模态"；。

例如：

calendar1 = new FullCalendar.Calendar(calendar-element, {
height: 650,
initialView: 'timeGridDay',
slotMinTime: '08:00:00',
eventClick: function(eventInfo){    
eventInfo.event.setProp('title', 'This is a title');
eventInfo.event.setStart('2022-12-01 15:00:00');
eventInfo.event.setEnd('2022-12-01 16:00:00');
}
}