CODEWITHSUNDEEP
javascriptjquerycalendargoogle-apigoogle-calendar-api
JVG
JVG

Reputation: 21170

Google Calendar API return date, time and event name to Javascript

banging my head against the wall with Google's calendar API. My calendar is public, with the address of:

 [email protected]

I want to access the 10 closest events in the future, and put their date, time and event name onto my page. I'm trying to access this as follows:

 var url = 'http://www.google.com/calendar/feeds/[email protected]/public/full?orderby=starttime&sortorder=ascending&max-results=10&futureevents=true&alt=json'

 $.get(url, function(data){
    console.log(data);
 });

This correctly accesses my calendar data, but for some bizarre reason doesn't let me access my events' date and times, just the event name.

Can anyone shed some light on this? The calendar sharing settings are fully public.

Upvotes: 1

Views: 2622

Answers (1)

Alex
Alex

Reputation: 5278

You need to call a different endpoint. I was successfully able to make a call and get the list back (including event names, dates, and a lot of other details.

For example:

{

   "kind": "calendar#event",
   "etag": "\"2814404343670000\"",
   "id": "bpgo6gtet1ao8j73kn770e6r20",
   "status": "confirmed",
   "htmlLink": "https://www.google.com/calendar/event?eid=YnBnbzZndGV0MWFvOGo3M2tuNzcwZTZyMjAgOXA3OXNsMmEzMXFncWZ2amtma3VwZGJmOG9AZw",
   "created": "2014-08-04T06:25:51.000Z",
   "updated": "2014-08-05T01:29:31.835Z",
   "summary": "Startup leadership women",
   "creator": {
    "email": "[email protected]",
    "displayName": "Sean Qian"
   },
   "organizer": {
    "email": "[email protected]",
    "displayName": "Queens Collective Events",
    "self": true
   },
   "start": {
    "dateTime": "2014-08-05T18:00:00+10:00"
   },
   "end": {
    "dateTime": "2014-08-05T21:00:00+10:00"
   },
   "iCalUID": "[email protected]",
   "sequence": 0,
   "reminders": {
    "useDefault": true
   }
  } ...

In order to make the call, use the following endpoint:

GET https://www.googleapis.com/calendar/v3/calendars/9p79sl2a31qgqfvjkfkupdbf8o%40group.calendar.google.com/events?key={YOUR_API_KEY}

Pass that GET url into your AJAX call (obviously switching API_KEY with your actual key).
You can get your api key from: https://console.developers.google.com

If you don't have an API account set up, I would go and create one, and use the Google Calendar API. It will make your life much easier. Keep in mind, you may have to add your testing server (localhost?) to Google's API settings in order for the call to return successfully.

If you need help let me know, I've played around with the Cal API quite a bit lately...

Upvotes: 2

Related Questions