首页 文章

FullCalendar与私人谷歌日历活动

提问于
浏览
2

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

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

Fullcalendar可以实现吗?

2 回答

  • 3

    我弄清楚如何通过OAUTH连接并在您进行身份验证时获取私有事件 .

    通过单击按钮,您可以连接到Google帐户(如果已在浏览器中连接,则不会显示任何按钮,您将自动登录) .

    我关注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>
    

    在您的google api控制台中,请确保在API&Auth - > ID中

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

    将Redirection和API引用保留为空 .

  • 2

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

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

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

相关问题