xhtml - 如何将移动版 Google 日历嵌入到移动网站中

Question

我正在尝试将移动版本的 Google 日历嵌入到移动网站中，而无需登录。如果有人之前已经实现此功能或知道如何操作，请提供帮助。

Answer 1

以下是我对网站所做的操作，它非常适合我的 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 议程列表，可以滚动浏览，同时在桌面上仍具有大型日历 View 。

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

<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>