CalendarInsert.html

<!DOCTYPE html>
<html>
<head>
<style>
#chartdiv {
  width: 100%;
  height: 500px;
}
</style>
<title>Google Calendar API Quickstart</title>
<meta charset='utf-8' />
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script type="text/javascript" src="jquery-1.min.js"></script>
<script type="text/javascript">



</script>
</head>
<body>
	<p>Google Calendar API Quickstart</p>

	<!--Add buttons to initiate auth sequence and sign out-->
	<button id="authorize-button" style="display: none;">Authorize</button>
	<button id="signout-button" style="display: none;">Sign Out</button>

	<pre id="content"></pre>


	<script type="text/javascript">


	dts = new Array();
	  var eventArr = new Array();
	  var mapArr = new Array();
		// Client ID and API key from the Developer Console
		var CLIENT_ID = '78578465650-tg4bmqov9528gc8dq0878s56vouq09il.apps.googleusercontent.com';

		// Array of API discovery doc URLs for APIs used by the quickstart
		var DISCOVERY_DOCS = [ "https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest" ];

		// Authorization scopes required by the API; multiple scopes can be
		// included, separated by spaces.
		var SCOPES = "https://www.googleapis.com/auth/calendar";

		var authorizeButton = document.getElementById('authorize-button');
		var signoutButton = document.getElementById('signout-button');

		/**
		 *  On load, called to load the auth2 library and API client library.
		 */
		function handleClientLoad() {
			gapi.load('client:auth2', initClient);
		}

		/**
		 *  Initializes the API client library and sets up sign-in state
		 *  listeners.
		 */
		function initClient() {
			gapi.client
					.init({
						discoveryDocs : DISCOVERY_DOCS,
						clientId : CLIENT_ID,
						scope : SCOPES
					})
					.then(
							function() {
								// Listen for sign-in state changes.
								gapi.auth2.getAuthInstance().isSignedIn
										.listen(updateSigninStatus);

								// Handle the initial sign-in state.
								updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn
										.get());
								authorizeButton.onclick = handleAuthClick;
								signoutButton.onclick = handleSignoutClick;
							});
		}

		/**
		 *  Called when the signed in status changes, to update the UI
		 *  appropriately. After a sign-in, the API is called.
		 */
		function updateSigninStatus(isSignedIn) {
			if (isSignedIn) {
				authorizeButton.style.display = 'none';
				signoutButton.style.display = 'block';
				//addEvents();
			} else {
				authorizeButton.style.display = 'block';
				signoutButton.style.display = 'none';
			}
		}

		/**
		 *  Sign in the user upon button click.
		 */
		function handleAuthClick(event) {
			gapi.auth2.getAuthInstance().signIn();
		}

		/**
		 *  Sign out the user upon button click.
		 */
		function handleSignoutClick(event) {
			gapi.auth2.getAuthInstance().signOut();
		}

		/**
		 * Append a pre element to the body containing the given message
		 * as its text node. Used to display the results of the API call.
		 *
		 * @param {string} message Text to be placed in pre element.
		 */
		function appendPre(message) {
			var pre = document.getElementById('content');
			var textContent = document.createTextNode(message + '\n');
			pre.appendChild(textContent);
		}

		/**
		 * Insert events from outside file into the Google Calendar
		 */
		
		function addEvents() {	
			var event = {
				'summary' : 'Insert Event into Calendar',
				'location' : 'Software AG',
				'description' : 'Inserting events from facebook',
				'start' : {
					'dateTime' : '2017-06-17T23:00:00+05:30',
					'timeZone' : 'Asia/Calcutta'
				},
				'end' : {
					'dateTime' : '2017-06-17T23:45:00+05:30',
					'timeZone' : 'Asia/Calcutta'
				},
				'recurrence' : [ 'RRULE:FREQ=DAILY;COUNT=2' ],
				'attendees' : [ {
					'email' : 'nlkntsharma@gmail.com'
				}, {
					'email' : 'sprmmn@gmail.com'
				} ],
				'reminders' : {
					'useDefault' : false,
					'overrides' : [ {
						'method' : 'email',
						'minutes' : 24 * 60
					}, {
						'method' : 'popup',
						'minutes' : 10
					} ]
				}
			};

			var request = gapi.client.calendar.events.insert({
				'calendarId' : 'primary',
				'resource' : event
			});

			request.execute(function(event) {
				appendPre('Event created: ' + event.htmlLink);
			});
		}
		
		
		function listUpcomingEvents() {
		
		var days = document.getElementById("lastDays").value;
        gapi.client.calendar.events.list({
          'calendarId': 'primary',
          'timeMin': (new Date(new Date().getDate() - parseInt(days))).toISOString(),
		  'timeMax' :(new Date).toISOString(),
          'showDeleted': false,
          'singleEvents': true,
          'maxResults': 200,
          'orderBy': 'startTime'
        }).then(function(response) {
          var events = response.result.items;
          appendPre('Upcoming events:');

          if (events.length > 0) {
            for (i = 0; i < events.length; i++) {
              var event = events[i];
			  eventArr.push(event);
              var when = event.start.dateTime;
              if (!when) {
                when = event.start.date;
              }
              //appendPre(event.summary + ' (' + when + ')')
            }
          } else {
            //appendPre('No upcoming events found.');
          }
        });
		document.getElementById("whatToDo").style.visibility = "";
      }
	  
	  function timeSpentByEvents(){
		mapArr = new Array();
		for(i=0;i<eventArr.length;i++){
			map = null;
			for(j=0; j<mapArr.length;j++) {
				if(mapArr[j].key == eventArr[i].summary) {
					map = mapArr[j];
					break;
				}
			}
			if(map == null) {
				map = new Object();
				map.key = eventArr[i].summary;
				map.value = 0;
				mapArr.push(map);
			}
			startDate = new Date(eventArr[i].start.dateTime);
			endDate = new Date(eventArr[i].end.dateTime);
			map.value += (endDate - startDate) / (1000 * 60);
		}
	  }
	  
	  function display() {
		document.getElementById('content').innerHTML = '';
		document.getElementById("myTable").innerHTML = '<tr><td>Group</td><td>Minutes</td></tr>';
		
		mapArr.sort(function(a,b){ 
			if(isNaN(a.value)){
				return 1;
			} 
			if(isNaN(b.value)){
				return -1;
			} 
			return b.value - a.value;});
		
		var chartObj = {};
		
		var charts = [mapArr.length];
		for(i=0; i<mapArr.length;i++) {
			document.getElementById("myTable").insertRow(-1).innerHTML = '<td>' + mapArr[i].key +'</td><td>'+(isNaN(mapArr[i].value) ? 0 : mapArr[i].value) +'</td>';
			if(!isNaN(mapArr[i].value)) {
				obj = new Object();
				obj.group = mapArr[i].key;
				obj.minutes = mapArr[i].value;
				charts[i] = obj;
			}
		}
		
		chartArr = [{"coutry" : "India", "litres" : 200},{"coutry" : "India2", "litres" : 300},{"coutry" : "India3", "litres" : 400}];
		
		var chart = AmCharts.makeChart( "chartdiv", {
			  "type": "pie",
			  "theme": "light",
			  "dataProvider": charts,
  "valueField": "minutes",
  "titleField": "group",
			   "balloon":{
			   "fixedPosition":true
			  },
			  "export": {
				"enabled": true
			  }
			} );
		
		
	  }
	  
	  function timeSpentonPeople(){
		mapArr = new Array();
		for(i=0;i<eventArr.length;i++){
			map = null;
			for(j=0; j<mapArr.length;j++) {
				if(mapArr[j].key == eventArr[i].creator.displayName) {
					map = mapArr[j];
					break;
				}
			}
			if(map == null) {
				map = new Object();
				map.key = eventArr[i].creator.displayName;
				map.value = 0;
				mapArr.push(map);
			}
			startDate = new Date(eventArr[i].start.dateTime);
			endDate = new Date(eventArr[i].end.dateTime);
			map.value += (endDate - startDate) / (1000 * 60);
		}
		
	  }
	  
	  function timeSpentOnTopics(){
		mapArr = new Array();
		for(i=0;i<eventArr.length;i++){
			map = null;
			for(j=0; j<mapArr.length;j++) {
				if(mapArr[j].key == eventArr[i].creator.displayName) {
					map = mapArr[j];
					break;
				}
			}
			if(map == null) {
				map = new Object();
				map.key = eventArr[i].creator.displayName;
				map.value = 0;
				mapArr.push(map);
			}
			startDate = new Date(eventArr[i].start.dateTime);
			endDate = new Date(eventArr[i].end.dateTime);
			map.value += (endDate - startDate) / (1000 * 60);
		}
		
	  }
	  function timeSpentOnDays(){
		mapArr = new Array();
		for(i=0;i<eventArr.length;i++){
			map = null;
			for(j=0; j<mapArr.length;j++) {
				nd = new Date(eventArr[i].created);
				day = getDayForNumber(nd.getDay());
				if(mapArr[j].key == day) {
					map = mapArr[j];
					break;
				}
			}
			if(map == null) {
				map = new Object();
				nd = new Date(eventArr[i].created);
				day = nd.getDay();
				day = getDayForNumber(day);
				map.key = day;
				map.value = 0;
				mapArr.push(map);
			}
			startDate = new Date(eventArr[i].start.dateTime);
			endDate = new Date(eventArr[i].end.dateTime);
			map.value += (endDate - startDate) / (1000 * 60);
		}
		
	  }
	  
	  function getDayForNumber(day) {
	  switch(day) {
		case 1:
			return "Monday";
			break;
		case 2:
			return "Tuseday";
			break;
		case 3:
			return "Wednesday";
			break;
		case 4:
			return "Thrusday";
			break;
		case 5:
			return "Friday";
			break;
		case 6:
			return "Saturday";
			break;
		default:
			return "Sunday";
			break;
		}
		return ""
	  }
	  /*function loadChar() {
			var options = {
					title: {
						text: "Column Chart using jQuery Plugin"
					},
							animationEnabled: true,
					data: [
					{
						type: "column", //change it to line, area, bar, pie, etc
						dataPoints: dts;
					}
					]
				};

				$("#chartContainer").CanvasJSChart(options);
		}*/
	</script>

	<script async defer src="https://apis.google.com/js/api.js"
		onload="this.onload=function(){};handleClientLoad()"
		onreadystatechange="if (this.readyState === 'complete') this.onload()">
		
	</script>
	
	
	Last how many days : <input type="text" value="10" id="lastDays"/>
	<input type="button" value="Get Events" onclick="listUpcomingEvents()"/>
	<div id="whatToDo" style="visibility:hidden">
	<input type="button" value="Time Spent by Events" onclick="timeSpentByEvents();display()" />
	<input type="button" value="Time Spent on People" onclick="timeSpentonPeople();display()" />
	<input type="button" value="Time Spent by Days" onclick="timeSpentOnDays();display()" />
	</div>
	
	<div>
	<table id="myTable"></table>
	</div>
	
	<div id="chartdiv"></div>
</body>
</html>