Persist colors for Calendars in View

persistSharePointOverlayCalendarColor.css

<style type="text/css">
/* Persist the calendar item color for .ms-acal.color1 (dark teal) */
.ms-acal-item {
	background-color: #00485B;  
}
</style>

<style type="text/css">
/* Persist the calendar item color for .ms-acal.color2 (blue) */
.ms-acal-item {
	background-color: #0070C9;  
}
</style>

<style type="text/css">
/* Persist the cal item color for .ms-acal.color3 (green) */
.ms-acal-item {
	background-color: #238153; 
}
</style>

<style type="text/css">
/* Persist the cal item color for .ms-acal.color4 (olive drab) */
.ms-acal-item {
	background-color: #767A54; 
}
</style>

<style type="text/css">
/* Persist the cal item color for .ms-acal.color5 (red) */
.ms-acal-item {
	background-color: #ed0033; 
}
</style>

<style type="text/css">
/* Persist the cal item color for .ms-acal.color6 (purple) */
.ms-acal-item {
	background-color: #69267C; 
}
</style>

<style type="text/css">
/* Persist the cal item color for .ms-acal.color7 (teal) */
.ms-acal-item {
	background-color: #006984; 
}
</style>

<style type="text/css">
/* Persist the cal item color for .ms-acal.color8 (dark green) */
.ms-acal-item {
	background-color: #13402a;
}
</style>

<style type="text/css">
/* Persist the cal item color for .ms-acal.color9 (brown) */
.ms-acal-item {
	background-color: #3b3c2b; 
}
</style>

What is this?

Eric Newel (https://www.linkedin.com/in/ecnewell/) at Soneridge Software (https://stoneridgesoftware.com/) presents a good solution for creating Office 365/SharePoint Online calendars with color-coded categories (https://stoneridgesoftware.com/creating-a-color-coded-calendar-in-sharepoint-online/).

The only drawback to Eric's solution is these color-coded calendars go back to their default colors when viewed individually. This is one more situation where the Script Editor web part, the Web Inspector, and a little CSS can fix some of SharePoint's UX misses. Above are snippets of CSS for each of the colors in the default O365/SPO theme.

How do I use this?

Follow Eric's tutorial and use the default Calendar view as your "Overlay" view. It's URL will end in something like this: /Lists/Events/calendar.aspx. That page will have all the overlays listed in the "Calendars in View" section, in the left-hand column. This page needs no modifications. Each of the calendar overlays should display in whatever theme color you assigned.

However, say you have a calendar overlay called Keynote Address. It's URL will end with this: /Lists/Events/Keynote%20Address.aspx. On that page, you'll need to insert a Script Editor web part. You will then edit that web part. While it's in edit mode, I recommend that you rename it CSS. Then click the Edit Snippet link and past in the appropriate CSS block from those listed above. You'll want the one that matches the color used in the Calendars view, of course.

Wow, thanks! That's helpful! How can I get in touch with you?

You're welcome. Glad to help. I hang my hat here: http://wheatdesign.com