Drag an event in fullCalendar component with a specific duration

Question

I've seen the solution to drag and drop external events in fullcalendar. But, in this demo, all the external events have a duration of 2 hours (because defaultEventMinutes parameter is set to 120). I'm trying to change this demo in order to manage events with different durations. Say, "My event 1" is 45min long, "My event 2" is 165min, etc.

At the beginning I though there may be an attribute to store the duration in the eventObject, but according to the documentation, it's not the case. Then, I thought it would be possible to change the value of 'defaultEventMinutes' when starting dragging the event. But apparently, I can't do it without rebuilding the whole calendar.

According to you, what is the best means to meet this requirement? Thanks in advance for your advice...

Answer 1

Worked on this as well and have solved the duration shown on fullCalendar this way:

1. Having a custom "setOptions" function for fullCalendar.
2. Having a property for fullCalendar called "dragMinutes" that can be set during elements $(this).draggable({start:...}).

Here is the code for the custom setOptions:

 ...
    function Calendar(element, options, eventSources) {
        var t = this;

        // hack for setting options that updates
        function setOptions(new_options, refresh) {
            $.extend(options, new_options);
            if (refresh) {
                var viewName = currentView.name;
                changeView(viewName, true);
            }
        }
    // exports ... 
    t.setOptions = setOptions;
    ...

Heres the code for handling "dragMinutes" option in fullCalendar:

/* External Dragging
--------------------------------------------------------------------------------*/


function dragStart(_dragElement, ev, ui) {
    hoverListener.start(function (cell) {
        clearOverlays();
        if (cell) {
            if (cellIsAllDay(cell)) {
                renderCellOverlay(cell.row, cell.col, cell.row, cell.col);
            } else {
                var d1 = cellDate(cell);
                if (opt('dragMinutes'))
                    var d2 = addMinutes(cloneDate(d1), opt('dragMinutes'));
                else
                    var d2 = addMinutes(cloneDate(d1), opt('defaultEventMinutes'));
                renderSlotOverlay(d1, d2);
            }
        }
    }, ev);
}

And heres how i make event draggable and update the "dragMinutes":

    // make the event draggable using jQuery UI
    $(this).draggable({
        containment: 'document',
        // return a custom styled elemnt being dragged
        helper: function (event) {
            return $('<div class="uv-planning-dragging"></div>').html($(this).html());
        },
        opacity: 0.70,
        zIndex: 10000,
        appendTo: 'body',
        cursor: 'move',
        revertDuration: 0,
        revert: true, 
        start: function (e, ui) {
            // set the "dragMinutes" option in fullCalendar so shown interval about to be added is correct.
            var data = $(this).data('eventObject');
            if (data) {
                var min = data.jsonProps.durationMsec / 1000 / 60;
                if (macroCalendar.calendar) {
                    macroCalendar.calendar.fullCalendar('setOptions', { dragMinutes: Math.round(min) }, false);
                }
            }
        },
        stop: function (e, ui) {
            // further process

        }
    });

Hope it helps.

Answer 2

If anyone still visits the thread and don't find the solution, the solution would be to set the duration parameter in event div... and then call draggable on that div.

$(this).data('event', {
    title: 'new event title', // use the element's text as the event title
    id: $(this).attr('id'),
    stick: true, // maintain when user navigates (see docs on the renderEvent method)
    duration: '03:00:00' // will set the duration during drag of event
});