Drag from a sortable list to fullcalendar

Question

I try to drag an item from a sortable event list to fullcalendar.

I have not seen this in the documentation of Adam Shaw's full calendar but perhaps someone has already done it once.

Here is the jsfiddle: http://jsfiddle.net/gtbm/VjNFn/2/

And here the code as asked:

/* initialize the external events
    -----------------------------------------------------------------*/
$('ol#external-events').sortable({
    opacity: .6,
    placeholder: 'placeholder',
    revert: "invalid",//  250, //          
    helper:   'clone'
});
$('#external-events li.external-event').each(function() {

    // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
    // it doesn't need to have a start or end
    var eventObject = {
        title: $.trim($(this).text()) // use the element's text as the event title
    };

    // store the Event Object in the DOM element so we can get to it later
    $(this).data('eventObject', eventObject);

});


    /* initialize the calendar
    -----------------------------------------------------------------*/

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    editable: true,
    droppable: true, // this allows things to be dropped onto the calendar !!!
    drop: function(date, allDay) { // this function is called when something is dropped
        alert('I got it');

        // 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.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);                
    }
});

I hope u could help, Thanks in advance, C

Answer 1

So i manage to find a solution for both dragabble and sortable lists in month view.

You can find the jsfiddle here: http://jsfiddle.net/VjNFn/16/ And the code:

    function getDateFromCell(td, calInstance){
        var cellPos = {
            row: td.parents('tbody').children().index(td.parent()),
            col: td.parent().children().index(td)
        };

        return calInstance.fullCalendar('getView').cellDate(cellPos);
        }

    /* initialize the external events
    -----------------------------------------------------------------*/
    $('#external-events div.external-event').each(function() {

        // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
        // it doesn't need to have a start or end
        var eventObject = {
            title: $.trim($(this).text()) // use the element's text as the event title
        };

        // store the Event Object in the DOM element so we can get to it later
        $(this).data('eventObject', eventObject);

        // make the event draggable using jQuery UI
        $(this).draggable({
            zIndex: 999,
            revert: true,      // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });

    });     
    $('ol#sortable-events').sortable({
        helper: 'clone',        
        placeholder: 'placeholder',
        start: function(ev, ui) {
            // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
            var eventObject = {
                id:                 $.trim($(ui.item).attr('id')),  // use the element's id as the event id
                title:              $.trim($(ui.item).text()),      // use the element's text as the event title
                start:              new Date("2013-02-18T18:00:00"),//"2013-02-18T18:00:00", //day,
                end:                new Date("2013-02-18T18:00:00"),//"2013-02-18T18:00:00",//day,
                backgroundColor:    $(ui.item).css('background-color'),
                borderColor:        $(ui.item).css('background-color'),
                textColor:          $(ui.item).css('color'),
                allDay: true 
                };

            // store the Event Object in the DOM element so we can get to it later
            $(ui.item).data('eventObject', eventObject);
            $(ui.item).data('dropped', false);

            return  true;      
            },
        stop: function(ev, ui) {
            // Restore place of Event Object if dropped
            if ( $(ui.draggable).data('dropped') == true ) {
                $('ol#sortable-events').nestedSortable('cancel'); 
                $(ui.draggable).data('dropped') = false ;
                }
            }
        }).disableSelection();


    /* initialize the calendar
    -----------------------------------------------------------------*/
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
            },
        defaultView: 'agendaWeek',
        editable: true,
        droppable: true, // this allows things to be dropped onto the calendar !!!
        dropAccept: '#external-events div.external-event',
        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.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();
            }
        }
    }).find('td').each(function() {
        $(this).droppable({
            // greedy: false,
            accept: "ol#sortable-events li.sortable-event",
            // activeClass: "active",
            // tolerance: 'pointer',
            hoverClass: "fc-cell-overlay",
            drop: function( event, ui ) {
                // alert('coucou');
                if ( $(ui.draggable).data('dropped') == false ) {
                    // Get the event and init with the date
                    var eventObject = $(ui.draggable).data('eventObject');
                    var ddrop       = getDateFromCell( $(this), $('#calendar') );
                    eventObject.start = ddrop ;
                    eventObject.end = ddrop ;

                    // Delete the event if already dropped
                    $('#calendar').fullCalendar( "removeEvents", eventObject.id );

                    // render the event on the calendar
                    // the last `true` argument determines if the event "sticks" 
                    $('#calendar').fullCalendar('renderEvent', eventObject, true);

                    // Dropped flag is true state now
                    $(ui.draggable).data('dropped') == true
                    }

                return true;                      
                }
            })
        });;

I dont think, it is the good solution because it does not work for week and day ????

Any ideas please !