Geek asks and answers

Drag from sortable list to full calendar

I am trying to drag an item from a sortable event list into fullcalendar.

I did not see this in the documentation of the full Adam Shaw calendar, but maybe someone has already done this once.

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

And here is the code given:

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

Hope you can help, Thanks in advance, C

+5
source share
5 answers

So, I manage to find a solution for draggable and sortable lists in month mode.

Here you can find jsfiddle: 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 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 id as the event id
                title:              $.trim($(ui.item).text()),      // use the element 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 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 do not think this is a good solution, because it does not work for a week and a day ????

Any ideas please!

+2

:

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

jsfiddle http://jsfiddle.net/EKTWJ/

.

, .

+1

@Brousse Ouilisse, :( fooobar.com/questions/1145908/...

$(document)
// To add in calendar function ***********************************
  .bind("sortstart", function(ev, ui) { 
      //_dragElement = ev.target;  <---------- REMOVE THIS
      _dragElement = ui.helper;  <---------- ADD THIS
      currentView.dragStart(_dragElement, ev, ui);    
  })
  .bind("sortstop", function(ev, ui) {
      if (_dragElement) {
          currentView.dragStop(_dragElement, ev, ui);
          _dragElement = null;
      }                       
  })
+1

, ... http://jsfiddle.net/gtbm/VjNFn/20/

jsfiddle, fullcalendar.js :

/* External Dragging
------------------------------------------------------------------------*/
if (options.droppable) {
$(document)
// To add in calendar function ***********************************
    .bind("sortstart", function(ev, ui) { 
        _dragElement = ev.target;
        currentView.dragStart(_dragElement, ev, ui);    
    })
    .bind("sortstop", function(ev, ui) {
        if (_dragElement) {
            currentView.dragStop(_dragElement, ev, ui);
            _dragElement = null;
        }                       
    })      
    // **********************************************       
    ...

, , C

0

Sets the property data-eventproperty of the sortable element to me. This is described in the fullcalendar eventReceive doc

<ul id="sortable-list">
  <li data-event='{"title":"my event"}'>Task</li>
</ul>

It is also possible to set the data attribute using jquery.

$('#selector').data('event', {title: 'my event'})
0
source

More articles:


All Articles