FullCalendar: Set event end in drop function

JoeChin picture JoeChin · Nov 12, 2010 · Viewed 11.6k times · Source

I have the ability to drag and drop external events to the calendar with the default behavior of start time being where the event was dropped. I would like to set the default behavior to also set the end time for the event to be 1 hour after the start time. This seems trivial but I can't seem to get it working. Below is my drop function (essentially the droppable items demo plus 1 line.)

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();
    }
},

Any ideas?

Thanks, Joe Chin

Answer

Ryley picture Ryley · Nov 12, 2010

The problem in that example for what you're trying to do is that allDay is set to true, so it ignores the hours specified in the start date. If you were happy with say the time being midnight - 1am as the default, here's what you could do:

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
....

EDIT: OK, I actually tried this version. It seems to work.