Von einer sortierbaren Liste in den Vollkalender ziehen

Question

Ich versuche ein Objekt aus einer sortierbaren Ereignisliste in den Vollkalender zu ziehen.

Ich habe das in der Dokumentation von Adam Shaws vollem Kalender noch nicht gesehen, aber vielleicht hat es jemand schon einmal gemacht. Hier

ist die jsfiddle: http://jsfiddle.net/gtbm/VjNFn/2/

Und hier der Code als gefragt:

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

Ich hoffe, u könnte helfen, Vielen Dank im Voraus, C

Answer 1

Dieses Stück Code Ihre jede Methode:

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

Sie können dies überprüfen updated jsfiddle http://jsfiddle.net/EKTWJ/

Dokumentation erwähnen ein wenig von ziehen aus einer Liste here.

Es gibt ein voll funktionsfähiges Beispiel here, so dass Sie die Quelle der Seite überprüfen können.

Answer 2

So finde ich eine Lösung für Dragbarble und sortierbare Listen in der Monatsansicht.

Sie die jsfiddle finden Sie hier: http://jsfiddle.net/VjNFn/16/ und den 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;      
       } 
      }) 
     });; 

Ich denke nicht, es ist die gute Lösung, weil es nicht für Woche und Tag funktioniert ????

Irgendwelche Ideen bitte!

Answer 3

Ich versuche, um die Lösung zu zeigen, aber ich schaffe nicht um es zu bekommen arbeiten ... http://jsfiddle.net/gtbm/VjNFn/20/

Was ur gehen nicht in diesem jsfiddle finden diese hier in den fullcalendar.js Code hinzuzufügen ist:

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

ich hoffe, es hilft, C

Answer 4

@Brousse Ouilisse, war man so nah an richtige Antwort :( In Ihrem Kommentar https://stackoverflow.com/a/15251724/1198292 Sie sollten 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

Einstellung data-event Eigenschaft sortierbar Element scheint für mich zu arbeiten. Es ist beschrieben in fullcalendar eventReceive doc

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

Es ist auch möglich, das Datenattribut mit jquery einzustellen.

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