通过外部拖放将事件添加到 Fullcalendar 时，项目没有获得 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);

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

Answer 2

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

如果你需要 id，你不能直接渲染被丢弃的事件，而是获取它的数据（标题、开始、结束、全天），将其保存到数据库中，检索保存的事件并渲染它。这样，它就会有与之关联的 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/