将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的Calendar API编写更多定制的日历行为，例如以您描述的方式处理特定事件。 请参阅适用于Javascript的Google Calendar 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,来调整它，以获得你所追求的基本事件数据。

Answer 2

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

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

或者，使用jQuery

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

您的iframe的ID为“myFrame”。