How to embed a Google Calendar in a responsive way?

Embedding it is simple enough. But that won’t work on smartphones or small devices quite well.

I found the answer here and there .

Just embed it as you normally would then add this to the page advanced settings or as a new block of code:

<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,   
.vresponsive-iframe-container object,  
.vresponsive-iframe-container embed {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
</style>

Customize the 550px at your will.

Make 2 embedded codes, one for small-container and one for the big.

Then simply wrap your embedded ìframe with this:

<div class="responsive-iframe-container big-container">
</div>

I have the google calendar embedded, but not sure what you mean by "2 embedded codes"...so one right after another as separate code blocks? And wrap each of them with the iframe wrapper you list above, one for big and one for small? Do each of the embedded codes have to be different? How so?

One of the Squarespace folk suggested this calendar formatter, which worked swell for me in getting my Google calendar into my website:http://upto.com/

It is responsive in that it squishes down and expands up, ...AND you can specify different formats to embed (month, week, day, list)...so what I'm tempted to do is turn it into a list below a certain resolution, as the default...or else turn it into a tiny month numbers-only format...will have to think more about this, but that would be truly responsive, not just squishable, actually changing form.

I am having trouble getting this to work for me! Can you provide more steps? I am new to CSS and having problems seeing any results, so I don't know where I went wrong!

I meant two codes from google. They're as different as the code in itself suggests: big-container and small-container.

Sorry, I never meant this post to be easy to read for who don't know how to hack... It would become too big! :P

Sounds awesome! I'll try it next time I need one. :)

Cawas’ solution worked like a charm and I’m no web slinger.

1. I copied his main code into the advanced setting for a page.
2. I inserted a Code Block on the page.
3. Then I pasted the embedding code for the two versions of the Google Calendar that were optimized for different sizes into the Code Block.
4. Wrapped each of those inside the div class code matching each size version of the embedded calendar like this:

   <div class="responsive-iframe-container big-container">##Google’s embed code for the big calendar##</div><div class="responsive-iframe-container small-container">##Google’s embed code for the small calendar##</div>

This all worked great except that on phones (including iPhone) the small calendar would display fine BUT would not populate with any actual events. YMMV but this seems pretty universal.

After a bunch of searching the only workaround I could find was to change the embed code for the smaller calendar to make it non-JavaScript based (so lose some of the formatting options).

To do that you just change the embed code for the smaller calendar from:

<div class="responsive-iframe-container small-container"><iframe src="https://www.google.com/calendar/embed?##blah,blah,blah##</iframe></div>

To this (notice that it is now “htmlembed?” rather than just “embed?”)

<div class="responsive-iframe-container small-container"><iframe src="https://www.google.com/calendar/htmlembed?##blah,blah,blah##</iframe></div>

Yeah, precisely the whole procedure indeed. Also, you should try tunebeach's suggestion, which sounds awesome. ;)

This works fine. But this affect devices where this works well.By figuring out which device is viewing the site using php you can select the calender code to display based on that.http://codeorangutan.blogspot.com/2015/06/how-to-embed-google-calendar-in.html

I got this to work following jehrler's & Cause's instructions. I only have one problem (no experience coding). My calendar is embedded as Agenda view. It looks fine on the iphone and ipad, but on the website, it only shows about 3 days info. The height has been truncated. Before I inserted the above code, I was able to see about a week's work of events. I know it's code issue, what do I change so that when someone views the calendar it is longer i.e. the height is longer.

@bcassin, thank you, I'm having the same issue!! Were you able to figure out the height adjustment?? Thanks

Alright, so @iamme123 's answer works when resizing my browser window, but for some reason, on my iPhone, it just appears blank. For that matter, your http://pdxblues.com/events/ page also is blank on my iPhone.

I tried changing the embed code to htmlembed as suggested by @jehrler and I'm not having any luck.Where am I going wrong?

Link to page: HERE

(I pasted the exact code from iamme's post into the page header injection.

Code Entered into Code Block:`

`

Hi,

Thanks for sharing how you got this to work for your site! I tried the code/steps you used but both the big and small (agenda view) calendars show up on my desktop and mobile devices. How can I fix it so only the big calendar shows on the desktop, and only the small calendar shows up on mobile?

Thanks!

Ben

I think the retina displays on the newer large are messing this up. Is 667px the number to use to replace 550px to account for that? Or is another number better?

I think 667 is the number to use for the width on an iPhone 6/7 and 736 for the 6+/7+. Per https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

Hey Ben, sorry I didn't see this until now! Not sure why I didn't get a notification.

As long as the iFrame's are both wrapped in this code it should allow you to hide and show one or the other on different screen sizes:

<div class="responsive-iframe-container small-container">
*iFrame code for mobile goes here*
</div>

Both the "monthly" and "agenda" iFrames can be pasted into a single Code Block on the page, each one wrapped in the div code for the small container (mobile agenda view) and big container (desktop and iPad monthly view). The "@media" CSS pasted into the Page Header Code Injection section should hide and show each iFrame.

I just tested out the Events page I linked as an example for this on an iPhone 6s and it looks like it's loading for me without issue. I'm not sure if your device needs troubleshooting if you're not able to see the page, but you might check to see that everything's up to date and try restarting the phone.

I tested out the code you provided on a test page and used the CSS in the

@bcassin If the small container's iFrame code has "&mode=AGENDA" in it that would be the cause. Remove just those characters from the iFrame code and it should change it to a monthly view.

This worked great except on mobile. I'm having the same trouble - it's just blank on my iPhone 6.

https://www.bonafidefoodlove.com/events/

After making the above adjustments "embed?" to "htmlembed?" the mobil site no longer responds as a responsive site would nor can I have the small container display in Agenda form. I see @iamme123 suggestion about adding "&mode=AGENDA" in the iFrame are to the small container code, however I'm not able to figure out where within the code to place it. Also not code savy.

I'm putting this code in exactly, with the iframes from google calendar (month and agenda, according to large and small). It works great on the computer, but I can't get it to show up on mobile. Did anyone find a sufficient fix for this yet? I've tried multiple things suggested on the threads here and the mobile site is still showing up blank.

I was experiencing a mobile sizing bug. Basically the smaller agenda calendar was displaying on mobile but it was WAY smaller than the example above.

My web guy discovered that it was happening because of a bit of code in the HEADER code that was forcing the small agenda calendar to keep the same aspect ratio, making the width=“100%” height="650" not respond to changes.

To fix the mobile size bug I had to edit the HEADER code as follows:

And then I used the 2 container codes (big/small) as in @iamme123 's example above. :)

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

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

Now if I change the hight= to say "400" it will be 400 tall. :)

Thanks everyone! Hope this helps.

Good Morning, I'm hoping someone with expertise here can help with a small problem. We followed the recommendations above to embed a google calendar in a responsive way, and on a desktop it is working really well, however on mobile devices we seem to be having two issues:

1. The Calendar shows up but no events will be populated in the calendar
2. If you interact with the calendar, it starts growing - like it's animated. Very odd.

I definitely do not have a ton of experience with coding, so I'm ignorant of the mistake that may be there, however we did get the desktop to work great based on the above. Is anyone able to help us to get the mobile version working?

The Calendar is located here on this site:

https://www.strivedanceacademy.ca/studiocalendar/

Thank you in advance.

@seangalla, could you please resend your edit for the Header code? Be sure to use the "code sample" button in the tool bar when copying and pasting code into your reply. Thanks!