Pull your Google Calendar events programatically to your blog or website

<link rel=”stylesheet prefetch”
href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css”>

<link
href=”https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css”
rel=”stylesheet”>
<script src=”https://code.jquery.com/jquery-1.10.2.js”></script>
<script src=”https://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>

<script type=”text/javascript”><!–
// Your Client ID can be retrieved from your project in the Google
// Developer Console, https://console.developers.google.com
var CLIENT_ID = ‘24593348883-tb02vbkk055o6maqikqh7bro4brrl8j5.apps.googleusercontent.com’;

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.join(‘ ‘),
‘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} eve nt 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(‘#contacts@group.v.calendar.google.com’));
//gapi.client.load(‘calendar’, ‘v3’, listUpcomingEvents(‘en.indian#holiday@group.v.calendar.google.com’));
gapi.client.load(‘calendar’, ‘v3’, listUpcomingEvents);
}

/**
* 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’,  //’#contacts@group.v.calendar.google.com’,
‘timeMin’ : (new Date()).toISOString(),
‘showDeleted’ : false,
‘singleEvents’ : true,
‘maxResults’ : 5,    // Number of events
‘orderBy’ : ‘startTime’
});

request.execute(function(resp) {
var events = resp.items;

//Add number of events count to Bell icon
var el = document.querySelector(‘.notification’);
var count = Number(el.getAttribute(‘data-count’)) || 0;
el.setAttribute(‘data-count’, count + events.length);
el.classList.remove(‘notify’);
el.offsetWidth = el.offsetWidth;
el.classList.add(‘notify’);
if (count === 0) {
el.classList.add(‘show-count’);
}

//END of add events to bell icon;
var img = [[“/wcsstore/Aurora/images/catalog/kit/447×447/HTA029_2932.jpg”],[“/wcsstore/Aurora/images/catalog/bundle/447×447/HAP027_2744.jpg”],[“/wcsstore/Aurora/images/catalog/apparel/women/wbg006_handbags/447×447/wbg006_0602.jpg”],[“/wcsstore/Aurora/images/catalog/apparel/women/wbg006_handbags/447×447/wbg006_0602.jpg”],[“/wcsstore/Aurora/images/catalog/electronics/cta023_tablets/447×447/cta023_2303.jpg”]]
var categories = [[“/webapp/wcs/stores/servlet/en/aurora/home—furnishing/kitchenware”],[“/webapp/wcs/stores/servlet/en/aurora/home—furnishing”],[“/webapp/wcs/stores/servlet/en/aurora/dresses”],[“/webapp/wcs/stores/servlet/en/aurora/apparel/women/accessories”],[“/webapp/wcs/stores/servlet/en/aurora/electronics/accessories-10028–1”]]
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;
}

$(“#notification_ul”).append(‘<h3><span class=”fa fa-gift” aria-hidden=”true”></span> &nbsp’ + event.summary +'</h3><div id=”desc’+i+'” style=”padding-top:100px;padding-bottom:100px;text-align:top;”><p id=”linkdesc”><a href=”‘+categories[i]+'”>’ + event.summary+ ‘(‘ + when +’)</a></p></div>’);
 var img = img;
document.getElementById(‘desc’+i).style.backgroundImage = “url(“+img[i]+”)”;
   }

} else {
$(“#notification_ul”).append(‘No upcoming events found.’);
}
$(“#notification_ul”).accordion({navigation: true});
$(“#linkdesc a”).click(function(event){ event.stopPropagation(); });
$(“#authorize-button”).css(‘dispaly’,’none’);
$(“#authorize-button-logout”).css(‘dispaly’,’block’);
});
}

</script>

<script type=”text/javascript”>
$(document).ready(function() {
$(“#notificationLink”).click(function() {
$(“#notificationContainer”).fadeToggle(300);
$(“#notification_count”).fadeOut(“slow”);
return false;
});

//Document Click hiding the popup
$(document).click(function() {
$(“#notificationContainer”).hide();
});

//Popup on click
$(“#notificationContainer”).click(function() {
return false;
});

});
</script>

<script src=”https://apis.google.com/js/client.js?onload=checkAuth”>

</script>
</head>
<body>
<div id=”notification_li” class=”container”>
<div id=”notificationLink” class=”notification”></div>

<div id=”notificationContainer”>
<div id=”notificationTitle”>Upcoming events</div>
<div id=”notificationsBody” class=”notifications”>
<div id=”notification_ul”></div>
</div>
</div>
</div>

<div id=”authorize-div” style=”display: none”><!–Button for the user to click to initiate auth sequence –>

<img id=”authorize-button” onclick=”handleAuthClick(event)”
src=”/login-google.png” /></div>
<pre id=”output”></pre>