在网站中嵌入谷歌日历，并使用日历中的事件

Embed Google Calendar in website and use events from calendar

本文关键字：日历 事件 谷歌 网站      更新时间：2023-09-26

我正试图在我的网站上设置一个谷歌日历。嵌入它非常容易，只需将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个事件的事件名称、日期和时间。是否可以从日历中访问事件？

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

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,来获得您想要的基本事件数据。

您可以使用访问任何iframe的内容

document.getElementById('myFrame').contentWindow.document

或者，使用jQuery

$('#myFrame').contents().{...};

其中您的iframe的id为"myFrame"。

相关文章：