Skip to content

Instantly share code, notes, and snippets.

@hungrymedia

hungrymedia/GCal.html

Created February 7, 2020 16:56
Show Gist options
  • Save hungrymedia/ae206b789d7896e5d090f4aa7d138ebe to your computer and use it in GitHub Desktop.
Save hungrymedia/ae206b789d7896e5d090f4aa7d138ebe to your computer and use it in GitHub Desktop.
Download ZIP
Load and display a public Google Calendar via Javascript
Raw
GCal.html
<!DOCTYPE html>
<html>
<head>
<title>Public GCal Test</title>
<script
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2/moment.min.js"></script>
<script src="https://apis.google.com/js/api.js"></script>
</head>
<body>
<main>
</main>
<script>
function printCalendar() {
contentArea = $('main');
var calendarId = '[PUBLIC_CALENDAR_ID]';
var apiKey = '[API_KEY]';
var userTimeZone = "America/New_York";
gapi.client.init({
'apiKey': apiKey,
'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest'],
}).then(function () {
return gapi.client.calendar.events.list({
'calendarId': calendarId,
'timeZone': userTimeZone,
'singleEvents': true,
'timeMin': (new Date()).toISOString(),
'maxResults': 50,
'orderBy': 'startTime'
});
}).then(function (response) {
if (response.result.items) {
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");
contentArea.append(`<h3>${entry.summary}</h3>`)
contentArea.append(`<em>${startsAt} - ${endsAt}</em>`)
if(entry.description) {
contentArea.append(`<p>${entry.description}</p>`)
}
contentArea.append(`<hr>`)
});
}
}, function (reason) {
console.log('Error: ' + reason.result.error.message);
});
};
gapi.load('client', printCalendar);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment