Javascript 将谷歌日历嵌入网站并使用日历中的事件

我正在尝试在我的网站上设置谷歌日历。嵌入它非常简单，只需将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个事件的时间。是否可以从日历中访问事件

您可以使用谷歌的日历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.');
      }

    });
  }

/**
*打印中接下来十个事件的摘要和开始日期时间/日期
*授权用户的日历。如果未找到任何事件，则
*适当的信息被打印出来。
*/
函数listUpcomingEvents（）{
var请求=gapi.client.calendar.events.list({
'日历ID'：'主要'，
'timeMin'：（新日期（））.toISOString（），
“showDeleted”：false，
“singleEvents”：对，
“maxResults”：10，
“订购人”：“开始时间”
});
请求执行（功能（resp）{
风险值事件=相应项目；
appendPre（“即将到来的事件：”）；
如果（events.length>0）{
对于（i=0；i

---

假设其他一切正常，您应该能够调整它，使用

'maxResults'：3，

而不是

'maxResults'：10，

，以获取所需的基本事件数据。

您可以使用

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

或者，使用jQuery

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

---

iframe的id为“myFrame”。

据我所知，问题在于如何使用页面中已有的信息，而不是通过再次调用从何处获取信息。如果我问你如何打开一盒我手里已经拿着的巧克力，你能告诉我如何去最近的糖果店吗？我认为这是最简单的方法，但我怀疑大多数访问者会遇到跨域安全壁垒，试图访问谷歌iFrame内的内容。我同意这两种观点。您的答案提供了生成问题的问题的解决方案，但它没有回答问题。因此，从技术上讲，这不是一个有效的答案。是吗？是的，我想是的，我本来希望添加一个更有价值的答案，但是谷歌日历的API有很多内容。经过审查，API指南做了一件非常类似的事情，因此我更新了我的答案，希望对手头的特定任务更有用