Jump to content

Sharing a solution for embedding a Google Calendar that adjusts based on screen-size

Recommended Posts

This is probably easy for some of you, but it took me awhile so I decided to share in case it might help someone else...

I struggled for a couple days with the calendar portion of Squarespace - mobile formatting was the main issue, but there were other considerations as well. In searching for best overall option, I decided to see if I could use Google Calendar within a Squarespace website. It took awhile to figure some of the details out; but the things I learned are all easy to implement. 

 

1. Embedding the calendar is simple enough; here's a tutorial: https://www.askquesty.com/post/how-to-embed-google-calendar-squarespace-tutorial

 

2a. Once embedded, the next step is to wrap the code within the codeblock. Something like this works:

<div class="googleCalendar">

ENTER EMBED CODE FOR CALENDAR HERE

</div>

 

2b. Also, in the codeblock, change the width in the embedded code from width="800" to width="100%"

 

3. After the code is wrapped, head over to CSS and add something like this: 

 

<style>
  .calendar-container {
    position: relative;
    width: 100%;
    padding-bottom: 75%; 
    overflow: hidden;
  }
  .calendar-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
</style>

 

 

 

That's it. Now you have an embedded google calendar that adjusts based on the screen size and the height doesn't collapse. 

It isn't perfect, but it's free, easy to use, incredibly feature-rich, and likely will be around for awhile.

Hopefully this helps someone. 

Cheers

 

PS. If anyone decides to make it more aesthetically pleasing or comes up with improvements to the code, please let me know

Edited by AJZ
slight improvement to code
Link to comment
  • 7 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.