I used the below CSS style to change the background color and text color of a calendar overlay.

<style type="text/css">
   background-color:Yellow !important;

.ms-acal-color9 a{color:#000!important;}
<style type="text/css">
   background-color:Yellow !important;

.ms-acal-apanel-color9 a span{color:#000!important;}

While the background color and text color change is working in the calendar view. But in left hand navigation, only background color change is working, text color change is not working.


From my blog: https://davidlozzi.com/2012/06/20/customize-the-sharepoint-calendar-colors/

To change the font color, add the following for each color number you want to change (#ffffff is white, you could use any color you want here as well.)

.ms-acal-color3 div, 
.ms-acal-color3 div a, 
.ms-acal-apanel-color3 SPAN 
   color: #ffffff !important
| improve this answer | |
  • This worked. :) – George Jun 13 '17 at 7:48
  • 1
    @George in case the above answer helped and solved your issue, please don't forget to Upvote and Mark the answer as accepted to close this question and to be helpful for the future visitors. Thanks! – Mohamed El-Qassas MVP Sep 6 '17 at 22:45
  • @M.Qassas Done. :) – George Sep 7 '17 at 6:42

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.