43
votes

What I'm trying to do: Add events to a google calendar from my site using javascript.

What I can't do: Find a good tutorial/walk through/example for the google calendar api. All the documentation I've been able to find links back and forth between v1 and v2 api's, or the v3 api doesn't seem to be client based.

For those that are curious, the site I'm developing this for: http://infohost.nmt.edu/~bbean/banweb/index.php

2
@Galdchef: Access forbidden to infohost.nmt.edu/~bbean/banweb/index.phpRamon Araujo
Sorry about posting a link to my website in the original question (bad form). @RamonAraujo the site has moved to beanweb.us.Gladclef

2 Answers

61
votes

Google provides a great JS client library that works with all of Google's discovery-based APIs (such as Calendar API v3). I've written a blog post that covers the basics of setting up the JS client and authorizing a user.

Once you have the basic client enabled in your application, you'll need to get familiar with the specifics of Calendar v3 to write your application. I suggest two things:

  • The APIs Explorer will show you which calls are available in the API.
  • The Chrome developer tools' Javascript console will automatically suggest method names when you are manipulating gapi.client. For example, begin typing gapi.client.calendar.events. and you should see a set of possible completions (you'll need the insert method).

Here's an example of what inserting an event into JS would look like:

var resource = {
  "summary": "Appointment",
  "location": "Somewhere",
  "start": {
    "dateTime": "2011-12-16T10:00:00.000-07:00"
  },
  "end": {
    "dateTime": "2011-12-16T10:25:00.000-07:00"
  }
};
var request = gapi.client.calendar.events.insert({
  'calendarId': 'primary',
  'resource': resource
});
request.execute(function(resp) {
  console.log(resp);
});

Hopefully this is enough to get you started.

0
votes

this should do the trick

    //async function to handle data fetching
    async function getData () {
    //try catch block to handle promises and errors
    try {
        const calendarId = ''
        const myKey = ''
        //using await and fetch together as two standard ES6 client side features to extract the data
        let apiCall = await fetch('https://www.googleapis.com/calendar/v3/calendars/' + calendarId+ '/events?key=' + myKey)
        //response.json() is a method on the Response object that lets you extract a JSON object from the response
        //response.json() returns a promise resolved to a JSON object
        let apiResponse = await apiCall.json()
        console.log(apiResponse)
    } catch (error) {
        console.log(error)
    }
}
getData()