所以我設法找到一個解決方案，在月視圖中可拖曳和排序列表。
你可以在這裏找到的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;
}
})
});;
我不認爲，這是很好的解決方案，因爲它沒有爲一週，一天工作????
任何想法請！
我沒有設法看到您更新的jsfiddle，它看起來像具有相同的url比我的，這是正常的嗎？所以我很抱歉，如果我表達自己的不好，我會盡力做得更好。我想從一個可排序的列表項拖放到fullcalendar，而不是像arshaw的網站中記錄的那樣從可拖動的列表項中拖動。 – 2013-02-18 14:46:03
感謝lukasz更新你的鏈接，但可排序的列表不能再SORT了，這是正常的嗎？ – 2013-02-18 15:49:45
小提琴鏈接再次更新，也許有所幫助;使用jQuery可拖動元素拖放fullcalendar工作，所以有機會通過使用'connectToSortable'選項來連接可拖動和可排序的元素 – 2013-02-18 16:03:33