Jump to content

How to embed a Google Calendar in a responsive way?

Go to solution Solved by Guest iamme123,

Recommended Posts

  • 9 months later...

Yes @Seangalla, could you please send what you did to the Header code?I am dying to know. I, too, would like a taller AGENDA mode for Iphone.It appears you said:"To fix the mobile size bug I had to edit the HEADER code as follows:"ans there is nothing below.

Have a great day.SquareZerio

Link to comment
  • 1 month later...

Unfortunately he cracked the code but didn't paste it into the comment. Here was my solution:

Below this set of code...


}
.responsive-iframe-container iframe,   
.vresponsive-iframe-container object,  
.vresponsive-iframe-container embed {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

Paste this...


.small-container{
height: 30vh;
}


Edited by BWIT
Link to comment
  • 6 months later...
  • 2 years later...

For those who want the agenda view on mobile to be taller, you can try adding the following code to the CSS:

.small-container {
   height: 70vh;
}

(tweak the value to work best with your site/page)

Link to comment
  • 5 months later...
  • 9 months later...
On 3/11/2015 at 11:06 AM, jehrler said:

OK- I GOT THIS WRONG SOOO MANY TIMES. Hopefully this helps those of you who aren't great or advanced with code like me haha.

First Step:

  • Go to the page you want the Calendar on.  
  • Go to that PAGEs Settings, then go the ADVANCED tab 
  • Then in the  “page header code injection” section paste this CODE and then save it.

<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: 100%;

   padding-top: 50px;

   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>



NEXT STEP!!! Go to your Google Calendar Settings and select the Calendar you want to embed. Grab the code!

NEXT STEP!! ON the PAGE itself, not in the settings now.

  • ADD 2 different CODE Blocks (</>). DO NOTE USE the embed blocks). 

ONE block will be this code:

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

INSERT YOUR GOOGLE CALENDAR LINK HERE!!!! (and make sure it is open to the PUBLIC on google!)

</div>

 

The SECOND block will be:

<div class="responsive-iframe-container small-container">

INSERT YOUR GOOGLE CALENDAR LINK HERE!!!! (make sure it is open to the PUBLIC on google!)

</div>

 

Edited by EnigmaFlame2311
Link to comment
  • 9 months later...

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.