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

时间:2010-11-12 22:18:20

标签: jquery fullcalendar droppable

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

有什么想法吗?

谢谢, Joe Chin

3 个答案:

答案 0 :(得分:5)

该示例中您尝试执行的操作的问题是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
....

编辑:好的,我实际上尝试过这个版本。它似乎有效。

答案 1 :(得分:1)

日历属性

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

答案 2 :(得分:0)

我无法通过Ryley发布解决方案来正常工作。它会将外部事件放在日历的标题上,当我查看一周时,事件将是一条细线(它看起来已折叠)或根本不显示。这可能是fullCalendar版本的差异(我使用的是fullCalendar的v2)。在fullCalendar的第2版中,我能够在没有任何日历视图中的事件任何问题的情况下使用它。

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);

},