Retrieve Google Calendar events using API v3 in javascript
SOLVED :-) here's the javascript code to access and show upcoming events of PUBLIC google Calendars, with Google Calendar API v3.
<html>
<head>
</head>
<body bgcolor="black" text="white" link="#00ffff" vlink="green" alink="yellow">
<script>
var clientId = 'YOUR_CLIENT_ID HERE'; //choose web app client Id, redirect URI and Javascript origin set to http://localhost
var apiKey = 'YOUR_APIKEY_HERE'; //choose public apiKey, any IP allowed (leave blank the allowed IP boxes in Google Dev Console)
var userEmail = "[email protected]"; //your calendar Id
var userTimeZone = "YOUR_TIME_ZONE_HERE"; //example "Rome" "Los_Angeles" ecc...
var maxRows = 10; //events to shown
var calName = "YOUR CALENDAR NAME"; //name of calendar (write what you want, doesn't matter)
var scopes = 'https://www.googleapis.com/auth/calendar';
//--------------------- Add a 0 to numbers
function padNum(num) {
if (num <= 9) {
return "0" + num;
}
return num;
}
//--------------------- end
//--------------------- From 24h to Am/Pm
function AmPm(num) {
if (num <= 12) { return "am " + num; }
return "pm " + padNum(num - 12);
}
//--------------------- end
//--------------------- num Month to String
function monthString(num) {
if (num === "01") { return "JAN"; }
else if (num === "02") { return "FEB"; }
else if (num === "03") { return "MAR"; }
else if (num === "04") { return "APR"; }
else if (num === "05") { return "MAJ"; }
else if (num === "06") { return "JUN"; }
else if (num === "07") { return "JUL"; }
else if (num === "08") { return "AUG"; }
else if (num === "09") { return "SEP"; }
else if (num === "10") { return "OCT"; }
else if (num === "11") { return "NOV"; }
else if (num === "12") { return "DEC"; }
}
//--------------------- end
//--------------------- from num to day of week
function dayString(num){
if (num == "1") { return "mon" }
else if (num == "2") { return "tue" }
else if (num == "3") { return "wed" }
else if (num == "4") { return "thu" }
else if (num == "5") { return "fri" }
else if (num == "6") { return "sat" }
else if (num == "0") { return "sun" }
}
//--------------------- end
//--------------------- client CALL
function handleClientLoad() {
gapi.client.setApiKey(apiKey);
checkAuth();
}
//--------------------- end
//--------------------- check Auth
function checkAuth() {
gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult);
}
//--------------------- end
//--------------------- handle result and make CALL
function handleAuthResult(authResult) {
if (authResult) {
makeApiCall();
}
}
//--------------------- end
//--------------------- API CALL itself
function makeApiCall() {
var today = new Date(); //today date
gapi.client.load('calendar', 'v3', function () {
var request = gapi.client.calendar.events.list({
'calendarId' : userEmail,
'timeZone' : userTimeZone,
'singleEvents': true,
'timeMin': today.toISOString(), //gathers only events not happened yet
'maxResults': maxRows,
'orderBy': 'startTime'});
request.execute(function (resp) {
for (var i = 0; i < resp.items.length; i++) {
var li = document.createElement('li');
var item = resp.items[i];
var classes = [];
var allDay = item.start.date? true : false;
var startDT = allDay ? item.start.date : item.start.dateTime;
var dateTime = startDT.split("T"); //split date from time
var date = dateTime[0].split("-"); //split yyyy mm dd
var startYear = date[0];
var startMonth = monthString(date[1]);
var startDay = date[2];
var startDateISO = new Date(startMonth + " " + startDay + ", " + startYear + " 00:00:00");
var startDayWeek = dayString(startDateISO.getDay());
if( allDay == true){ //change this to match your needs
var str = [
'<font size="4" face="courier">',
startDayWeek, ' ',
startMonth, ' ',
startDay, ' ',
startYear, '</font><font size="5" face="courier"> @ ', item.summary , '</font><br><br>'
];
}
else{
var time = dateTime[1].split(":"); //split hh ss etc...
var startHour = AmPm(time[0]);
var startMin = time[1];
var str = [ //change this to match your needs
'<font size="4" face="courier">',
startDayWeek, ' ',
startMonth, ' ',
startDay, ' ',
startYear, ' - ',
startHour, ':', startMin, '</font><font size="5" face="courier"> @ ', item.summary , '</font><br><br>'
];
}
li.innerHTML = str.join('');
li.setAttribute('class', classes.join(' '));
document.getElementById('events').appendChild(li);
}
document.getElementById('updated').innerHTML = "updated " + today;
document.getElementById('calendar').innerHTML = calName;
});
});
}
//--------------------- end
</script>
<script src='https://apis.google.com/js/client.js?onload=handleClientLoad'></script>
<div id='content'>
<h1 id='calendar' style="color:grey">LOADING . . . .</h1>
<ul id='events'></ul>
</div>
<p id='updated' style="font-size:12; color:grey">updating . . . . .</p>
</body>
</html>Here's a simplified, annotated, and updated script based on Max's original that makes use of Moment.js and JQuery. Read the full blog post here for details (including how to get your API key), or just replace YOUR_CALENDAR_ID and YOUR_API_KEY in the script below:
<script>
/* This solution makes use of "simple access" to google, providing only an API Key.
* This way we can only get access to public calendars. To access a private calendar,
* we would need to use OAuth 2.0 access.
*
* "Simple" vs. "Authorized" access: https://developers.google.com/api-client-library/javascript/features/authentication
* Examples of "simple" vs OAuth 2.0 access: https://developers.google.com/api-client-library/javascript/samples/samples#authorizing-and-making-authorized-requests
*
* We will make use of "Option 1: Load the API discovery document, then assemble the request."
* as described in https://developers.google.com/api-client-library/javascript/start/start-js
*/
function printCalendar() {
// The "Calendar ID" from your calendar settings page, "Calendar Integration" secion:
var calendarId = '[email protected]';
// 1. Create a project using google's wizzard: https://console.developers.google.com/start/api?id=calendar
// 2. Create credentials:
// a) Go to https://console.cloud.google.com/apis/credentials
// b) Create Credentials / API key
// c) Since your key will be called from any of your users' browsers, set "Application restrictions" to "None",
// leave "Website restrictions" blank; you may optionally set "API restrictions" to "Google Calendar API"
var apiKey = 'YOUR_API_KEY';
// You can get a list of time zones from here: http://www.timezoneconverter.com/cgi-bin/zonehelp
var userTimeZone = "Europe/Budapest";
// Initializes the client with the API key and the Translate API.
gapi.client.init({
'apiKey': apiKey,
// Discovery docs docs: https://developers.google.com/api-client-library/javascript/features/discovery
'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest'],
}).then(function () {
// Use Google's "apis-explorer" for research: https://developers.google.com/apis-explorer/#s/calendar/v3/
// Events: list API docs: https://developers.google.com/calendar/v3/reference/events/list
return gapi.client.calendar.events.list({
'calendarId': calendarId,
'timeZone': userTimeZone,
'singleEvents': true,
'timeMin': (new Date()).toISOString(), //gathers only events not happened yet
'maxResults': 20,
'orderBy': 'startTime'
});
}).then(function (response) {
if (response.result.items) {
var calendarRows = ['<table class="wellness-calendar"><tbody>'];
response.result.items.forEach(function(entry) {
var startsAt = moment(entry.start.dateTime).format("L") + ' ' + moment(entry.start.dateTime).format("LT");
var endsAt = moment(entry.end.dateTime).format("LT");
calendarRows.push(`<tr><td>${startsAt} - ${endsAt}</td><td>${entry.summary}</td></tr>`);
});
calendarRows.push('</tbody></table>');
$('#wellness-calendar').html(calendarRows.join(""));
}
}, function (reason) {
console.log('Error: ' + reason.result.error.message);
});
};
// Loads the JavaScript client library and invokes `start` afterwards.
gapi.load('client', printCalendar);
</script>
You will also need to include Moment.JS and the Google JS API somewhere in your page:
<script src="https://cdn.jsdelivr.net/npm/moment@2/moment.min.js"></script>
<script src="https://apis.google.com/js/api.js"></script>