带有私人谷歌日历事件的完整日历

Question

我目前正在我的网站上使用谷歌日历，你可以插入iframe。我测试了Fullcalendar，我喜欢你可以用它做什么。

但我想做与嵌入日历相同的操作，我希望能够创建私人事件（不是日历，事件）。日历的共享设置处于公开状态，但在使用 chrome 时，您可以使用自己的 google 帐户登录，并使用嵌入日历查看私人活动（如果您有权访问日历）。

全日历可以吗？

Answer 1

我想出了如何通过 OAUTH 连接并在您进行身份验证时获取私人事件。

通过单击按钮，您可以连接到Google帐户（如果已经在浏览器中连接，则不会出现任何按钮，您将自动登录）。

我遵循这个谷歌示例

<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>

在您的 google api 控制台中，确保在 API 和身份验证 -> ID

OAuth Javascript的起源设置正确（如 http://localhosthttps://localhost 如果您正在本地网站上工作）

将"重定向"和"API 引用"留空。

Answer 2

Fullcalendar 只是一个前端解决方案。登录Google帐户和任何其他身份验证都不是其中的一部分。

也就是说，它可以连接到谷歌日历，但前提是它是一个公共的谷歌日历。如果您想将其连接到私人Google日历，则必须内置该功能。

如果你可以用JS获取gcal事件并处理身份验证，那么将它们放入FullCalendar就很容易了。但第一部分需要几个步骤。请查看谷歌日历 API 文档以获取说明。