Question

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

但我想和嵌入式日历一样，我希望能够创建私人活动（不是日历，活动）。日历的共享设置是公开的，但是当使用chrome时，您可以使用您的Google帐户登录，并且使用嵌入日历可以看到私人活动（如果您有权访问日历）。

Fullcalendar可以吗？

Answer 1

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

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

我关注this google example

＆＃13;

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

＆＃13;

在您的google api控制台中，请确保在API＆amp;验证 - ＆gt; ID

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

将重定向和API引用保留为空。

Answer 2

Fullcalendar只是一个前端解决方案。登录谷歌帐户和任何其他身份验证不属于它。

也就是说，它可以是connected to a google calendar，但前提是它是一个公共谷歌日历。如果您想将其与私人谷歌日历相关联，则必须构建该功能。

如果您可以使用JS获取gcal事件并处理身份验证，那么将它们放入FullCalendar很容易。但第一部分需要几步。看一下google calendar api docs的说明。

FullCalendar与私人谷歌日历活动

2 个答案: