Separating div object(fc-event) for the event with multiple days

Question

Working external event dragging with jquery fullcalendar.

I would like to know, when an user extends a event to some more dates by using handle bar drag, if there are any possibilities to create multiple event div object(fc-event)?

Now its showing only one div (fc-event) for all selected days, this need to be separate divs(fc-event) for each day.

Answer 1

You can use eventResize event:

Triggered when resizing stops and the event has changed in duration.

in the event clone the element and set new start/end date on it then render it on the calendar using renderEvent method; at the end remember to revert the standard resize effect using revertFunc

Code:

$('#mycalendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    editable: true,
    events: [{
        title: 'event1',
        start: '2014-05-02'
    }, {
        title: 'event2',
        start: '2014-05-10'
    }],
    eventResize: function (event, dayDelta, minuteDelta, revertFunc) {
        var originalEventObject = event;

        for (var i = 0; i < dayDelta; i++) {
            var selectedIndex = parseInt(originalEventObject._id.replace(/_fc/, '') - 1);
            var copiedEventObject = $.extend({}, $("#mycalendar").fullCalendar("clientEvents")[selectedIndex]);
            copiedEventObject.source = null;
            var newDay = new Date(copiedEventObject.start);
            newDay.setDate(newDay.getDate() + i + 1);
            copiedEventObject._id = "_fc" + parseInt($("#mycalendar").fullCalendar("clientEvents").length + 1);
            copiedEventObject.start = newDay;
            copiedEventObject.end = newDay;
            $('#mycalendar').fullCalendar('renderEvent', copiedEventObject, true);
        }

        revertFunc();
    }
});

Demo: http://jsfiddle.net/IrvinDominin/p9JFq/