CODEWITHSUNDEEP
xhtmlmobileembedgoogle-calendar-api
Brian Hauger
Brian Hauger

Reputation: 521

How to embed mobile version of Google Calendar into mobile website

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.

Upvotes: 2

Views: 5677

Answers (3)

Daniel Ellis
Daniel Ellis

Reputation: 324

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:

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

Upvotes: 2

Leo Leoncio
Leo Leoncio

Reputation: 1709

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>

Upvotes: 3

Jesse
Jesse

Reputation: 8749

To allow everyone to see your calendar, you'll need to make it public.

And just in case, here's how to embed the calendar on your website:

  1. In the calendar list on the left, click the down-arrow next to the calendar you want to embed, and select Calendar settings. (Alternatively, click the Settings link at the bottom of the calendar list, then click the name of the calendar.)
  2. Copy the iframe code displayed in the Embed This Calendar section.
  3. Paste this code into your website to embed your calendar.

The instructions above were taken from Google's Calendar Support "Embed on your website".

Upvotes: 0

Related Questions