by Thomas | Design in , , | 54,484 views

Make Google Calendar iFrame responsive

Google logoGoogle Calendar allows you to embed one or more calendars on the web using an HTML iFrame. This is a great solution to publish an agenda online since it allows you to quickly share your existing calendar online with just a copy and paste.

Still, the output is an outdated iFrame of the Google Calendar layout, which has not been updated by Google in recent years. The layout is boring, but that’s not the only thing that’s wrong with the iFrame. It simply doesn’t scale well on mobile devices. On smartphones (and smaller tablets), the calendar goes out of the viewport, resulting in a non-so-friendly user experience.

The solution here is to make the embeddable Google Calendar responsive so it scales with the screen size of the user’s device.

So first, get your HTML ready by exporting it. It may look similar to this:

<iframe src="https://calendar.google.com/calendar/embed?showTitle=0&amp;showDate=0&amp;showPrint=0&amp;showCalendars=0&amp;showTz=0&amp;height=600&amp;wkst=2&amp;hl=nl&amp;bgcolor=%23FFFFFF&amp;src=example.be_cpkbjcpttgb5q0%40group.calendar.google.com&amp;color=%23ffcf03&amp;ctz=Europe%2FBrussels" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

This would output the normal calendar, which is default. Now, we’ll make this iframe resizeable/responsive. We solve our problem by adding some CSS magic. So first, add the iframe inside a proper <div>.

<div class="responsiveCal">

<iframe src="https://calendar.google.com/calendar/embed?showTitle=0&amp;showDate=0&amp;showPrint=0&amp;showCalendars=0&amp;showTz=0&amp;height=600&amp;wkst=2&amp;hl=nl&amp;bgcolor=%23FFFFFF&amp;src=example.be_cpkbjcpttgb5q0%40group.calendar.google.com&amp;color=%23ffcf03&amp;ctz=Europe%2FBrussels" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
</div>

Now that’s done, add the following CSS to your CSS file or in-line.

.responsiveCal {

position: relative; padding-bottom: 75%; height: 0; overflow: hidden;

}

.responsiveCal iframe {

position: absolute; top:0; left: 0; width: 100%; height: 100%;

}

Your Google Calendar iframe is now fully made responsive for mobile devices! The fields the user can click on will be small, though. So it’s not an ideal solution. Still, I consider this an elegant solution to make things better for the current users of mobile devices until Google releases an update to their embeddable code.

 

Author Bio

Thank you for your interest in my blog! On this miniblog, I write mostly short (technical) blog posts that might interest other people. Read more about me or feel free to contact me.

 

57 thoughts on “Make Google Calendar iFrame responsive”

  1. Brilliant!

    It also makes really nicely for embedding a Google Calendar into a Bootstrap based layout for the desktop as well.

    Thanks for sharing.

    Reply to Julian

  6. I used this on my website and it works flawlessly for landscape layout, but on a smartphone, the calendar is cut off on the right side.

    Is there any way to correct this? I included my website link in the private fields.

    Reply to Andrew

  7. Hi I’d appreciate your help. I have used the code you provided and it did resize my calendar in responsive view but the events are not visible as the calendar goes far too small to show anything other than the dates. Is there any easy fix for this? Thanks for your time!

    Reply to abigail

  8. I have not done much coding so I am having problems embedding your code example into goggle calendar then copping the HTML code to my GoDaddy calendar?
    I think I understand the but I am not clear on the ?
    In any case it does not seem to work. I am using the manual method of reducing the size of the calendar in Google Calendar now. This works good for mobile but is not very good for PC users?

    Reply to Steve

  9. i dont do a lot of coding at all so I do not know what the CSS line means. can you help direct me where I should insert those commands in the html?

    Reply to Wendy

  10. Fantastic! Thank you so much, Thomas!

    One question: the different viewing options of Google Calendar (Week, Month, Agenda) are cut off. I’ve been trying to adjust the code to have those also show, but no result. Do you have a solution for this?

    Reply to Luna

  12. Thank you so much Thomas! I have been searching for a solution to this for soooo long. You just made my day :-)

    Do you have any suggestions for making the frame taller on mobile phones? I tried increasing the height parameters but it didn’t seem to make a difference.

    We have a yoga class schedule here: http://www.riverwiseyoga.com/schedule/

    Here’s my code:

    It looks great on the desktop and iPad but the calendar frame on my iPhone 7 is so small and hard to scroll.

    Here’s a screen shot:
    http://www.riverwiseyoga.com/wp-content/uploads/2016/12/IMG_0465.png

    Any assistance you can provide would be most appreciated. Thanks!

    Reply to Kirstie

    1. You just need to increase the padding-bottom in the responsiveCal CSS class. Currently it is set to 75% but experiment with increasing to 100% (or more). If you want the entire day (all 24 hours) to show then set it to 350% – but I wouldn’t recommend that. Hope that solves your problem!

      Reply to Allyson

      1. hi Allison,

        im confused. When I add the codes you mentioned, it simply adds another calendar below mine, in a completely different language. Please help! I just want my calendar to show on my mobile view. thank you

        Reply to garineh

  16. I found your approach useful, but for some reason it does not work well on an iphone (5S). The outline of the calendar is visible on the top and left, but there is no calendar. I have experimented with other devices and it works fine.

    Reply to Keith

  18. Thanks! Worked Great on my WordPress Website. Added the Free plugin called WordPress Add Custom CSS and pasted the custom CSS you provided and it worked straight away. Genius! THANKS!

    Reply to Christian

  19. I’m attempting to paste the last bit of code into the CSS file for Weebly, however, I am unsure where in the main.less file under “styles” in weebly to paste this.

    The numerical order of the css file shows #1 as “/ * Resets”
    with dividing dashed line and then general codes for lists, unordered lists and etc… then another dividing dashed line and then the code sheet goes into heights and etc…

    I’m just not clear where to post:
    “.responsiveCal {

    position: relative; padding-bottom: 75%; height: 0; overflow: hidden;

    }

    .responsiveCal iframe {

    position: absolute; top:0; left: 0; width: 100%; height: 100%;

    }”

    Can anyone assist?

    Thank you for your time.

    Reply to ADS

    1. I just tried this now, and I wrapped it in style tags. I put the whole thing right before my Iframe tag.

      .responsiveCal {

      position: relative; padding-bottom: 75%; height: 0; overflow: hidden;

      }

      .responsiveCal iframe {

      position: absolute; top:0; left: 0; width: 100%; height: 100%;

      }

      <iframe etcetera etcetera

      Reply to Steve

    2. You need to paste that section somewhere different for Weebly. Go to Theme and at the bottom there is an option to “Edit HTML / CSS”. Paste it at the bottom of the text box that opens up, save and should make it interactive

      Reply to James

  20. Details of events on the google calendar embedded on our website can be seen when tapped on android phones but not on iPhones – when you tap on the event, the window flashes for a second but won’t open. Any ideas on how to fix?

    Reply to LF

  22. Thanks! Great solution. For people who are having difficulty getting the right edge of the calendar to display, I found that the only way to do this on a normal sized smart phone is to deselect the “Navigation Buttons” in the Google embed helper page. Once the buttons are gone the right edge of the calendar displays fine. But the buttons are gone. No way I could find to make it work otherwise because the buttons and date of the calendar are pushing the top edges of the calendar to the right.

    Reply to SWG

  23. Hi Thomas

    Wondering if you might be able to help me with CSS for square space heights temlate. I am trying to embedd my google calendar. I did manage to get it to show but it’s unresponsive on mobile, no fields can be entered or clicked on ect.

    Any pointers would be much appreciated.

    Cheers
    lizzie

    Reply to Lizzie

  24. Hi! I am using Photobiz.com as a site builder to embed my calendar. Seems they only work with HTML. How do I input the CSS code in this case? Thank you for your help!!!

    Reply to cheryl

  30. This works fine on initial load, but when I rotate from vertical on my iPhone to Horizontal and back to Vertical, the iFrame height expands to the bottom of the page. Not sure how to resolve this.

    Reply to John

  31. I’m wondering if anyone has found a way (after making the calendar responsive) to the make the popups responsive also. Currently, after adding the code mentioned in this article, the popups often extend off the screen. I’d like to make them resize also. Thoughts?

    Reply to Quimbly

Leave a Reply to Deeva Cancel reply

Your email address will not be published. Required fields are marked *