CODEWITHSUNDEEP
jqueryfullcalendardroppable
JoeChin
JoeChin

Reputation: 401

FullCalendar: Set event end in drop function

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

Upvotes: 2

Views: 12548

Answers (4)

Nadir Hashimov
Nadir Hashimov

Reputation: 39

Above version 2, "eventReceive"-event called after dropped.

Called when an external draggable element with associated event data was dropped onto the calendar. Or an event from another calendar.

Then use "event.setEnd(date);" to change end date.

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

Documentation eventReceive: link
Documentation setEnd: link

Upvotes: 0

inciph
inciph

Reputation: 31

I couldn't get the solution posted by Ryley to work properly. It would place the external event at the header of the calendar and when I viewed the week, the event would be a thin line (it appeared collapsed) or not appear at all. This may be a fullCalendar version difference (I'm using v2 of fullCalendar). In v2 of fullCalendar I was able to get this to work without any problems of the event within any of the calendar views.

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

},

Upvotes: 0

ric
ric

Reputation: 21

Calendar property

http://arshaw.com/fullcalendar/docs/agenda/defaultEventMinutes/ sets de default end time from start

Upvotes: 1

Ryley
Ryley

Reputation: 21226

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.

Upvotes: 6

Related Questions