Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Need good example: Google Calendar API in Javascript

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

like image 764
Gladclef Avatar asked Jul 23 '12 06:07

Gladclef


2 Answers

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.

like image 128
Dan Holevoet Avatar answered Nov 08 '22 09:11

Dan Holevoet


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()
like image 33
COG_Digital Avatar answered Nov 08 '22 11:11

COG_Digital