当通过外部拖放将事件添加到Fullcalendar时，项目不会获得id [英] while adding events to Fullcalendar by external drag and drop, item doesn't get id

问题描述

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

  drop：function（date，allDay）{//这个函数是当某些东西被删除时调用
 
 //检索被删除元素存储的事件对象
 var originalEventObject = $（this）.data（'eventObject'）; 
 
 //我们需要复制它，以便多个事件不会引用同一个对象
 var copiedEventObject = $ .extend（{}，originalEventObject）; 
 
 //指定报告的日期
 copiedEventObject.start = date; 
 copiedEventObject.allDay = allDay; 
 
 //在日历上呈现事件
 //最后的`true`参数确定事件是否粘住（http://arshaw.com/fullcalendar/docs/event_rendering/ renderEvent /）
 $（'＃calendar'）。fullCalendar（'renderEvent'，copiedEventObject，true）; 
 
 //是否勾选删除后删除复选框？ 
 if（$（'＃drop-remove'）。is（'：checked'））{
 //如果是，从Draggable Events列表中删除元素
 $（此）卸下摆臂（）; 
} 
 
} 
  

每件事都可以，但我想要将这个放下的事件添加到我的数据库中。所以我在这里添加了我的添加对话框代码。

  var eventToAdd = {
 title：$ .trim（$（this ）.text（）），
 //标题：$（this）.attr（'id'），
描述：$（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（请输入字符：A到Z，a到z，0到9，空格）; 
} 
 else {
 // alert（sending+ eventToAdd.title）; 
 
 PageMethods.addEvent（eventToAdd，addSuccess）; 
} 
  

所以结果是，

  drop：function（date，allDay）{//当某些东西被删除时调用这个函数
 
 if（$（this）.attr（' id'）==''）
 return; 
 //检索已删除元素的存储事件对象
 var originalEventObject = $（this）.data（'eventObject'）; 
 
 //我们需要复制它，以便多个事件不会引用同一个对象
 var copiedEventObject = $ .extend（{}，originalEventObject）; 
 
 //指定报告的日期
 copiedEventObject.start = date; 
 copiedEventObject.allDay = allDay; 
 
 $（'＃calendar'）。fullCalendar（'renderEvent'，copiedEventObject，true）; 
 
 $（this）.remove（）; 
 
 
 var eventToAdd = {
 title：$ .trim（$（this）.text（）），
 // title：$（this）.attr （'id'），
描述：$（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（请输入字符：A到Z，a到z，0到9，空格）; 
} 
 else {
 // alert（sending+ eventToAdd.title）; 
 
 PageMethods.addEvent（eventToAdd，addSuccess）; 
 
 
 
 
 
 
 $ b 
显示事件，事件可拖动，但它不会没有得到Id。我认为在这一行渲染的事件与发送到数据库的事件无关： 
 
 
  $（'＃calendar '）.fullCalendar（'renderEvent'，copiedEventObject，true）; 
  
 
 
解决方案
我有类似的问题，元素，但通过点击时间段创建新事件。
 
 
 
如果您需要id，您不能直接渲染掉落的事件，而是获取其数据（标题，开始，结束，全天），将其保存到数据库中，检索保存的事件并进行渲染。这样它就会有与之关联的ID。
 
 
 
用于将其保存到数据库的方法必须返回fullcalendar所需的事件信息才能呈现。
 p> 
 
 
这是我用过的代码： 
 
 
  select：function（start ，end，allDay）{
 
 //初始化ajax调用中使用的变量所需的代码
 // ... 
 
 //用于调用的URL我的cakephp控制器/操作以及将事件保存到数据库所需的数据
 var url =/ eugdef / availabilities / add？start =+ startyear + - + startmonth + - + startday ++ start + + + + + + + + + + + + + + + + + + + + + + + + +：+ + + + + + teacher_id + &安培; TEACHER_NAME = + TEACHER_NAME + &安培;学期= +学期+ &安培; year_id = + year_id; 
 $ .post（
 url，
 function（data）{//回调函数检索控制器发送的响应/动作
 // event实际上是渲染到日历
 var event = jQuery.parseJSON（data.substr（1，data.length-2））; 
 //实际将新事件渲染到日历
 calendar.fullCalendar （'renderEvent'，event，false）; 
 calendar.fullCalendar（'unselect'）; 
} 
）; 
} 
  
我希望这可以帮助 
I'm using FullCalendar's external drag and drop, with his code. 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();
            }

        }
Every thing is okay, but I want to add this dropped event to my database. So I added my add dialog codes here.
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);
        }
So the result is,
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);
            }
        }
Event is shown, event is draggable, but it doesn't get the Id. I think the event which rendered at this row isn't related with the event sent to the database:
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

解决方案
I had a similar problem, not when dropping an external element, but when creating a new event by clicking on a time slot.

If you require the id, you must not render directly the event dropped, but obtain its data (title, start, end, allday), save it to the database, retrieve the saved event and render it. This way it will have the ID associated to it.

The method used to save it to the database, must return the event information required by fullcalendar to be rendered.

This is the code I have used:
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');
        }
    );
}
I hope this helps

                        
这篇关于当通过外部拖放将事件添加到Fullcalendar时，项目不会获得id的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！