Javascript Google Calendar API Set Calendar to Public

Question

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': 'iorbmkj57ee8ihnko0va1snif8@group.calendar.google.com',
        '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.

Answer 1

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.

Answer 2

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.

Answer 3

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.');
      }

    });
  }