New Colours for SharePoint calendar overlays

Question

I would like to change a couple of the 9 OOB colours for our SharePoint calendar overlays. I can do that by overriding the calendar CSS classes.

The parent calendar div does not get this class assigned as expected:

.ms-acal-color1

Instead it gets this class only:

.ms-acal-item

...which every overlay div has so i can't override the top one without explicitly defining each other class (.ms-acal-color1 - .ms-acal-color9)

Also, I'm not sure how to change the names in this drop down to match the new colours:

Answer 1

Currently changing the colors listed in the drop down box within one site theme is not available, both in SharePoint Online and SharePoint

.ms-acal-color# {
 BACKGROUND-COLOR: #xxxxxx
}
.ms-acal-selcolor# {
 BACKGROUND-COLOR: #xxxxxx
}
.ms-acal-apanel-color# {
 BORDER-COLOR: #xxxxxx;
 BACKGROUND-COLOR: #xxxxxx;
}

The above 3 classes of styles represent one color.So to change color you have to change above CSS

http://davidlozzi.com/2012/06/20/customize-the-sharepoint-calendar-colors/

Answer 2

Ok Can you just go to your color coded calendar.Edit that page and add HTML Form webpart and inside <style type=text\css></style>.Add following CSS

.ms-acal-color3{
 BACKGROUND-COLOR: #C0362C
}

.ms-acal-selcolor3{
 BACKGROUND-COLOR: #C0362C
}

.ms-acal-apanel-color3{
 BORDER-COLOR: #C3B7AC; BACKGROUND-COLOR: #C0362C;
}

.ms-acal-color4{
 BACKGROUND-COLOR: #816C5B
}

.ms-acal-selcolor4{
 BACKGROUND-COLOR: #816C5B
}

.ms-acal-apanel-color4{
 BORDER-COLOR: #C3B7AC; BACKGROUND-COLOR: #816C5B;
}

.ms-acal-color8{
 BACKGROUND-COLOR: #668D3C
}

.ms-acal-selcolor8{
 BACKGROUND-COLOR: #668D3C
}

.ms-acal-apanel-color8{
 BORDER-COLOR: #C3B7AC; BACKGROUND-COLOR: #668D3C;
}

.ms-acal-color9{
 BACKGROUND-COLOR: #007996
}

.ms-acal-selcolor9{
 BACKGROUND-COLOR: #007996
}

.ms-acal-apanel-color9{
 BORDER-COLOR: #C3B7AC; BACKGROUND-COLOR: #007996;
}

See if any changes are getting reflected

Answer 3

Here's the way you set it up, using color1 as an example:

.ms-acal-apanel-color1, 
.ms-acal-color1 {
    background-color: #f19d00; // Orange;
}

This will change it both in the "Calendars in view" section of the Quick Launch and on the calendar itself. It took a bit of experimenting with the Web Inspector to nail it down. You can deploy an entirely new color scheme by creating a similar class for each color.