Setting end date of received fullcalendar event fails with error

Question

How can I adjust the end date of a fullcalendar event which is dropped on the calendar? I am using AngularJS's UI Calendar and fullcalendar-scheduler-1.3.2 and I have the following function that handles a newly received event

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
}

When I drop the first event, everything works fine. When I drop the second event, the error below occurs. When I increase the end date by 0 seconds instead of 3600 (which means the event duration is 0 and makes little sense), the error does not occur.

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

I have found a similar question StackOverflow how to get start and end date of external dragged and dropped event on fullcalendar but there the end date is adjusted in the drop-handler and thus for every drop event. Also I feel that $(this) does not work properly with AngularJS because $(this).data is not a function

UPDATE

Another symptom: calling updateEvent after modifying the event sets end date back to 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
}

I am seeing the same issue. I put the event object in the data-event attribute on the html element. The end value is fine in the drop callback for external events, but then in the eventReceive, it is coming back as null, only after dragging the same event on for the second time. I am using FullCalendar version 3.4.0. — Jonathan, Aug 04 '17 at 01:23

score 0 · Answer 1 · answered Aug 04 '17 at 01:42

I figured it out. The issue is that I was setting the data-duration attribute on the html element properly when I was dragging the external event on to the calendar the first time I was dropping it. After removing it from the calendar and subsequently adding it back, I was not properly setting that data-duration attribute. That attribute is what drives the end date in the eventReceive callback.

Check the documentation about the duration data attribute: https://fullcalendar.io/docs/dropping/droppable/

Setting end date of received fullcalendar event fails with error

1 Answers1