javascript - 在网站中嵌入 Google 日历并使用日历中的事件

Question

我正在尝试在我的网站上设置 Google 日历。嵌入它非常简单，只需将 iframe 放在页面上我想要的位置即可。

<iframe src="https://calendar.google.com/calendar/embed?src=mycalendar%gmail.com&ctz=America/Edmonton" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

我将有一个日历页面，但我还想在主页上有一个小的“即将发生的事件”部分，显示接下来即将发生的 3 个事件的事件名称、日期和时间。是否可以从日历访问事件？

Answer 1

您可以使用 Google 的日历 API 来编写一些更加定制的日历行为，例如以您描述的方式处理特定事件。请参阅Google Calendar API Guide for Javascript .

API 示例代码中有一个函数与您要实现的目标很接近:

  /**
   * Print the summary and start datetime/date of the next ten events in
   * the authorized user's calendar. If no events are found an
   * appropriate message is printed.
   */
  function listUpcomingEvents() {
    var request = gapi.client.calendar.events.list({
      'calendarId': 'primary',
      'timeMin': (new Date()).toISOString(),
      'showDeleted': false,
      'singleEvents': true,
      'maxResults': 10,
      'orderBy': 'startTime'
    });

    request.execute(function(resp) {
      var events = resp.items;
      appendPre('Upcoming events:');

      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.');
      }

    });
  }

假设其他一切正常，您应该能够使用 'maxResults': 3, 而不是 'maxResults': 10, 进行调整，以便获取您想要的基本事件数据。