Solution AJZ Posted July 31, 2023 Solution Posted July 31, 2023 (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 July 31, 2023 by AJZ slight improvement to code woodyiii, sayreambrosio, tuanphan and 1 other 4
mlustig Posted March 10 Posted March 10 @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!
SpecterWebDesign Posted March 11 Posted March 11 @mlustig Did you paste the style tags (<style>) in the Custom CSS portion as well? If so, that is your issue. Using SquareSpace's custom css block, it will only take actual css, so you have to leave the html style tags out of it. AJZ 1
PCL Posted July 26 Posted July 26 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.
PCL Posted July 26 Posted July 26 Also @AJZ it looks like this is now a premium feature. Do you happen to know anything about that?
tuanphan Posted July 28 Posted July 28 On 7/26/2024 at 9:59 PM, PCL said: Also @AJZ it looks like this is now a premium feature. Do you happen to know anything about that? You try using Markdown Block instead. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
PCL Posted July 29 Posted July 29 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....
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment