Google Calendar javascript api - Add multiple events

Question

I've been facing a problem when I'm trying to add multiple events to a Google Calendar via javascript v3 api.

I have an array which entries are events like these:

newEvent = {
    "summary": response[i].name+" BDay!!",
    "start": {
      "dateTime": date
    },
    "end": {
      "dateTime": date
    }
  };

  events[i]=newEvent;

After, I make a call to Google Calendar api in order to add the events:

var request;
for(var j = 0; j<events.length; j++) {

  console.log(events[j]);

  request = gapi.client.calendar.events.insert({
    'calendarId': calendarId,
    'resource': events[j]
  });
  request.execute(function(resp) {
   console.log(resp);
 });
}

However, it turns out that all the events are placed in the same date into the calendar(which actually is the last date in array events[]). I believe that it could be because the requests are callback functions, but I'm not sure.

Would appreciate the help!

soredive · Answer 1 · 2017-10-10T09:02:57.917

6

If you want to insert multiple events at once, you should use batch.

var batch = gapi.client.newBatch();
batch.add(gapi.client.calendar.events.insert({
    'calendarId': 'primary',
    'resource': events[0]
}));
batch.add(gapi.client.calendar.events.insert({
    'calendarId': 'primary',
    'resource': events[1]
}));
batch.add(gapi.client.calendar.events.insert({
    'calendarId': 'primary',
    'resource': events[2]
}));
            ......

batch.then(function(){
    console.log('all jobs done!!!')
});

edited Oct 10 '17 at 09:02

answered Aug 13 '16 at 14:44

soredive

795
1
9
25

How to add these events dynamically? – anonymous May 29 '18 at 10:27

score 3 · Accepted Answer · edited May 23 '17 at 12:08

events[j] is being rebound on each iteration of the for loop. Try using an anonymous function to bind to the correct event:

var request;
for(var j = 0; j<events.length; j++) {

  console.log(events[j]);

  request = function(resource) {  // Function that returns a request.
    return gapi.client.calendar.events.insert({
      'calendarId': calendarId,
      'resource': resource
    });
  }(events[j]);  // Bind to the current event.
  request.execute(function(resp) {
    console.log(resp);
  });
}

See the following question for more details on JavaScript arrays and closures: JavaScript closure inside loops – simple practical example

Here is an easier-to-read version of the code above that moves all the processing into a function:

var makeRequest = function(resource) {
  console.log(resource);
  var request = gapi.client.calendar.events.insert({
    'calendarId': calendarId,
    'resource': resource
  });
  request.execute(function(resp) {
    console.log(resp);
  });
};

for(var j = 0; j<events.length; j++) {
  makeRequest(events[j]);
}

Thanks, it helped at least to read more about closure and variable bounding in javascript. However, I fixed the problem only after bond the events[j] in the cycle and also because I wasn't creating a new date for every event created, instead I was only updating the same variable each cycle and, for some reason, it wasn't working as expected. Anyway, thanks again! — gpestana, Mar 21 '13 at 22:25

score 0 · Answer 3 · answered May 29 '18 at 13:33

As soredive, Mentioned, you need to use batch to add multiple events

why batch? The primary reason to use the batch API is to reduce network overhead and thus increase performance.

example:

createMultipleEvents() {
    const events = [ {
      'summary': 'sample test events1',
      'location': 'coimbatore',
      'start': {
          'date': '2018-08-29',
          'timeZone': 'America/Los_Angeles'
      },
      'end': {
          'date': '2018-08-29',
          'timeZone': 'America/Los_Angeles'
      }
  },
  {
    'summary': 'sample test events2',
    'location': 'coimbatore',
    'start': {
        'date': '2018-08-29',
        'timeZone': 'America/Los_Angeles'
    },
    'end': {
        'date': '2018-08-29',
        'timeZone': 'America/Los_Angeles'
    }
},
];
const batch = gapi.client.newBatch();
events.map((r, j) => {
  batch.add(gapi.client.calendar.events.insert({
    'calendarId': 'primary',
    'resource': events[j]
  }))
})
batch.then(function(){
  console.log('all jobs now dynamically done!!!')
});
  }

Google Calendar javascript api - Add multiple events

3 Answers3

Linked