How to customize a calendar in Squarespace
This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes
Calendar blocks can display blog posts, products, images, and events that are scheduled or have already happened. There are not many options for customizing the look of this Calendar in Squarespace, but with the codes in this video, you’ll be able to update a calendar block with colors, borders, and more!
In this Squarespace tutorial, you’ll learn how to:
Give the calendar a border
Change the month and year text style
Fill in today’s date with a custom color
Create round event days
Change the color of event days
Here are the codes from this tutorial:
Be sure to change the borders, fonts, and custom colors to match your site style!
Give the calendar a border:
.yui3-squarespacecalendar-content {border:1px solid red}
Change the month and year text style:
.yui3-calendar-header-label{color:purple; text-transform:uppercase; letter-spacing: .5rem}
Fill in today’s date with a custom color:
.yui3-calendar-day.today {background:#e5f5f6!important}
Remove the border from today’s date:
.yui3-calendar-day.today {border: none!important}
Create round event days:
.yui3-squarespacecalendar .has-event{ Border-radius: 50%!important }
Change the color of event days:
.yui3-squarespacecalendar .has-event{ background:#e5f5f6!important }
Why do all of these codes say !important?
We are using custom CSS to overwrite the original file, and sometimes a browser will ignore our code, so we have to label it !important
