How to change the calendar colors in Squarespace

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;
}
 
insidethesquare


Grab my collection of custom codes for Squarespace: 
→ insidethesquare.co/css

https://insidethesquare.co
Previous
Previous

How to customize chart blocks in Squarespace

Next
Next

How to add an icon to a Squarespace button