javascript - 设置接收到的全日历事件的结束日期失败并出现错误

Question

如何调整拖放到日历上的全日历事件的结束日期？我正在使用 AngularJS 的 UI 日历和 fullcalendar-scheduler-1.3.2，并且我有以下函数来处理新收到的事件

function eventReceive(event) { // called when a new event is received
  console.log(event.start.format());    // 2017-06-14T12:00:00
  console.log(event.end);               // null
  event.end = moment(event.start).add(3600, 'seconds');
  console.log(event.end.format());      // 2017-06-14T13:00:00+00:00
}

当我删除第一个事件时，一切正常。当我删除第二个事件时，出现以下错误。当我将结束日期增加 0 秒而不是 3600 秒(这意味着事件持续时间为 0 并且没有什么意义)时，错误不会发生。

Uncaught TypeError: Cannot read property 'apply' of undefined
at n.fb.time (fullcalendar.min.js:6)
at r.d.internalApiVersion.o.isValidDate (scheduler.min.js:7)
at r.d.internalApiVersion.o.spanToSegs (scheduler.min.js:7)
at r.d.internalApiVersion.r.spanToSegs (scheduler.min.js:8)
at r.eventSpanToSegs (fullcalendar.min.js:7)
at r.eventRangeToSegs (fullcalendar.min.js:7)
at Array.<anonymous> (fullcalendar.min.js:7)
at Function.each (jquery.js:382)
at r.eventsToSegs (fullcalendar.min.js:7)
at renderFgEvents (fullcalendar.min.js:7)
    fb.time @ fullcalendar.min.js:6
    d.internalApiVersion.o.isValidDate @ scheduler.min.js:7
    d.internalApiVersion.o.spanToSegs @ scheduler.min.js:7
    d.internalApiVersion.r.spanToSegs @ scheduler.min.js:8
    eventSpanToSegs @ fullcalendar.min.js:7
    eventRangeToSegs @ fullcalendar.min.js:7
    (anonymous) @ fullcalendar.min.js:7
    each @ jquery.js:382
    eventsToSegs @ fullcalendar.min.js:7
    renderFgEvents @ fullcalendar.min.js:7
    renderEvents @ fullcalendar.min.js:7
    d.internalApiVersion.r.renderEvents @ scheduler.min.js:7
    displayEvents @ fullcalendar.min.js:8
    (anonymous) @ scheduler.min.js:6
    d.internalApiVersion.X.whenResources @ scheduler.min.js:6
    d.internalApiVersion.X.displayEvents @ scheduler.min.js:6
    o @ fullcalendar.min.js:6
    s @ fullcalendar.min.js:6
    p @ fullcalendar.min.js:6
    reportExternalDrop @ fullcalendar.min.js:8
    reportExternalDrop @ scheduler.min.js:6
    interactionEnd @ fullcalendar.min.js:7
    trigger @ fullcalendar.min.js:7
    handleInteractionEnd @ fullcalendar.min.js:7
    handleInteractionEnd @ fullcalendar.min.js:7
    endInteraction @ fullcalendar.min.js:7
    f @ jquery.js:512
    dispatch @ jquery.js:4435
    r.handle @ jquery.js:4121

我在StackOverflow发现了类似的问题how to get start and end date of external dragged and dropped event on fullcalendar但结束日期会在放置处理程序中进行调整，从而针对每个放置事件进行调整。另外我觉得 $(this) 不能与 AngularJS 正常工作，因为 $(this).data 不是一个函数

更新

另一个症状:修改事件后调用 updateEvent 将结束日期设置回 null

function eventReceive(event) { // called when a new event is received
  // here everything as above
  console.log(event.start.format());    // 2017-06-14T12:00:00
  console.log(event.end);               // null
  event.end = moment(event.start).add(3600, 'seconds');
  console.log(event.end.format());      // 2017-06-14T13:00:00+00:00

  // here additional test code
  event.title = 'TEST';
  uiCalendarConfig.calendars.myCalendar.fullCalendar('updateEvent', event);
  console.log(event.title);             // TEST, ok
  console.log(event.end);               // null, not ok
}

Answer 1

我明白了。问题是，当我第一次将外部事件拖到日历上时，我正在正确设置 html 元素上的 data-duration 属性。从日历中删除它并随后将其添加回来后，我没有正确设置该数据持续时间属性。该属性决定了 eventReceive 回调中的结束日期。

检查有关持续时间数据属性的文档:https://fullcalendar.io/docs/dropping/droppable/