Javascript Google Calendar API Set Calendar to Public

17
votes

I am using google calendar's API to show a stripped down version of my company calendar. I'd like for anyone to view my version of the calendar on my site. Currently, only I can view the calendar page and if I were to share the page URL with anyone, it does not work - they can not view anything.

I'm using Google's starting code here:

var CLIENT_ID = 'MYID**';
var SCOPES = ["https://www.googleapis.com/auth/calendar.readonly"];

function checkAuth() {
    gapi.auth.authorize(
      {
        'client_id': CLIENT_ID,
        'scope': SCOPES,
        'immediate': true
      }, handleAuthResult);
}

function handleAuthResult(authResult) {
    var authorizeDiv = document.getElementById('authorize-div');
  loadCalendarApi();
}

function handleAuthClick(event) {
    gapi.auth.authorize({
        client_id: CLIENT_ID, 
        scope: SCOPES, 
        immediate: false
    }, handleAuthResult); 
    return false;
}

function loadCalendarApi() {
    gapi.client.load('calendar', 'v3', listUpcomingEvents);
}

function listUpcomingEvents() {
    var request = gapi.client.calendar.events.list({
        'calendarId': '[email protected]',
        'timeMin': '2011-06-03T10:00:00-07:00',
        'showDeleted': false,
        'singleEvents': true,
        'maxResults': 1000,
        'orderBy': 'startTime'
});

But I can't seem to find where to make this calendar public. The two examples on stackoverflow do not explain much and I can't seem to connect anything on Google's API Documentation.

3
javascriptcalendargoogle-calendar-api
If I can't find a solution for the way I'm doing it, I will resort to storing all information in my database and pulling the information from there – ntgCleaner
Couldn't you pull the calendar data with the private API key to the server, process it, and then server it to your JS? You wouldn't even need the database (though it would be more efficient). – Jesse Farmer

3 Answers

1
votes

If you only want to share your calendar, you can make it public and then sharing your calendar to everybody. This is how.

To make your calendar public you can follow the steps of this website https://support.google.com/calendar/answer/37083?hl=en.

Make your calendar public

  1. On a computer, open Google Calendar.

  2. In the top right, click Settings settings gear button > Settings.

  3. Open the Calendars tab.

  4. Click the name of the calendar you want to share.

  5. Open the Share this Calendar tab.

  6. Check the option Make this calendar public.

  7. If don't want other people to view the details of your events, select See only free/busy (hide details).

  8. Click Save.

and then you can share you calendar with an iframe within you calendar options. https://support.google.com/calendar/answer/41207?hl=en

Embed a calendar on your website

  1. On a computer, open Google Calendar. You can only get the code to embed in your website from a computer, not the mobile app.

  2. In the top right, click Settings settings gear button > Settings.

  3. Open the Calendars tab.

  4. Click the name of the calendar you want to embed.

  5. In the Embed This Calendar section, copy the iframe code displayed.

  6. Open your website editor, then paste this code where you want the calendar to display.

0
votes

The Calendars resource doesn't have any attributes regarding visibility. However, since you're using the Events list, its resource has the visibility attribute where you can filter out (albeit manually) the items that are public.

public The event is public and event details are visible to all readers of the calendar.

0
votes

You don't need to initiate the OAuth 2.0 authorization process (which is deprecated) as the example does. In fact, you can load the calendar using your browser API key and the calendar id:

  function checkAuth() {
    //gapi.auth.authorize(
    //  {
    //    'client_id': CLIENT_ID,
    //    'scope': SCOPES.join(' '),
    //    'immediate': true
      //  }, handleAuthResult);
      gapi.client.setApiKey('browser API key');
      handleAuthResult({ error: false });
  }

  function listUpcomingEvents() {
    var request = gapi.client.calendar.events.list({
        'calendarId': 'your calendar id',
      '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.');
      }

    });
  }