Bootstrap Fullcalendar Storing Object - i add/modify an object at chrome but after i refresh the calendar the changes gone away -

how store object, until decide modify or delete. make change thru web browser dragging in object or click in calendar after refresh page, goes default. boostrap. help

 $(document).ready(function () {           /* initialize external events         -----------------------------------------------c ------------------*/          $('#external-events div.external-event2').each(function () {              // create event object (http://arshaw.com/fullcalendar/docs/event_data/event_object/)             // doesn't need have start or end             var eventobject = {                 title: $.trim($(this).text()) // use element's text event title             };              // store event object in dom element can later             $(this).data('eventobject', eventobject);              // make event draggable using jquery ui             $(this).draggable({                 zindex: 999,                 revert: true,      // cause event go                 revertduration: 0  //  original position after drag             });               });                /* initialize external events         -----------------------------------------------c ------------------*/          $('#external-events div.external-event').each(function () {              // create event object (http://arshaw.com/fullcalendar/docs/event_data/event_object/)             // doesn't need have start or end             var eventobject = {                 title: $.trim($(this).text()) // use element's text event title             };              // store event object in dom element can later             $(this).data('eventobject', eventobject);              // make event draggable using jquery ui             $(this).draggable({                 zindex: 999,                 revert: true,      // cause event go                 revertduration: 0  //  original position after drag             });               });           /* initialize 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 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 border color fun                 $(this).css('border-color', 'red');              },                    editable: true,             droppable: true, // allows things dropped onto calendar !!!             drop: function (date, allday) { // function called when dropped                  // retrieve dropped element's stored event object                 var originaleventobject = $(this).data('eventobject');                   // need copy it, multiple events don't have reference same object                 var copiedeventobject = $.extend({}, originaleventobject);                  // assign date reported                 copiedeventobject.start = date;                 copiedeventobject.allday = allday;                 //    copiedeventobject.title = 'abc';     //<<<change title                    // render event on calendar                 // last `true` argument determines if event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderevent/)                 $('#calendar').fullcalendar('renderevent', copiedeventobject, true);                  // "remove after drop" checkbox checked?                 if ($('#drop-remove').is(':checked')) {                     // if so, remove element "draggable events" list                     $(this).remove();                 }              }         });       }); 

you should store events in database ajax request. , fetch same, on drop:function(); try bellow code:

drop: function(date, allday, jsevent, ui) { // function called when dropped     // retrieve dropped element's stored event object     var originaleventobject = $(this).data('eventobject');      // need copy it, multiple events don't have reference same object     var copiedeventobject = $.extend({}, originaleventobject);      //cvalculate endtime using duration of event     var endtime = date.gettime() + (copiedeventobject.duration*60000);     //function store event data db.    saveeventdata(date, allday, copiedeventobject, endtime, copiedeventobject.duration); } 

saveeventdata function

 //function save events when droped external events function saveeventdata(start, allday, copiedeventobject, endtime, duration) {     jquery.ajax({             url: ''//url code,             type: 'post',             cache: false,             data: {'start':start, 'allday': allday, 'end': endtime, 'additional_info':copiedeventobject},             success: function (response) {                     $('#calendar').fullcalendar('renderevent', copiedeventobject, true);             }         }); } 

and try adding events: ''//url json feed calendar check docs here or can use method events array docs here