FullCalendar with private google calendar event

Question

I currently using google calendar on my website with the iframe you can insert. I tested Fullcalendar and I like what you can do with it.

But I would like to do same as the embed calendar, I would like to be able to create private event (not calendar, events). The sharing settings of the calendar is on public, but when using chrome, you can log with your google account and with the embed calendar you can see private event (if you have access to the calendar).

Is that possible with Fullcalendar ?

Vuwox Vuwox · Accepted Answer · 2015-02-04T18:00:01

I figure out how to connect via OAUTH and get the private event when you are authentified.

By clicking on a button, you can connect to a google account (If already connected in browser, no button will appear and you will be log automaticly).

I follow this google example

<script type="text/javascript">

			var clientId = '<your-client-id>';
			var apiKey = '<your-api-key>';
			var scopes = 'https://www.googleapis.com/auth/calendar';

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

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

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

			function handleAuthClick(event) {            
				gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
				return false;
			}
			
			
			// Load the API and make an API call.  Display the results on the screen.
			function makeApiCall() {

				// Step 4: Load the Google+ API
				gapi.client.load('calendar', 'v3').then(function() {
				  // Step 5: Assemble the API request
					  var request = gapi.client.calendar.events.list({
							'calendarId': '<your-calendar-id(The @gmail.com>'
						});
				  
						// Step 6: Execute the API request
						request.then(function(resp) {

							var eventsList = [];
							var successArgs;
							var successRes;

							if (resp.result.error) {
								reportError('Google Calendar API: ' + data.error.message, data.error.errors);
							}
							else if (resp.result.items) {
								$.each(resp.result.items, function(i, entry) {
									var url = entry.htmlLink;

									// make the URLs for each event show times in the correct timezone
									//if (timezoneArg) {
									//    url = injectQsComponent(url, 'ctz=' + timezoneArg);
									//}

									eventsList.push({
										id: entry.id,
										title: entry.summary,
										start: entry.start.dateTime || entry.start.date, // try timed. will fall back to all-day
										end: entry.end.dateTime || entry.end.date, // same
										url: url,
										location: entry.location,
										description: entry.description
									});
								});

								// call the success handler(s) and allow it to return a new events array
								successArgs = [ eventsList ].concat(Array.prototype.slice.call(arguments, 1)); // forward other jq args
								successRes = $.fullCalendar.applyAll(true, this, successArgs);
								if ($.isArray(successRes)) {
									return successRes;
								}
							}

							if(eventsList.length > 0)
							{
                              // Here create your calendar but the events options is :
                              //fullcalendar.events: eventsList (Still looking for a methode that remove current event and fill with those news event without recreating the calendar.
                              
                            }
                          return eventsList;
							
					  }, function(reason) {
						console.log('Error: ' + reason.result.error.message);
					  });
				});
			}

function GeneratePublicCalendar(){  
  // You need a normal fullcalendar with googleApi when user isn't logged
  
    $('#calendar').fullCalendar({
                    googleCalendarApiKey: '<your-key>',      
      ...
    });  
}
</script>
<script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>

And in your google api console, make sure in API & Auth -> ID

OAuth Javascript origin is set properly (Like http://localhost https://localhost if you are working on a local website)

Leave Redirection and API referent empty.

FullCalendar with private google calendar event

2 Answers