Calendar Overlay Color Menu

Question

I have a SPO calendar with multiple calendar overlays and used a separate CSS for the overlay colors. However, the default overlay colors, in the Color field drop-down menu, do not match the colors in the CSS file. Is there a way to change the menu options in the Calendar Overlay settings Color field? A screenshot is below. Many thanks!

PLove

Answer 1

The menu options in the Calendar Overlay settings section is based on the look of your site. When you go to site settings-> change the look to change your site look, the menu options will also be changed.

You don't have to change the menu options, you could choose a color then override it with customized css in the page.

The colors are controlled by the css classes ms-acal-color1 to ms-acal-color9.

You can override to the style as below, then add the style into a content editor web part in the calendar view.

<style type="text/css">
.ms-acal-color1{
   background-color:lime !important;
}
</style>