SharePoint (2003 thru Online): Change default color in Calendar without using Overlay of Calendars

Tuesday, July 5, 2022

Change default color in Calendar without using Overlay of Calendars

Usually, we have Theme colors changing the entire theme of the site including document libraries, lists and Calendars. Here we have an option to add a little CSS script to change the colors of the default Calendar without adding new Views and using Overlay of Calendars.

The default color of the Calendar.

Go to Calendar page > Click on Wheel icon > Edit Page > Add Web Part > Media and Content > Content Editor > Add

The Content Editor Web part was added to the Calendar Page. Click on 'Click here to add new content'.
It will show new Tool bar Menus on top side. Under Format Text > Click on 'Edit Source'

<style type="text/css">
.ms-acal-item {
 BORDER: #C0362C; BACKGROUND-COLOR: #C0362C
}
.ms-acal-default-hover {
 BORDER: #C0362C; BACKGROUND-COLOR: #C3B7AC
}
.ms-acal-apanel-item {
 BORDER: #C0362C; BACKGROUND-COLOR: #C3B7AC
}
</style>

Copy, paste the above CSS Code into the HTML Source Window, Click OK. You will observe the entries color change in the Calendar. 


Below is the color change in the Calendar.


No comments:

Post a Comment