FullCalendar：在 drop 函数中设置事件结束

Question

我能够将外部事件拖放到日历中，默认行为的开始时间是事件被删除的时间。我想将默认行为设置为将事件的结束时间设置为开始时间后 1 小时。这看起来微不足道，但我似乎无法让它发挥作用。下面是我的放置功能（本质上是可放置物品演示加上 1 行。）

drop: function(date, allDay) { // this function is called when something is dropped

    // retrieve the dropped element's stored Event Object
    var originalEventObject = $(this).data('eventObject');
    // we need to copy it, so that multiple events don't have a
    // reference to the same object
    var copiedEventObject = $.extend({}, originalEventObject);

    // assign it the date that was reported
    copiedEventObject.start = date;
    copiedEventObject.end = date.setHours(date.getHours()+1); // <- should be working
    copiedEventObject.allDay = allDay;

    // render the event on the calendar
    // the last `true` argument determines if the event "sticks"
    // (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
    $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

        // is the "remove after drop" checkbox checked?
    if ($('#drop-remove').is(':checked')) {
    // if so, remove the element from the "Draggable Events" list
    $(this).remove();
    }
},

有什么想法吗？

谢谢， 陈乔恩

Answer 1

该示例中您尝试执行的操作的问题是 allDay 设置为 true，因此它会忽略开始日期中指定的小时数。如果您愿意将时间设置为午夜 - 凌晨 1 点作为默认值，那么您可以执行以下操作：

var tempDate = new Date(date);  //clone date
copiedEventObject.start = date;
copiedEventObject.end = new Date(tempDate.setHours(tempDate.getHours()+1)); // <-- make sure we assigned a date object
copiedEventObject.allDay = false;  //< -- only change
....

编辑：好的，我实际上尝试了这个版本。它似乎有效。

Answer 2

日历属性

http://arshaw.com/fullcalendar/docs/agenda/defaultEventMinutes/
设置从开始算起的默认结束时间

Answer 3

我无法让 Ryley 发布的解决方案正常工作。它将外部事件放置在日历的标题处，当我查看一周时，该事件将是一条细线（它看起来折叠）或根本不出现。这可能是 fullCalendar 版本差异（我使用的是 fullCalendar v2）。在 fullCalendar 的 v2 中，我能够使其正常工作，而不会在任何日历视图中出现任何事件问题。

drop: function (date, jsEvent, ui) { // this function is called when an external element is dropped.

    // retrieve the dropped element's stored Event Object
    var originalEventObject = $(this).data('eventObject');

    // we need to copy it, so that multiple events don't have a reference to the same object
    var copiedEventObject = $.extend({}, originalEventObject);

    var sdate = $.fullCalendar.moment(date.format());  // Create a clone of the dropped date.
    sdate.stripTime();        // The time should already be stripped but lets do a sanity check.
    sdate.time('08:00:00');   // Set a default start time.
    copiedEventObject.start = sdate;

    var edate = $.fullCalendar.moment(date.format());  // Create a clone.
    edate.stripTime();        // Sanity check.
    edate.time('12:00:00');   // Set a default end time.
    copiedEventObject.end = edate;

    // render the event on the calendar
    // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
    $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

},

Answer 4

版本2以上，“eventReceive”-丢弃后调用的事件。

当带有关联事件数据的外部可拖动元素被拖放到日历上时调用。或者另一个日历中的事件。

然后使用“event.setEnd(date);”更改结束日期。

eventReceive: function (arg) {
 var endDate = .....
 arg.event.setEnd(endDate);
}

文档 eventReceive：链接

文档 setEnd：链接