Caue Posted August 9, 2014 Share Posted August 9, 2014 (edited) Embedding it is simple enough. But that won’t work on smartphones or small devices quite well. Edited August 10, 2016 by TreyT retag redesign, hellothisisjeff, Stacie1570047729 and 1 other 4 If you need support building your website, talk to me! <-- Check the link on the side. Link to comment
Caue Posted August 9, 2014 Author Share Posted August 9, 2014 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. Link to comment
tunebeach Posted January 6, 2015 Share Posted January 6, 2015 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? Link to comment
tunebeach Posted January 7, 2015 Share Posted January 7, 2015 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. SheilaD 1 Link to comment
Guest Posted February 13, 2015 Share Posted February 13, 2015 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! Link to comment
Caue Posted February 13, 2015 Author Share Posted February 13, 2015 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. Link to comment
Caue Posted February 13, 2015 Author Share Posted February 13, 2015 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. Link to comment
jehrler Posted March 11, 2015 Share Posted March 11, 2015 (edited) 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> Edited March 11, 2015 by jehrler Clarity Link to comment
Caue Posted March 12, 2015 Author Share Posted March 12, 2015 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. Link to comment
acmeto Posted June 8, 2015 Share Posted June 8, 2015 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 Link to comment
bcassin Posted December 25, 2015 Share Posted December 25, 2015 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. Link to comment
tylermccoy Posted May 17, 2016 Share Posted May 17, 2016 @bcassin, thank you, I'm having the same issue!! Were you able to figure out the height adjustment?? Thanks Link to comment
Solution Guest iamme123 Posted August 10, 2016 Solution Share Posted August 10, 2016 (edited) 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 August 10, 2016 by iamme123 Link to comment
yyguy Posted November 15, 2016 Share Posted November 15, 2016 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:` ` Link to comment
encompass Posted December 20, 2016 Share Posted December 20, 2016 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 Link to comment
CaseyH1570048191 Posted February 21, 2017 Share Posted February 21, 2017 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 Link to comment
Guest iamme123 Posted March 30, 2017 Share Posted March 30, 2017 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. Link to comment
Guest iamme123 Posted March 30, 2017 Share Posted March 30, 2017 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 Link to comment
Guest iamme123 Posted March 30, 2017 Share Posted March 30, 2017 @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. Link to comment
Guest Posted April 25, 2017 Share Posted April 25, 2017 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/ Link to comment
Guest Posted June 7, 2017 Share Posted June 7, 2017 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. Link to comment
pastorzack Posted November 6, 2017 Share Posted November 6, 2017 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. Link to comment
Guest Posted March 5, 2018 Share Posted March 5, 2018 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. Link to comment
ProDabbler Posted March 14, 2018 Share Posted March 14, 2018 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: The Calendar shows up but no events will be populated in the calendar 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. Link to comment
Webscribe Posted May 10, 2018 Share Posted May 10, 2018 @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! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment