如何将移动版 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 议程列表，同时在桌面上仍具有大日历视图。

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

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

Answer 2

如今，有许多第三方应用程序可以轻松嵌入移动响应式 Google 日历。

这里有几个选项：

• 样式日历
• Tockify

或者，如果您更愿意使用开源软件，FullCalendar 是一个很好的解决方案。他们有一个日历列表视图，在移动设备上效果特别好。如果您希望桌面和移动布局不同，您可以使用 调整日历容器上的观察者大小以触发FullCalendar的changeView方法。以下是有关如何使用 FullCalendar 的 Google 日历插件的一些文档：https://fullcalendar.io/docs/google -calendar

*全面披露，我是 样式日历团队

Answer 3

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

为了以防万一，将日历嵌入您的网站的方法如下：

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

上述说明取自Google 日历支持“嵌入您的网站” 。