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/
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
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.
Cawas’ solution worked like a charm and I’m no web slinger.
I copied his main code into the advanced setting for a page.
I inserted a Code Block on the page.
Then I pasted the embedding code for the two versions of the Google Calendar that were optimized for different sizes into the Code Block.
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. ;)
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 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.
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 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?
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
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.
@bcassin, thank you, I'm having the same issue!! Were you able to figure out the height adjustment?? Thanks
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][1] [1]: http://codeorangutan.blogspot.com/2015/06/how-to-embed-google-calendar-in.html
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:
<div class="responsive-iframe-container big-container">
<iframe src="https://calendar.google.com/calendar/embed?title=PIC%20VOLUNTEER%20PROGRAM%20CALENDAR&showTitle=0&showPrint=0&showCalendars=0&showTz=0&height=650&wkst=1&bgcolor=%23FFFFFF&src=rupregnant.com_qptgmg4dgbbqkco4kvcitj5k58%40group.calendar.google.com&color=%236E6E41&ctz=America%2FChicago" style="border-width:0" width="100%" height="650" frameborder="0" scrolling="no"></iframe>
</div>
<div class="responsive-iframe-container small-container">
<iframe src="https://calendar.google.com/calendar/htmlembed?title=PIC%20VOLUNTEER%20PROGRAM%20CALENDAR&showTitle=0&showPrint=0&showCalendars=0&showTz=0&mode=AGENDA&height=650&wkst=1&bgcolor=%23FFFFFF&src=rupregnant.com_qptgmg4dgbbqkco4kvcitj5k58%40group.calendar.google.com&color=%236E6E41&ctz=America%2FChicago" style="border-width:0" width="100%" height="650" frameborder="0" scrolling="no"></iframe>
</div>
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
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
This worked great except on mobile. I'm having the same trouble - it's just blank on my iPhone 6.
