我尝试将项目从可排序事件列表拖到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',
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;
}
})
});;
我不认为，这是一个很好的解决方案，因为它不适用于一天一天????
有任何想法！
将这段代码添加到您的每个方法：
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
你可以在更新的jsfiddle http://jsfiddle.net/EKTWJ/中查看
文档提到了here列表中的一些拖累。
有一个完整的工作示例here，所以你可以检查页面的来源。
@Brousse Ouilisse，你是如此接近正确答案:(在你的评论https://stackoverflow.com/a/15251724/1198292你应该改变
$(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;
}
})
我试图展示解决方案，但我没有设法让它工作... qazxsw poi
你在这个jsfiddle中找不到的是这里添加fullcalendar.js代码：
http://jsfiddle.net/gtbm/VjNFn/20/
我希望它有所帮助，C
设置可排序元素的/* 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;
}
})
// **********************************************
...
属性似乎对我有用。它在data-event中有描述
fullcalendar eventReceive doc
也可以使用jquery设置data属性。
<ul id="sortable-list">
<li data-event='{"title":"my event"}'>Task</li>
</ul>
这是一个解决方案。
$('#selector').data('event', {title: 'my event'})