Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Caue

How to embed a Google Calendar in a responsive way?

Question

Recommended Posts

  • 2

Here's what I did with my site, and it works great for my Google calendar needs. I used @jehrler's option for large and small containers within a Code Block with the 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=egubo4gbnflkandnr4r2n554%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=8m2gergpnwapfiht0384htn554%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 this to the Page Header Code Injection for that 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,   
.vresponsive-iframe-container object,  
.vresponsive-iframe-container embed {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
</style>




Here's the page with this so you can see what it looks like when done correctly:

http://pdxblues.com/events/

Edited by iamme123

Share this post


Link to post
  • 6

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>

Edited by jehrler
Clarity

Share this post


Link to post
  • 2

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>


If you need support building your website, talk to me! <-- Check the link on the side.

Share this post


Link to post
  • 1

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.

Share this post


Link to post
  • 1

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.

Share this post


Link to post
  • 1

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.

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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


If you need support building your website, talk to me! <-- Check the link on the side.

Share this post


Link to post
  • 0

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


If you need support building your website, talk to me! <-- Check the link on the side.

Share this post


Link to post
  • 0

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


If you need support building your website, talk to me! <-- Check the link on the side.

Share this post


Link to post
  • 0

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

`

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...