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 Calendar Overlay Color Field Menu

1 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">
   background-color:lime !important;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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