Created
November 20, 2015 07:24
-
-
Save danesparza/dee3318a99a81525b24c to your computer and use it in GitHub Desktop.
Google client side calendar API
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<script type="text/javascript"> | |
/* | |
Sample code taken shamelessly (and modified) | |
from https://developers.google.com/google-apps/calendar/quickstart/js | |
*/ | |
// Your Client ID can be retrieved from your project in the Google | |
// Developer Console, https://console.developers.google.com | |
var CLIENT_ID = 'your_oauth_clientid'; | |
var SCOPES = ["https://www.googleapis.com/auth/calendar.readonly"]; | |
/** | |
* Check if current user has authorized this application. | |
*/ | |
function checkAuth() { | |
gapi.auth.authorize( | |
{ | |
'client_id': CLIENT_ID, | |
'scope': SCOPES, | |
'immediate': true | |
}, handleAuthResult); | |
} | |
/** | |
* Handle response from authorization server. | |
* | |
* @param {Object} authResult Authorization result. | |
*/ | |
function handleAuthResult(authResult) { | |
var authorizeDiv = document.getElementById('authorize-div'); | |
if (authResult && !authResult.error) { | |
// Hide auth UI, then load client library. | |
authorizeDiv.style.display = 'none'; | |
loadCalendarApi(); | |
} else { | |
// Show auth UI, allowing the user to initiate authorization by | |
// clicking authorize button. | |
authorizeDiv.style.display = 'inline'; | |
} | |
} | |
/** | |
* Initiate auth flow in response to user clicking authorize button. | |
* | |
* @param {Event} event Button click event. | |
*/ | |
function handleAuthClick(event) { | |
gapi.auth.authorize( | |
{client_id: CLIENT_ID, scope: SCOPES, immediate: false}, | |
handleAuthResult); | |
return false; | |
} | |
/** | |
* Load Google Calendar client library. List upcoming events | |
* once client library is loaded. | |
*/ | |
function loadCalendarApi() { | |
gapi.client.load('calendar', 'v3', listUpcomingEvents); | |
} | |
function listCalendars() { | |
var request = gapi.client.calendar.calendarList.list(); | |
request.execute(function(resp) { | |
var cals = resp.items; | |
appendPre('Your calendars:'); | |
if (cals.length > 0) { | |
for (i = 0; i < cals.length; i++) { | |
var calendar = cals[i]; | |
appendPre(calendar.summary + ' (' + calendar.id + ')') | |
} | |
} else { | |
appendPre('No calendars found.'); | |
} | |
}); | |
} | |
/** | |
* 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', /* Can be 'primary' or a given calendarid */ | |
'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.'); | |
} | |
}); | |
} | |
/** | |
* Append a pre element to the body containing the given message | |
* as its text node. | |
* | |
* @param {string} message Text to be placed in pre element. | |
*/ | |
function appendPre(message) { | |
var pre = document.getElementById('output'); | |
var textContent = document.createTextNode(message + '\n'); | |
pre.appendChild(textContent); | |
} | |
</script> | |
<script src="https://apis.google.com/js/client.js?onload=checkAuth"> | |
</script> | |
</head> | |
<body> | |
<div id="authorize-div" style="display: none"> | |
<span>Authorize access to Google Calendar API</span> | |
<!--Button for the user to click to initiate auth sequence --> | |
<button id="authorize-button" onclick="handleAuthClick(event)"> | |
Authorize | |
</button> | |
</div> | |
<pre id="output"></pre> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment