因此，我设法在月视图中找到了可拖动和可排序列表的解决方案。
你可以在这里找到 jsfiddle：http: //jsfiddle.net/VjNFn/16/
和代码：
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;
}
})
});;
我不认为，这是一个很好的解决方案，因为它一周和一天都不起作用？？？？
请有任何想法！