Question

我正在尝试将移动版Google日历嵌入到移动网站中而无需登录。如果有人之前已经开始工作或者有任何想法，请帮助。

Answer 1

要让每个人都能看到您的日历，您需要将其公开。

以防万一，以下是如何在您的网站上嵌入日历：

在左侧的日历列表中，点击要嵌入的日历旁边的向下箭头，然后选择日历设置。（或者，单击日历列表底部的“设置”链接，然后单击日历的名称。）
复制“嵌入此日历”部分中显示的iframe代码。
将此代码粘贴到您的网站中以嵌入您的日历。

上述说明摘自Google's Calendar Support "Embed on your website"。

Answer 2

这是我对我的网站所做的，它非常适合我的 Google 日历需求。

我使用了 Google 日历嵌入代码，但我更改了嵌入在移动设备上的日历类型，以便内容适合屏幕。只要小容器的“&mode=”等于“AGENDA”，它就应该显示议程列表，但您可以直接从 Google 日历中复制它。

我为大容器使用了“月”日历嵌入选项，其宽度设置为“100%”，高度设置为“650”，如下所示：

<div class="responsive-iframe-container big-container">
<iframe src="https://calendar.google.com/calendar/embed?
showTitle=0&showNav=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0&height
=700&wkst=1&bgcolor=%23db694f&src=123123123%40group.calendar.
google.com&color=%23fbdbac&ctz=America%2FLos_Angeles" style="border-width:0" 
width="100%" height="650" frameborder="0" scrolling="no"></iframe>
</div>

然后为移动设备使用“议程”日历嵌入选项，宽度为“100%”，高度为“600”，如下所示：

<div class="responsive-iframe-container small-container">
<iframe src="https://calendar.google.com/calendar/embed?
showTitle=0&showNav=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0
&mode=AGENDA&height=800&wkst=1&bgcolor=%23db694f&src=123123123
%40group.calendar.google.com&color=%23B1440E&ctz=America%2FLos_Angeles" 
style="border-width:0" width="100%" height="600" frameborder="0" 
scrolling="no"></iframe>
</div>

这将在移动设备上为您提供一个响应式 iFrame 议程列表，可以滚动浏览，同时在桌面上仍具有大日历视图。

最后，您需要将这些样式添加到页面中

<style>
@media (max-width: 550px) {
   .big-container {
       display: none;
   }
}
@media (min-width: 550px) {
   .small-container {
       display: none;
   }
}
/* Responsive iFrame */
.responsive-iframe-container {
   position: relative;
   padding-bottom: 56.25%;
   padding-top: 30px;
   height: 0;
   overflow: hidden;
}
.responsive-iframe-container iframe,   
.responsive-iframe-container object,  
.responsive-iframe-container embed {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
</style>

如何将移动版Google日历嵌入移动网站

2 个答案: