我尝试将项目从可排序事件列表拖到fullcalendar.
我没有在Adam Shaw的完整日历的文档中看到这一点,但也许有人已经做过一次.
这是jsfiddle：http://jsfiddle.net/gtbm/VjNFn/2/
这里的代码如下：
/* 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);
}
});
我希望你能提供帮助,
在此先感谢,C
最佳答案
所以我设法在月视图中找到可拖动和可排序列表的解决方案.
你可以在这里找到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',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"),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,agendaDay'
},defaultView: 'agendaWeek',// 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',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;
}
})
});;
我不认为,这是一个很好的解决方案,因为它不适用于一天一天????
有任何想法！
