1

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.

  • Try here: planetwilson.co.uk/sharepoint-2013-colour-calendar-v2/… am not sure if it works online, but none of the configuration would require touching server. – David Jenkins Mar 24 '16 at 18:02
  • This link went to a blank page unfortunately... – Rhettmartens Mar 24 '16 at 18:07
  • I can't help either, but I came across it this week. This guy might be able to help. He seems to do everything by code on page. He offers consulting by the hour. -No disclaimer needed, I'm not him and I don't know him, or have an business with him. blog.pathtosharepoint.com – Jammin4CO Mar 24 '16 at 18:08
  • Does it allow you to overlay that many calendars? I've overwritten the preset colors before, but they rely on the classes labeled 1 through 9. – Erin L Mar 24 '16 at 18:52
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.

0

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.