我试图将一个项目从可排序的事件列表拖动到fullcalendar。
我没有在亚当·肖的完整日历中看到这一点，但也许有人已经做过一次了。
这是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/
文档在这里提到了从列表拖动的一些操作。
这里有一个完整的工作示例，所以您可以检查页面的来源。
@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;
}
})
我试图展示解决方案，但我没能成功。。。http://jsfiddle.net/gtbm/VjNFn/20/
你在这个jsfiddle中找不到的是添加到fullcalendar.js中此处的代码：
/* 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;
}
})
// **********************************************
...
我希望它能有所帮助，C
设置可排序元素的data-event属性似乎对我有用。它在fullcalendar eventReceive doc 中有描述
<ul id="sortable-list">
<li data-event='{"title":"my event"}'>Task</li>
</ul>
也可以使用jquery设置数据属性。
$('#selector').data('event', {title: 'my event'})
这是一个解决方案。
create: function(event, ui) {
$(this).children().each( (index, item) => {
$(item).data('event', { // DATA TO PASS TO CALENDAR
title: this.data.title,
type: this.data.type,
cells: this.data.cells,
event_id: this.data.id
});
});
},