44

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

Kara
  • 6,115
  • 16
  • 50
  • 57
Gladclef
  • 687
  • 1
  • 8
  • 17

2 Answers2

61

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.

Dan Holevoet
  • 9,183
  • 1
  • 33
  • 49
  • 1
    this is a great related resource: `https://developers.google.com/google-apps/calendar/v3/reference/events#resource` – Joe Jan 06 '13 at 20:45
  • Hi, I've try to use resource to get events from a date to an other date, but i don't know why i receive an error in console log. "Object {code: 401, message: "Login Required", data: Array[1], error: Object}" – Desnoxav May 06 '13 at 14:18
  • 1
    Thanks, this got me up and running in under 5 minutes. – HexInteractive May 14 '13 at 15:00
  • 9
    Good example, even if I'm chiming in 4 years later. I can't believe how thin on the ground examples of this stuff are. There is no example of how to use the delete feature in Javascript. Too much of the Google API (when used in Google Apps) seems to be muddling around trying stuff until it works without solid, workable examples in the docs. – sijpkes Mar 01 '16 at 23:15
  • Good day! I was wondering if this would work if the JS file is not being served? I mean just a simple JS file sitting in the file system and being opened in the browser via a simple html. I tried it but I had no luck. I was thinking I jut missed something. – Oneb Jul 11 '18 at 11:04
1

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()
COG_Digital
  • 11
  • 1