Trascinare da un elenco ordinabile a fullcalendar

Question

Cerco di trascinare un elemento da un elenco di eventi ordinabili a fullcalendar.

Non ho visto questo nella documentazione del calendario completo di Adam Shaw ma forse qualcuno lo ha già fatto una volta.

Ecco la jsfiddle: http://jsfiddle.net/gtbm/VjNFn/2/

E qui il codice come ha chiesto:

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

Spero u potrebbe aiutare, Grazie in anticipo, C

Answer 1

Aggiungere questo pezzo di codice per ogni tuo metodo:

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

È possibile controllare questo in aggiornato jsfiddle http://jsfiddle.net/EKTWJ/

La documentazione menziona un po 'di trascinamento da un elenco here.

C'è un esempio operativo completo here, quindi è possibile controllare l'origine della pagina.

Answer 2

Così riesco a trovare una soluzione per entrambi gli elenchi di file e ordinabili in visualizzazione mensile.

È possibile trovare il jsfiddle qui: http://jsfiddle.net/VjNFn/16/ E il codice:

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

io non credo, è la buona soluzione, perché non funziona per settimana e giorno ????

Tutte le idee per favore!

Answer 3

cerco di mostrare la soluzione, ma io non riuscire a farlo funzionare ... http://jsfiddle.net/gtbm/VjNFn/20/

Che ur non andare a trovare in questo jsfiddle è questo da aggiungere nella fullcalendar.js il codice qui:

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

Spero che aiuta, C

Answer 4

@Brousse Ouilisse, è stato così vicino alla risposta giusta :( Nel tuo commento https://stackoverflow.com/a/15251724/1198292 si dovrebbe chan ge

$(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; 
     }      
    }) 

Answer 5

impostazione data-event proprietà di elemento sortable sembra funzionare per me. E 'descritto in fullcalendar eventReceive doc

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

È anche possibile impostare l'attributo di dati con jquery.

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