Integrate Angular UI Calendar with Google Calendar

Posted By : Abhay Garg | 23-Dec-2014

angularjs

Purpose -> You can Integrate Angular , in any Calendar (Create your own ) that you want , or even use Data of Google Calendar in your Project .

So for this purpose we use Oauth Access . If any problem then go to this link . I suppose that you have your Client ID . And enable Calendar API from google console

For this purpose you need this js https://apis.google.com/js/client.js

Java script code

angular.module('loginApp').controller('newCalendarCtrl', function ($scope, $log) {
  
	var clientId = Your ID here as a String ;
	var scopes = 'https://www.googleapis.com/auth/calendar';

	function handleAuthResult(authResult) {
	    console.log(authResult);
	    var authorizeButton = document.getElementById('authorize-button');
	    if (authResult && !authResult.error) {
	       // authorizeButton.style.visibility = 'hidden';
	        makeApiCall();
	    } else {
	        authorizeButton.style.visibility = '';
	        authorizeButton.onclick = handleAuthClick;
	    }
	}

	$scope.handleAuthClick=function (event) {
	    gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
	    return false;
	}

	function makeApiCall() {
	    gapi.client.load('calendar', 'v3', function() {
	        var request = gapi.client.calendar.calendarList.list();
	        request.execute(function(resp){
	            $.each( resp.items, function( key, value ) {
	                console.log(resp.items[key].id);
	            });
	        });
	        var request1 = gapi.client.calendar.events.list({ 
	            'calendarId': 'primary',
	            'timeMin': '2015-12-23T04:26:52.000Z'//Suppose that you want get data after 23 Dec 2014
	         }); 
	        request1.execute(function(resp){
	            $.each( resp.items, function( key, value ) {
	                console.log(resp.items[key].id);// here you give all events from google calendar
	            });
	        });
	    });
	}  

});

HTML code

<div ng-controller="newCalendarCtrl">

<button ng-click="handleAuthClick()">Authorize</button>
<script src="https://apis.google.com/js/client.js"></script>
</div>