How to embed mobile version of Google Calendar into mobile website

Question

I am trying to get a mobile version of a Google calendar to embed into a mobile website without having to log in. If anybody has gotten this to work before or has any idea how to do it please help.

Answer 1

Here's what I did with my site, and it works great for my Google calendar needs.

I used Google Calendar embed code, but I changed the type of calendar I was embedding on mobile so the content fits on the screen. As long as the "&mode=" equals "AGENDA" for the small container it should display the agenda list, but you can copy this from directly within your Google Calendar.

I used the "month" calendar embed option for the big container with a width set to "100%" and a height of "650" like so:

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

Then used the "agenda" calendar embed option for mobile devices with a width of "100%" and a height of "600" like so:

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

This will give you a responsive iFrame agenda list on mobile that can be scrolled through, while still having the large calendar view on desktop.

Lastly, you need to add these styles to the page

<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

These days, there are a number of third party apps that make it easy to embed mobile-responsive Google calendars.

Here are a couple of options:

• Styled Calendar
• Tockify

Or, if you'd rather use something open source, FullCalendar is a great solution. They have a calendar list view that works particularly well on mobile. If you wanted the desktop and mobile layouts to be different, you could potentially use a resize observer on the calendar's container to trigger FullCalendar's changeView method. Here is some documentation on how to use FullCalendar's Google Calendar plugin: https://fullcalendar.io/docs/google-calendar

*Full disclosure, I'm a member of the Styled Calendar team