使用fullCalendar将allDay设置为false时，如何动态设置事件开始和结束时间？

Posted 2021-04-07

我正在使用fullcalendar应用程序，在点击某个事件时，它会打开一个包含事件信息的模态。在这个模态中，也可以改变事件数据，想一想event.start，event.end和event.allDay。

单击allDay复选框时，事件将自动更新以表示新状态，但事件之前的事件是非allDay事件。事件数据包含两个额外的属性：oldStart和oldEnd。我想在event.allDay设置为false时使用这两个属性;然后应将event.start设置为oldStart，并将event.end设置为oldEnd。

问题是，使用此方法，在将event.allDay设置为false后更新事件的开始和结束时间时，更新时的事件将从日历视图中消失，并在后端更新以表示开始时间为00:00和结束时间作为事件开始+ defaultEventDuration（在我的情况下是02:00:00）。

我的代码看起来像这样：

function changeAllDay(id) { // Function to change allDay property of event that was clicked on

    // Find corresponding event
    var event = findEvent(id);

    event.allDay = !event.allDay; // Change allDay value

    // Set start and end time to midnight if event is allDay
    if (event.allDay) {

        event.oldStart = event.start;
        event.oldEnd = event.end;

        event.start.set('hours', 00);
        event.start.set('minutes', 00);
        event.end.set('hours', 00);
        event.end.set('minutes', 00);

    } else {

        event.start = event.oldStart;
        event.end = event.oldEnd;
    };

    updateEvent(event);
}

updateEvent（）函数执行API调用以更新后端中的事件，并在成功时更新事件

$('#calendar').fullCalendar('updateEvent', event);

谁能告诉我这里缺少什么？

答案

在存放日期时复制日期。你之后正在调用set，这会消除你原来的时间。

    event.oldStart = event.start.clone();
    event.oldEnd = event.end.clone();

当您从allDay切换回来时，您的活动没有持续时间。