How to customize a calendar in Squarespace // Squarespace calendar block tutorial

[@InsideTheSquare]

⚠️ IMPORTANT CSS UPDATE ⚠️ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation! To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: kzbin.info/www/bejne/m6atonuOqMR_Z68

[@wegrzynbruce]

These are terrific videos - clear, easy to follow and to the point. Thanks a million - really helped.

[@InsideTheSquare]

You're very welcome - happy to help ☺️

[@equivont9183]

This is amazing. Thank you!

[@InsideTheSquare]

You're welcome - happy to help! :)

[@Lyubovstrauss]

Thank you for teaching. I changed the dates color in the calendar using your code in my client website.

[@InsideTheSquare]

Wonderful - I'm so happy my codes helped you with your site!

[@JaiSequoia]

This is great thanks Becca! And happy birthday 🥳

[@InsideTheSquare]

You're so welcome - and thanks! 🥰

[@kenmacymusic]

Very helpful! Thank you very much!

[@InsideTheSquare]

You’re welcome! Happy to help. 😎

[@brentmiller3250]

This is exactly what I was looking for!!! I'm subscribed. :-)

[@InsideTheSquare]

Awesome! Thanks for subscribing & I'm glad you liked the video 🥰

[@matteaton]

Thank you, that was really helpful!

[@InsideTheSquare]

You’re welcome! Happy to help. 😎

[@PurrfectPawsPack]

How can I code a custom background colour for the calendar? As it is, I can't read the numbers on the calendar, and I'd like to add more personalization to my calendar block. Thanks for your time!

[@InsideTheSquare]

Great question - and yes! You can use the main selector from the tutorial with the background property, like this, changing my hex color to any color you want to use: .yui3-squarespacecalendar-content { background: #A1D9DD!important }

[@jimenaduarte4768]

Hi! thank you. Is there a way to change the day number and day of the week style? Thanks!!

[@InsideTheSquare]

This should work: Change the month and year text style: .yui3-calendar-header-label{ color:purple; text-transform:uppercase; letter-spacing: .5rem }

[@jimenaduarte4768]

@@InsideTheSquare Thank you Becky! I meant to change the number of the calendar (example: Wednesday 4th January, change the number 4 to bigger size and change the letter "Wed" to bigger size too

[@ToyahTheBusinessBean]

@@jimenaduarte4768 This is the code you need if you haven't already found a work around: .yui3-calendar-weekdayrow {color:white!important;}

[@rhpooley]

This is awesome. Thank you so much - I've happily subscribed! Is there a way to lower the header (ex. "AUGUST 2022") so there's more padding between border and the header? Greatly appreciate your help!

[@rhpooley]

Also... this is next level but on the desktop view for my website, you can see images on the days where there are events. Is it possible to show images on the mobile version as well?

[@InsideTheSquare]

Great question - and totally! You can add some top padding to the month and year to increase the distance between the text and the border. Try adjusting the code in this value until it's perfect for you: .yui3-calendar-header-label{ padding-top:20px }

[@InsideTheSquare]

Ooh interesting question! We might be able to force visibility on smaller screens with either a display property or opacity property. I don't have the code for it just yet, but I'll add it to my tutorial to do list, so stay tuned! 🙌

[@rhpooley]

One more question - is there a code so that I can change the color of all dates in the past?

[@thiswaytofabulous]

@insidethesquare is there a way to generate a PDF of calendar events from the events widget/calendar?

[@InsideTheSquare]

I don’t know of a way to do that but it’s a great idea! I’d recommend posting in the Squarespace forum in case someone knows of a plug-in for that. 👍👍

[@willkwok9932]

Thank you for the tutorial, it's really helpful! I'm actually also hoping to change all Wednesday into a same colour, what would be the code for it? Thank you!!

[@InsideTheSquare]

Great qutistion! I did some digging and found this selector that worked, as long as your calendar starts on Sundays. Change the word green to any color you want Wednesday to be: .calendar_col4 { background:green!important }

[@0caron0]

Thanks so much for this brilliant tutorial! My calendar is super pretty now but sadly I cannot pull any thing through from my store into the calendar. Ive followed all the instructions on the Square space page and googled for days. Are you able to help me with this at all please ?????

[@InsideTheSquare]

That’s definitely a functionality question - I would reach out to Squarespace support. I’ve found their live chat yo be super responsive; hope they can help! support.Squarespace.com

[@ErinBecker-o8c]

This is so helpful! Is there a way to assign different background colors to specific event tags? For example, all events tagged as "Trainings" would be blue and all events tagged as "Workshops" would be red. Thanks in advance if you can shine some light on this conundrum!

[@InsideTheSquare]

Interesting - I love this idea!! I don't have a code for it yet but i will add it to my to do list. Feel free to email me a link to your specific site if you wanna help me test the code once I create it (support-at-insidethesquare.co)

[@meaganjustus]

Super helpful--thanks! 🙂

[@InsideTheSquare]

Yay! So happy I could help! 🙌🏻

[@christopherkulus]

When I went to change the font colour of the 'has event', it didn't work from the code you used, any suggestions? Thanks!

[@InsideTheSquare]

Did your code have !important added at the end?

[@churchofthecrossadmin9068]

Thanks for this! Is there any way to make certain events have certain colors?

[@InsideTheSquare]

Great question! Feel free to submit a code help request here: insidethesquare.co/code-help

[@KatArgarate]

You can upload a png of round solid block of the colour as the event image

[@GaugeOuellet]

How do i have my blog post pictures on the calendars from my website transfer to the mobile version of my website?

[@InsideTheSquare]

Great question! I'll have to brainstorm on this one; probably possible with some clever CSS. If I am able to create a code for it, I'm sure it will make a great tutorial so stay tuned!

[@GaugeOuellet]

How do we make the numbers and days of the week bigger and bolder on the calendars?

[@InsideTheSquare]

You'll need to target the selector for those (I use this free Chrome extension to grab that info; not affiliated - just a fan! chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff Then you can use the font-size and font-weight of your choosing. name of selector here{ font-size: 50px; font-weight: bold; !important }

[@jadeg01]

Is there a way to have a subscribable calendar in Squarespace that you know of other than embedding a Goggle Calendar?

[@InsideTheSquare]

Sorry Jade, I don't. I would reach out to the maker of the platform you want to use and see if they have a specific fix. Good luck!

[@mr.vansuther]

the second u stated "this is where we are gna paste the code thats below ur video".........thats where u lost me.

[@InsideTheSquare]

Using any of the examples in the description of the video, you can use ctrl+c to copy the code and ctrl+v to paste it, or command c & command v on a Mac.