How to update an event in Google Calendar using javascript?

Question

I need to update the name of some Google Calendar events, once I get them through JavaScript. I only have the sample code which Google shows in their Google Developer site,

Answer 1

Hi I know it's late but i face the same issue i found a solution so i thought sharing it will be good. First i created the event object then pass the dynamic values to object keys

var event = {
  'summary': summaryTxt,
  'location': locationTxt,
  'description': ' ',
  'start': {
    'dateTime': datetime,
  },
  'end': {
    'dateTime': datimeEnd,
  },


  'reminders': {
    'useDefault': false,
    'overrides': [
      {'method': 'email', 'minutes': 24 * 60},
      {'method': 'popup', 'minutes': 10}
    ]
  }
};  

I have a google event id stored in database

var google_event_id = '728326gghd';

Then i pass the id variable and event object to Google Calendar Api update method

  var request = gapi.client.calendar.events.update({
                  'calendarId': 'primary',
                  'eventId':google_event_id,
                  'resource': event
                });

Then i execute the request

 request.execute(function(event) {
                    alert('Event updated successfully' );
                });

Answer 2

        /**
         *  Update an event
         */
        function updateEvent(eventId) {
            if (eventId) {  
                var eventToUpdate = gapi.client.calendar.events.get({
                    "calendarId": 'primary', 
                    "eventId": eventId
                });

                eventToUpdate.summary = $("#update-name").val(); //Replace with your values of course :)
                eventToUpdate.location = $("#update-location").val();
                eventToUpdate.description = $("#update-description").val();
                eventToUpdate.start = {
                    'dateTime': (new Date(2017, 04, 22, 8, 00, 00)).toISOString(), //2017-04-22 08h00m00s
                    'timeZone': 'Europe/Paris'
                };
                eventToUpdate.end = {
                    'dateTime': (new Date(2017, 04, 22, 9, 00, 00)).toISOString(), //2017-04-22 09h00m00s
                    'timeZone': 'Europe/Paris'
                };

                var request = gapi.client.calendar.events.patch({
                    'calendarId': 'primary',
                    'eventId':eventId,
                    'resource': eventToUpdate
                });

                request.execute(function(event) {
                    console.log('Event updated: ' + event.htmlLink);

                    //Action. Maybe refresh your events list ? :)
                });
            }
        }

Answer 3

5+ years after the question was asked, here is how I succeeded:

/**
 * changes transparency (i.e. Busy or Available) of event passed
 * 
 * @author dugBarnz
 * @version 1.0
 * @since 2021/01/11
 * @param {string} event id
 */
function zzChangeTransparency_(_calendarId, _eventId)
{
  var event = Calendar.Events.get(_calendarId, _eventId);
  if (event && event.transparency)
    event.transparency = "opaque";
  else
    event.transparency = "transparent";

  Calendar.Events.update(event, _calendarId, _eventId);
}

Answer 4

You have to perform an HTTP (PUT) Request. This could maybe done be done with AJAX or jQuery.ajax():

jQuery.ajax:

//This is the event data you got, with the changed values, you want to be changed in Calendar API
var changedEventData;

//changing the data of an calendar event
$.ajax({
  url: "https://www.googleapis.com/calendar/v3/calendars/" + calendarId + "/events/" + eventId,
  method: "PUT",
  data: changedEventData
});

Remember to implement jQuery

I hope this works for you!