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

【问题标题】：FullCalendar: Set event end in drop functionFullCalendar：在 drop 函数中设置事件结束
【发布时间】：2010-11-12 22:18:20
【问题描述】：

我可以将外部事件拖放到日历中，默认行为是开始时间是事件被删除的位置。我想将默认行为设置为也将事件的结束时间设置为开始时间后 1 小时。这似乎微不足道，但我似乎无法让它工作。下面是我的 drop 函数（本质上是 droppable items 演示加上 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();
    }
},

有什么想法吗？

谢谢，乔钦

【问题讨论】：

标签： jquery fullcalendar droppable

【解决方案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
....

编辑：好的，我实际上尝试过这个版本。它似乎工作。

【讨论】：

嗨 Ryley，感谢您的反馈，虽然 allday 属性可能会导致问题，但我认为这不是我的特殊情况的根本原因。看起来 start 设置为格式为 (Fri Nov 12 2010 09:30:00 GMT-0800 (PST)) 的日期，而 end 设置为纪元时间的日期。我正在将 end 从 epoch 转换为 UTC。如果您有任何提示，我将不胜感激。
@JoeChin - 看我上面的编辑，这次我实际测试了它，似乎做对了......

【解决方案2】：

日历属性

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

【讨论】：

【解决方案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);

},

【讨论】：

【解决方案4】：

高于版本 2，“eventReceive”- 删除后调用的事件。

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

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

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

文档事件接收：link
文档集结束：link

【讨论】：