I am using google calendar's API to show a stripped down version of my pany 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 = [".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', listUpingEvents);
}

function listUpingEvents() {
    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.

I am using google calendar's API to show a stripped down version of my pany 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./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', listUpingEvents);
}

function listUpingEvents() {
    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.

• javascript
• calendar
• google-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 Commented Jan 11, 2016 at 19:01
• 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 Commented Jun 27, 2016 at 21:30

3 Answers 3

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./calendar/answer/37083?hl=en.

Make your calendar public

1. On a puter, 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./calendar/answer/41207?hl=en

Embed a calendar on your website

1. On a puter, open Google Calendar. You can only get the code to embed in your website from a puter, 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.

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.

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 listUpingEvents() {
    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('Uping 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 uping events found.');
      }

    });
  }