我有一个完整的日历，包含全天活动和正常活动。我正在使用 fullCalendar 6.1.8 版本。
我在将全天事件从一个全天时段拖放到另一个全天时段时遇到问题。不过，我可以在任何一天将其转到任何其他时段。该事件只是弹回之前的事件。
有什么想法为什么会发生这种情况吗？
<html>
<head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/6.1.8/index.global.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, {
events: [{
title: 'event1',
start: '2023-12-12'
},
],
height: 800,
initialView: 'timeGridWeek',
eventColor: '#292b2c',
headerToolbar: false,
themeSystem: 'bootstrap5',
duration: {
days: 7
},
showNonCurrentDates: false,
slotLabelFormat: {
hour: 'numeric',
minute: '2-digit',
hour12: false,
},
firstDay: 1,
dayHeaderFormat: {
weekday: 'long'
},
eventStartEditable: true,
eventResizableFromStart: true,
contentHeight: "auto",
handleWindowResize: true,
droppable: true,
forceEventDuration: true,
eventOverlap: false,
eventResize: function(eventResizeInfo) {
var event = eventResizeInfo.event;
if (event.start.getDay() !== event.end.getDay()) {
eventResizeInfo.revert();
}
},
eventDrop: function(eventResizeInfo) {
var event = eventResizeInfo.event;
if (event.start.getDay() !== event.end.getDay()) {
eventResizeInfo.revert();
}
},
eventLeave: function(eventResizeInfo) {
const event = eventResizeInfo.event;
event.remove();
},
eventContent: function(eventInfo) {
const event = eventInfo.event;
const id = event.id;
if (event.title.length == 0) return "Empty Slot";
const eventTitle = `<div>${event.title} </div>`;
return {
html: `<div class='d-flex flex-column'> ${eventTitle} </div> </div>`
}
},
eventChange: function(info) {
const events = calendar.getEvents();
},
eventReceive: function(event) {
const events = calendar.getEvents();
const title = event.event.title;
const start = event.event.startStr;
const end = event.event.endStr;
const allDay = event.event.allDay;
event.event.remove();
calendar.addEvent({
id: generate_uuidv4(),
title: title,
start: start,
end: end,
wholeDay: allDay,
});
},
});
calendar.render();
function getEvents() {
const events = calendar.getEvents();
}
});
</script>
</head>
<body id="body">
<div class="row" style="width: 100%;">
<div id='calendar'></div>
</div>
</body>
</html>
如果您使用 forceEventDuration，它会强制 fullCalendar 设置事件的结束日期。对于全天活动，结束日期始终是第二天的午夜，因为（根据事件对象文档）fullCalendar 中的结束日期是排他性 - 例如，如果您为 12 号创建全天活动，fullCalendar 会将结束日期视为 13 日 00:00:00。
这会导致问题，因为在您的
eventDrop如果删除
forceEventDuration : true
从设置中，这种情况不再发生 - 演示：https://codepen.io/ADyson82/pen/YzBbGgp