Bootstrap Fullcalendar存儲對象 - 我在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); 
} 

saveEventData功能

//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到您的日曆Check docs here或者您可以使用另一種方法events爲數組docs here