Jump to content

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

Go to solution Solved by AJZ,

Recommended Posts

  • Solution
Posted (edited)

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
  • 7 months later...
Posted

@AJZ I pasted this code into the CSS and it says "Syntax Error on Line 1

I am not sure why this would be. Can you help?

Thanks!

  • 4 months later...
Posted

Hey @AJZ, I really appreciate you posting this. Unfortunately, it's not working for me. Hoping you can help. 

Here's what it looks like when I do your Step 2a. Is that correct?

Also, in Step 3, I suppose you mean changing the selection from HTML to CSS, is that right? If so, do I then just copy and paste what you have above the other content?

Sorry to be thick. Thanks for the hand holding.  

Screenshot 2024-07-26 at 10.44.13 AM.png

Posted

Whoah @tuanphan, that's amazing!! Thanks very much, indeed. Now just trying to figure out how to show events in my cal as simply 'busy,' so descriptions aren't displayed.... 

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.