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，则不得直接渲染已删除的事件，而是获取其数据（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回调仅适用于＆＃34;低级＆＃34;丢弃数据。 eventReceive回调就是您想要的：

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

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

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

3 个答案: