具有私人 google 日历事件的 FullCalendar

Question

我目前在我的网站上使用 google 日历，您可以插入 iframe。我测试了 Fullcalendar，我喜欢你可以用它做的事情。

但我想做与嵌入日历相同的事情，我希望能够创建私人事件（不是日历、事件）。日历的共享设置在 public 上，但是当使用 chrome 时，您可以使用您的 google 帐户登录并使用嵌入日历可以看到私人活动（如果您有权访问日历）。

Fullcalendar 可以吗？

Answer 1

Fullcalendar 只是一个前端解决方案。登录 google 帐户和任何其他身份验证不在其中。

也就是说，它可以是 connected to a google calendar，但前提是它是 public google 日历。如果您想将其连接到私人 google 日历，则必须内置该功能。

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

Answer 2

我想出了如何通过 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 如果您在本地网站上工作）

将重定向和 API 引用留空。

具有私人 google 日历事件的 FullCalendar

FullCalendar with private google calendar event

fullcalendar

google-calendar-api