在网页上显示来自 Google 日历的选定数据？ [关闭]答案

【问题标题】：Displaying selected data from Google Calendar on web page? [closed]在网页上显示来自 Google 日历的选定数据？ [关闭]
【发布时间】：2021-03-13 15:43:23
【问题描述】：

我很感激有几个类似的问题，但似乎没有一个能解决我的特殊（简单！）需求。

我有一个 Apps Script 函数，它可以愉快地访问公共 Google 日历并提取今天的事件，我可以很高兴地在控制台上列出这些事件。

我现在要做的是将这些事件放在 HTML 网页上。这些事件在一天中经常会发生变化，因此人们希望在加载我的网页时能够看到最新数据。看似简单的事情，但越看越糊涂！

有没有一种简单的方法可以做到这一点，还是我必须参与 Google API 等？

谢谢。

也许我应该补充一点，我知道我可以在页面中嵌入日历，但用户只想知道“设施现在/今天晚些时候是否开放”，而不必操作 Google 日历。

【问题讨论】：

如果您愿意创建 web 应用程序，有一个简单的方法。

标签： html google-apps-script calendar google-calendar-api

【解决方案1】：

您可以对嵌入视图进行一些调整，例如仅显示一天。这是一个例子： https://calendar.google.com/calendar/u/0/embed?showNav=0&showPrint=0&showCalendars=0&mode=DAY&src=en.usa%23holiday@group.v.calendar.google.com

也就是说，我可以理解不想使用 iframe。好消息是，如果您已经在使用 Apps 脚本，那么您已经在使用 Calendar API。

您唯一需要做的新事情就是启用 API 创建您自己的 API 密钥。按照说明：

我已经简化了 quickstart example 以在没有 OAuth 的情况下工作（这是复杂性的主要部分）。您无需关心公共日历的授权。

<!DOCTYPE html>
<html>
  <head>
    <title>Google Calendar API Quickstart</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>Google Calendar API</p>
    <pre id="content" style="white-space: pre-wrap;"></pre>

    <script type="text/javascript">
      // API key from the Developer Console
      var API_KEY = '<YOUR_API_KEY>';

      // Array of API discovery doc URLs for APIs used by the quickstart
      var DISCOVERY_DOCS =
        ["https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"];

      var CALENDAR_ID = 'en.usa#holiday@group.v.calendar.google.com';


      function start() {
        gapi.client.init({
          'apiKey': API_KEY,
          'discoveryDocs': DISCOVERY_DOCS,
        }).then(function() {
          listUpcomingEvents();
        });
      }

      function onLoad() {
        gapi.load('client', start);
      }

      /**
       * Displays a list of events from the public calendar.
       * You'll need to tweak the rest to show the data you like.
       */

      function appendPre(message) {
        var pre = document.getElementById('content');
        var textContent = document.createTextNode(message + '\n');
        pre.appendChild(textContent);
      }

      function listUpcomingEvents() {
        gapi.client.calendar.events.list({
          'calendarId': CALENDAR_ID,
          'timeMin': (new Date()).toISOString(),
          'showDeleted': false,
          'singleEvents': true,
          'orderBy': 'startTime'
        }).then(function(response) {
          var events = response.result.items;
          appendPre('Upcoming holidays:');
          if (events.length > 0) {
            for (i = 0; i < events.length; i++) {
              var event = events[i];
              var when = event.start.dateTime;
              if (!when) {
                when = event.start.date;
              }
              appendPre(event.summary + ' (' + when + ')');
            }
          } else {
            appendPre('No upcoming events found.');
          }
        });
      }

    </script>
    <script async defer src="https://apis.google.com/js/api.js" onload=onLoad();>
    </script>

  </body>
</html>

另见Google Calendar API Reference Docs

【讨论】：

太棒了！感谢您非常全面且易于理解的回答！