How to embed a Google Calendar in a responsive way?

@iamme123 , what template did you use for the pdx blues and jazz page?

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

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;
}

What is the exact template did you try to use but google calendar is work fine on my new phone  iPhone 11 pro max screen resolution

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)

I would recommend using Styled Calendar.

It's fully mobile responsive, so the calendar embed will work well on any screen.

It's also very simple to set up, and it allows you to fully customize your calendar's colors, fonts, layouts, language settings, etc.

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>

@EnigmaFlame2311

Thank you SO much for making this totally clear to a non-developer like me—it worked!