Javascript Google Calendar API Example to Build Events & Holidays in Calendar in Browser Full Project For Beginners

 

 

<!DOCTYPE html>
<html lang=”en>
<head>
<meta charset=”UTF-8>
<title>Google Calendar API</title>
</head>
<body>
<h1>Events:</h1>
<div id=”js-gcal-event>
<!– SVG loader By Sam Herbert (@sherb). http://goo.gl/7AJzbL –>
<svg aria-hidden=”truewidth=”35height=”35viewBox=”0 0 44 44xmlns=”http://www.w3.org/2000/svgstroke=”#2c2a29><g fill=”nonefill-rule=”evenoddstroke-width=”2><circle cx=”22cy=”22r=”1><animate attributeName=”rbegin=”0sdur=”1.8svalues=”1; 20calcMode=”splinekeyTimes=”0; 1keySplines=”0.165, 0.84, 0.44, 1repeatCount=”indefinite“/><animate attributeName=”stroke-opacitybegin=”0sdur=”1.8svalues=”1; 0calcMode=”splinekeyTimes=”0; 1keySplines=”0.3, 0.61, 0.355, 1repeatCount=”indefinite“/></circle><circle cx=”22cy=”22r=”1><animate attributeName=”rbegin=”-0.9sdur=”1.8svalues=”1; 20calcMode=”splinekeyTimes=”0; 1keySplines=”0.165, 0.84, 0.44, 1repeatCount=”indefinite“/><animate attributeName=”stroke-opacitybegin=”-0.9sdur=”1.8svalues=”1; 0calcMode=”splinekeyTimes=”0; 1keySplines=”0.3, 0.61, 0.355, 1repeatCount=”indefinite“/></circle></g></svg>
<p>Loading…</p>
</div>
<p>Solution from László L. L. on <a href=”https://stackoverflow.com/a/56496854/908059>Stack Overflow</a>, modified to use lighter dependencies (MomentJS > DayJS, jQuery > vanilla javascript).</p>
<script src=”https://cdn.polyfill.io/v3/polyfill.min.js?version=3.52.1&features=Array.prototype.forEach,console,Date.prototype.toISOString,document,Intl,Map,Promise,Set></script>
<script src=”https://unpkg.com/dayjs@1.8.21/dayjs.min.js></script>
<script src=”https://unpkg.com/dayjs@1.8.23/plugin/localizedFormat.js></script>
<script>dayjs.extend(window.dayjs_plugin_localizedFormat)</script>
<script src=”https://apis.google.com/js/api.js></script>
<script src=”google-calendar.js></script>
</body>
</html>
/* 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.
*
* Solution from László L. L. on Stack Overflow:
* https://stackoverflow.com/a/56496854/908059
*
* Dependencies: day.js & the localizedFormat plugin for day.js:
* https://day.js.org/en/
*
* “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 = ‘YOUR_CALENDAR_ID@group.calendar.google.com’;
// 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 = Intl.DateTimeFormat().resolvedOptions().timeZone;
if (!userTimeZone) {
userTimeZone = ‘America/New_York’;
}
// 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) {
console.log(response); // TODO: Remove!
if (response.result.items) {
var getNowPlayingDiv = document.getElementById(‘js-gcal-event’); // Make sure your HTML has This ID!
// Create a table with events:
var calendarRows = [‘<table class=”gcal-event”><tbody>’];
response.result.items.forEach(function (entry) {
var eventDate = dayjs(entry.start.dateTime).format(‘LLL’); // eg: March 26, 2020 6:00 PM
var eventEndsAt = dayjs(entry.end.dateTime).format(‘LT’); // eg: 7:00 PM
calendarRows.push( +
‘<tr class=”gcal-event__tr”>’ +
‘<td class=”gcal-event__td-time”>’ +
‘<time datetime=”‘ + entry.start.dateTime + ‘” class=”gcal-event__time-start”>’ + eventDate + ‘</time> – ‘ +
‘<time datetime=”‘ + entry.end.dateTime + ‘” class=”gcal-event__time-end”>’ + eventEndsAt + ‘</time>’ +
‘</td>’ +
‘<td class=”gcal-event__td-event-name”>’ + entry.summary + ‘</td>’ +
‘</tr>’);
});
calendarRows.push(‘</tbody></table>’);
getNowPlayingDiv.innerHTML = calendarRows.join();
}
}, function (reason) {
console.log(‘Error: ‘ + reason.result.error.message);
});
}
// Loads the JavaScript client library and invokes `start` afterwards.
gapi.load(‘client’, printCalendar);

Leave a Reply