"Uncaught TypeError: Cannot read property 'clone' of undefined" when adding recurring events to database

Question

For some reason I'm getting ""Uncaught TypeError: Cannot read property 'clone' of undefined" when I'm trying to update the calendar with a recent set of recurring event using $('#calendar').fullCalendar('updateEvent',events[i]); in the sucess call of my ajax (check last code snippet)

This is the structure of my function call:

I'm calling addEventSource inside the eventReceive function so when an element is dragged to the calender, this is deleted and the recurring events are added:

eventReceive : function(event) {
    ...
     $('#calendar').fullCalendar('removeEvents', event._id);
    $('#calendar').fullCalendar(  'addEventSource',function(start, end, status,  callback) {    

Inside addEventSource, i simply check the day of the week that the event has been dropped upon and duplicate that for upcoming days of the same day:

$('#calendar').fullCalendar( 'addEventSource',function(start, end, status,  callback) {
  var start_date = event.start.toDate();
  var stop_date = new Date("2017-01-15"); // for testing purposes to avoid filling up database with too many entries
  var events = [];
  ...
    for (loop = start_date.getTime(); (loop <= end._d.getTime()) && (loop <= stop_date); loop = loop + (24 * 60 * 60 * 1000)) { 
       ...
       var test_date = new Date(loop);
       var momentOfDate = moment(test_date);
       var formattedStart = momentOfDate.format("YYYY-MM-DDTHH:mm:ss");
       ...
        if (test_date.getDay() == event.start.weekday()) {
              events.push({
                                title: event.title,
                                start: formattedStart,
                                end: // same procedure for end as start
                                parent_id : // some variable
                                id: // some unique variable,
                                tDuration : event.tDuration,
                                dow : ''
          });
        } //if          
     } // for loop
     callback(events);

After the callback, we would like to add the newly created events to the database. And this works just fine, every recurring event i added is in the database IF i exclude the "$('#calendar').fullCalendar('updateEvent',events[i]);" function call but then I need to reload the page in order for the database to update when i move events around. This is the ajax call:

for (i = 0 ; i < events.length-1 ; i++) {
        var duration = events[i].tDuration;
        $.ajax({
            url: 'process.php',
            data: 'type=new&title='+events[i].title+'&startdate='+events[i].start+'&duration='+duration+'&enddate='+events[i].end+'&dow='+events[i].dow,
            type: 'POST',
            dataType: 'json',
            success: function(response){
                //location.reload(); WORKS but requires reload
                  $('#calendar').fullCalendar('updateEvent',events[i]); // generates typeError but needed in order modify recurring events

                            },
            error: function(e){
                    alert('error');
                    console.log(e.responseText);
                }
            })
        }

What do i do in this situation? I can without problems add a single event and perform an identical version of the ajax without any errors, the problem occurs when I try and access the events in my own 'events' array instead of using the event passed as an argument in the eventReceive function call. However since I'm adding multiple events I'm kinda forced to do it the way that I'm doing it it seems like.

Code for solo event (WORKS!):

 eventReceive : function(event) {
            var title = event.title;
            var start = event.start.format();
            var end = event.end.format();
            var duration = event.tDuration;
            var dow ='';
            $.ajax({
                url: 'process.php',
                data: 'type=new&title='+title+'&startdate='+start+'&duration='+duration+'&enddate='+end+'&dow='+dow,
                type: 'POST',
                dataType: 'json',
                success: function(response){
                    event.id = response.eventid;
                    $('#calendar').fullCalendar('updateEvent',event);
                },
                error: function(e){
                    alert('error');
                    console.log(e.responseText);
                }
            });

---

removed attempt1 cus found a solution myself that worked

Answer 1

When you call updateEvent, event must be the original Event Object for an event, not merely a reconstructed object.

So you will either have to get the original event and update the properties on it and then call updateEvent or you could call removeEvents passing the id and then call renderEvent passing the event from your array.