How to change the calendar colors in Squarespace

content block

Sep 26

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! For more information on how to use them, check out the additional info at the end of this article.

/* Add an icon after the text of all buttons */
.sqs-block-button-element:after{
content:”→”
}

/* change the block 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 }aid to isolate a single button */
#block-123456 .sqs-block-button-element:after{
content:”→”
}

/* To use a custom font, try this code */
 .sqs-block-button-element:after{
  content: “a”;
  font-family: ‘Your-Font-Here’!important;
}