Embed Google Calendar in website and use events from calendar

Question

I'm attempting to set up a Google calendar on my website. Embedding it is pretty easy by just putting the iframe where I want on the page.

<iframe src="https://calendar.google.com/calendar/embed?src=mycalendar%gmail.com&ctz=America/Edmonton" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

I will have a calendar page, but I also want to have a small "upcoming events" section on the home page that displays the event names, dates and times of the next upcoming 3 events. Is it possible to access the events from the calendar?

Answer 1

You can use Google's Calendar API to program some more bespoke Calendar behaviour such as processing particular events in the way you describe. Please see the Google Calendar API Guide for Javascript .

There is a function within the API example code which comes close to what you're looking to achieve:

  /**
   * Print the summary and start datetime/date of the next ten events in
   * the authorized user's calendar. If no events are found an
   * appropriate message is printed.
   */
  function listUpcomingEvents() {
    var request = gapi.client.calendar.events.list({
      'calendarId': 'primary',
      'timeMin': (new Date()).toISOString(),
      'showDeleted': false,
      'singleEvents': true,
      'maxResults': 10,
      'orderBy': 'startTime'
    });

    request.execute(function(resp) {
      var events = resp.items;
      appendPre('Upcoming events:');

      if (events.length > 0) {
        for (i = 0; i < events.length; i++) {
          var event = events[i];
          var when = event.start.dateTime;
          if (!when) {
            when = event.start.date;
          }
          appendPre(event.summary + ' (' + when + ')')
        }
      } else {
        appendPre('No upcoming events found.');
      }

    });
  }

Assuming everything else is in order, you should be able to adapt this, using 'maxResults': 3, instead of 'maxResults': 10, in order to get the basic events data you're after.

Answer 2

You can access any iframe's contents by using

document.getElementById('myFrame').contentWindow.document

or, with jQuery

$('#myFrame').contents().{...};

where your iframe has the id "myFrame".