Calendar Overlay - Colors 10+

Question

I am trying to add 14+ different colors into the stock Calendar application on SharePoint online. I am happy to work within the CSS to do this, but I want 14 different colors, I'd like to choose these colors, and I would like them to display just as they would in a regular color-coded calendar overlay.

What I need: 14> colors that I can preset to different categories using the Calendar overlay option within the SharePoint stock Calendar.

What I don't need: I know how to overlay, and I know about the 9 basic colors. I would also be open to learning how to change these 9 preset colors, but so far I have only found help for on-premise SharePoint servers, not SharePoint Online.

Answer 1

SharePoint does not allow you to have more than 10 overlays on a calendar, its hard coded that way. You can read more about that here if you like.

As far as changing the colors of the calendar overlay goes; you can modify that with CSS. The calendar overlays all have specific classes (e.g .ms-acal-color2. .ms-acal-selcolor2, .ms-acal-apanel-color2). These go from the default color all the way up to the 9th (.ms-acal-apanel-color9).

Here's an example that will adjust the first two colors:

.ms-acal-color2{
 BACKGROUND-COLOR: #DB504A
}

.ms-acal-selcolor2{
 BACKGROUND-COLOR: #DB504A
}

.ms-acal-apanel-color2{
 BORDER-COLOR: #C3B7AC; BACKGROUND-COLOR: #DB504A;
}
.ms-acal-color3{
 BACKGROUND-COLOR: #464655
}

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

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

Be aware this will not be represented in the UI when you pick the colors, only when you have them chosen and are viewing the calendar.

Here is a useful link with more detail related to the CSS around changing the colors.

Answer 2

I would color code each category for calendar because you can have more than 10 categories, also customized different colors. Check this link it works well for me :)

Hope this helps!