通过外部拖放将事件添加到完整日历时，项目未获得ID

Question

我正在使用FullCalendar的外部拖放功能，以及他的代码。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

供您参考，您也可以在HTML中为可拖动div设置一个id，然后执行如下操作:

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

在"drop:"属性内(紧跟在:

之后)

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

Answer 2

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

如果你需要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 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/