引导完整日历存储对象 - 我在 chrome 上添加/修改对象，但在刷新日历后更改消失了

Question

如何存储对象，直到我决定修改或删除。 我通过 Web 浏览器进行更改，例如在对象中拖动或单击日历，但在刷新页面后，返回到默认值。助推说唱。感谢您的帮助

 $(document).ready(function () {

        /* initialize the external events
        -----------------------------------------------c ------------------*/
        $('#external-events div.external-event2').each(function () {
            // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
            // it doesn't need to have a start or end
            var eventObject = {
                title: $.trim($(this).text()) // use the element's text as the event title
            };
            // store the Event Object in the DOM element so we can get to it later
            $(this).data('eventObject', eventObject);
            // make the event draggable using jQuery UI
            $(this).draggable({
                zIndex: 999,
                revert: true,      // will cause the event to go back to its
                revertDuration: 0  //  original position after the drag
            });



        });



        /* initialize the external events
        -----------------------------------------------c ------------------*/
        $('#external-events div.external-event').each(function () {
            // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
            // it doesn't need to have a start or end
            var eventObject = {
                title: $.trim($(this).text()) // use the element's text as the event title
            };
            // store the Event Object in the DOM element so we can get to it later
            $(this).data('eventObject', eventObject);
            // make the event draggable using jQuery UI
            $(this).draggable({
                zIndex: 999,
                revert: true,      // will cause the event to go back to its
                revertDuration: 0  //  original position after the drag
            });



        });

        /* initialize the calendar
        -----------------------------------------------------------------*/
        var calendar = $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            selectable: true,
            selectHelper: true,
            select: function (start, end, allDay) {
                var title = prompt('Event Title:');
                if (title) {
                    calendar.fullCalendar('renderEvent',
                        {
                            title: title,
                            start: start,
                            end: end,
                            allDay: allDay
                        },
                        true // make the event "stick"
                    );
                }
                // calendar.fullCalendar('unselect');
            },


            eventClick: function (calEvent, jsEvent, view) {

                var title = prompt('Rename Event Title:');
                calEvent.title = title;
                // copiedEventObject.title = title;
                alert('Altered Event : ' + calEvent.title);

                // change the border color just for fun
                $(this).css('border-color', 'red');
            },



            editable: true,
            droppable: true, // this allows things to be dropped onto the calendar !!!
            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;
                //    copiedEventObject.title = 'abc';     //<<<Change the title

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

    });

Answer 1

您应该使用AJAX请求将事件存储在数据库中。并从相同的获取它，在您的drop:function();尝试以下代码：

drop: function(date, allDay, jsEvent, ui) { // 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);
    //cvalculate endTime using duration of event
    var endTime = date.getTime() + (copiedEventObject.duration*60000);
   //function to store event data to db.
   saveEventData(date, allDay, copiedEventObject, endTime, copiedEventObject.duration);
}

保存事件数据功能

 //function to save events when droped external events
function saveEventData(start, allday, copiedEventObject, endTime, duration) {
    jQuery.ajax({
            url: ''//url to your code,
            type: 'post',
            cache: false,
            data: {'start':start, 'allday': allday, 'end': endTime, 'additional_info':copiedEventObject},
            success: function (response) {
                    $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
            }
        });
}

现在尝试将events: ''//url to your json feed添加到您的日历中 在此处查看文档，或者您可以使用另一种方法events此处的数组文档