通过外部拖放向Fullcalendar添加事件时，item不会获取id

我正在使用FullCalendar的外部拖放function和他的代码。 http://arshaw.com/js/fullcalendar-1.5.2/demos/external-dragging.html

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(); } } 

一切都没问题，但我想将这个丢弃的事件添加到我的数据库中。 所以我在这里添加了添加对话框代码。

 var eventToAdd = { title: $.trim($(this).text()), //title: $(this).attr('id'), description: $(this).attr('original-title'), start: date.format("dd-MM-yyyy hh:mm:ss tt"), end: date.format("dd-MM-yyyy hh:mm:ss tt") }; if (checkForSpecialChars(eventToAdd.title) || checkForSpecialChars(eventToAdd.description)) { alert("please enter characters: A to Z, a to z, 0 to 9, spaces"); } else { //alert("sending " + eventToAdd.title); PageMethods.addEvent(eventToAdd, addSuccess); } 

结果是，

 drop: function (date, allDay) { // this function is called when something is dropped if($(this).attr('id')=='') return; // 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; $('#calendar').fullCalendar('renderEvent', copiedEventObject, true); $(this).remove(); var eventToAdd = { title: $.trim($(this).text()), //title: $(this).attr('id'), description: $(this).attr('original-title'), start: date.format("dd-MM-yyyy hh:mm:ss tt"), end: date.format("dd-MM-yyyy hh:mm:ss tt") }; if (checkForSpecialChars(eventToAdd.title) || checkForSpecialChars(eventToAdd.description)) { alert("please enter characters: A to Z, a to z, 0 to 9, spaces"); } else { //alert("sending " + eventToAdd.title); PageMethods.addEvent(eventToAdd, addSuccess); } } 

显示事件，事件是可拖动的，但它没有获得Id。 我认为在此行呈现的事件与发送到数据库的事件无关：

 $('#calendar').fullCalendar('renderEvent', copiedEventObject, true); 

Answer 1

我遇到了类似的问题，不是在删除外部元素时，而是在通过单击时隙创建新事件时。

如果您需要id，则不能直接渲染已删除的事件，而是获取其数据（title，start，end，allday），将其保存到数据库，检索已保存的事件并进行渲染。 这样它就会有与之关联的ID。

用于将其保存到数据库的方法必须返回要呈现的fullcalendar所需的事件信息。

这是我用过的代码：

 select: function(start, end, allDay) { //code required to initialise the variables used in the ajax call //... //URL used to call my cakephp controller/action along with the data required to save the event to the database var url = "/eugdef/availabilities/add?start="+startyear+"-"+startmonth+"-"+startday+" "+starthour+":"+startminute+":00&end="+endyear+"-"+endmonth+"-"+endday+" "+endhour+":"+endminute+":00&allday="+allday+"&teacher_id="+teacher_id+"&teacher_name="+teacher_name+"&semester="+semester+"&year_id="+year_id; $.post( url, function(data){ //callback function retrieving the response sent by the controller/action //event is the object that will actually be rendered to the calendar var event = jQuery.parseJSON(data.substr(1,data.length-2)); //actually rendering the new event to the calendar calendar.fullCalendar('renderEvent', event, false); calendar.fullCalendar('unselect'); } ); } 

我希望这有帮助

Answer 2

仅供参考，您还可以在HTML中设置可拖动div的ID，然后执行以下操作：

 copiedEventObject.id = $( this ).attr('id'); 

在“drop：”属性中（右后：

 var copiedEventObject = $.extend({}, originalEventObject); 

在“external-dragging.html”示例中。

Answer 3

对于外部事件， drop回调仅适用于“低级”丢弃数据。 eventReceive回调是你想要的：

 eventReceive: function(event, view) { alert("Dropped event: " + event['title']); // any data linked to the dropped event }, 

文档： https ： //fullcalendar.io/docs/dropping/eventReceive/