How to connect to the Google Calendar API via the Javascript Client Library and insert an event into a (https://www.google.com/calendar/embed?src=gk0pudanag1bhu35vkv5dunja4%40group.calendar.google.com&ctz=America/New_York). The demo also employs Oauth2 authentication, so the script could read and write to a logged in user's calendar.

google-calendar-event-insert-js

<div class="row">
	<div class="col-md-2 col-sm-2 col-xs-12">
		<button id="authorize-button" style="visibility: hidden" class="btn btn-primary">Authorize</button>
    </div><!-- .col -->
    
    <div class="col-md-10 col-sm-10 col-xs-12">
		<script type="text/javascript">
			// date variables
			var now = new Date();
			today = now.toISOString();
			
			var twoHoursLater = new Date(now.getTime() + (2*1000*60*60));
			twoHoursLater = twoHoursLater.toISOString();
			
			// google api console clientID and apiKey (https://code.google.com/apis/console/#project:568391772772)
			var clientId = 'YOUR_CLIENT_ID';
			var apiKey = 'YOUR_API_KEY';

			// enter the scope of current project (this API must be turned on in the google console)
			var scopes = 'https://www.googleapis.com/auth/calendar';


			// Oauth2 functions
			function handleClientLoad() {
				gapi.client.setApiKey(apiKey);
				window.setTimeout(checkAuth,1);
			}

			function checkAuth() {
				gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult);
			}

			// show/hide the 'authorize' button, depending on application state
			function handleAuthResult(authResult) {
				var authorizeButton = document.getElementById('authorize-button');
				var resultPanel		= document.getElementById('result-panel');
				var resultTitle		= document.getElementById('result-title');
				
				if (authResult && !authResult.error) {						
					authorizeButton.style.visibility = 'hidden';			// if authorized, hide button
					resultPanel.className = resultPanel.className.replace( /(?:^|\s)panel-danger(?!\S)/g , '' )	// remove red class
					resultPanel.className += ' panel-success';				// add green class
					resultTitle.innerHTML = 'Application Authorized'		// display 'authorized' text
					makeApiCall();											// call the api if authorization passed
				} else {													// otherwise, show button
					authorizeButton.style.visibility = 'visible';
					resultPanel.className += ' panel-danger';				// make panel red
					authorizeButton.onclick = handleAuthClick;				// setup function to handle button click
				}
			}
			
			// function triggered when user authorizes app
			function handleAuthClick(event) {
				gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
				return false;
			}
			
			// setup event details
			var resource = {
				"summary": "Sample Event " + Math.floor((Math.random() * 10) + 1),
				"start": {
					"dateTime": today
				},
				"end": {
					"dateTime": twoHoursLater
				}
			};
  
			// function load the calendar api and make the api call
			function makeApiCall() {
				gapi.client.load('calendar', 'v3', function() {					// load the calendar api (version 3)
					var request = gapi.client.calendar.events.insert({
						'calendarId':		'[email protected]',	// calendar ID
						"resource":			resource							// pass event details with api call
					});
					
					// handle the response from our api call
					request.execute(function(resp) {
						if(resp.status=='confirmed') {
							document.getElementById('event-response').innerHTML = "Event created successfully. View it <a href='" + resp.htmlLink + "'>online here</a>.";
						} else {
							document.getElementById('event-response').innerHTML = "There was a problem. Reload page and try again.";
						}
						/* for (var i = 0; i < resp.items.length; i++) {		// loop through events and write them out to a list
							var li = document.createElement('li');
							var eventInfo = resp.items[i].summary + ' ' +resp.items[i].start.dateTime;
							li.appendChild(document.createTextNode(eventInfo));
							document.getElementById('events').appendChild(li);
						} */
						console.log(resp);
					});
				});
			}
		</script>
		<script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
		
		<div class="panel panel-danger" id="result-panel">
			<div class="panel-heading">
				<h3 class="panel-title" id="result-title">Application Not Authorized</h3>
			</div><!-- .panel-heading -->
			<div class="panel-body">
				<p>Insert Event into Public Calendar&hellip;</p>
				<div id="event-response"></div>
			</div><!-- .panel-body -->
		</div><!-- .panel -->
		
	</div><!-- .col -->
</div><!-- .row -->

I did the same you have mentioned here, but getting Error: origin_mismatch. i believe its something related to JAVAScript origins or Redirect URIs. i am running this code on my local system.

Any suggestion?

I resolved it . i was url mismatch . i changed it to http://localhost in settings and its working fine
Thanks

its working fine but how to call it on onlick event, currently it is working on on page load

Hello,
I tried it works fine.
Now i want to update and delete events?
How can i achieve it?

Thanks

yes its working fine....

Can I change this scope to https://www.googleapis.com/auth/calendar.readonly ?

Can I change today value ?(today = now.toISOString();)
And I need assign user input data to it?
I tried to do it. There is GitHub URL for getting my code.
https://github.com/vidurasilva/Calendar_Event_Insert

gapi.client.load('calendar', 'v3', function() { return undefined please help

how to get inserted eventID
i want to delete late