Change default calendar color RRS feed

  • Question

  • Either I am blind (which is possible) or there is no simple way to change the color of my calendar.. it defaults to the color of the navigation menu, which is horrible.

    First of all it would seem to me it would be common sense to have a simple color chooser in the properties for the calendar... but there is not one. At least I have not seen it in either the sharepoint online editor or in sharepoint designer...

    Can someone please teach me how to do this ? (and be thorough - implying I know where a file is would be a mistake).

    I appreciate your help (please again detailed instructions) I searched for instructions here but did not get much out of them (many people imply too much.. I dont know where the css files etc are located!?)

    I am NOT wanting to color code my calendar, just the color of the calendar as a whole.


    • Edited by pfrank1 Thursday, October 20, 2011 10:01 PM
    Thursday, October 20, 2011 10:00 PM


All replies

  • I have added content editor web parts to my calendar pages and then added my CSS to change the size and color of the calendar.  Here is a link to my blog which shows changing the calendar in this way.


    Notice I have changed the size of the days and moved it to the far right of the page.  Its about half the size before, the adding of the css.  If you look in the my library called docs it has a file in there called calstyle.css which I used to change the size of the calendar. Here is a link to that.


    You can this to the page using the content editor web part.  This web part can be added to any page by clicking 'Site Actions' .... then clicking 'Edit page'. Now if you are already in the list you will see the 'Add web part' link apear, if not click your mouse on the spot which you want it to appear and then click, the insert tab above your page.  You should then see the 'web part' icon on the ribbon.  When you click the web part button, the ribbon will expand down and categories will appear on the left.  Click the 'Media and COntent' category. To the right of this area you will see COntent Editor, add this to the page.  When the web part is added you can modify the web part by mousing over the name of the web part and click the drop down arrow to the right of its name.  THen click 'Edit web part'.  Now a config panel will appear to the right of you page (you may need to scroll over to the right).  YOu will see a field called 'Content link' which you can add the to your CSS file.  Or just change the one I showed you as a sample and add the color of your choice.

    Good luck,


    blog www.sharepoint2010now.com



    Gary Newman MCSE, MCT, CCNA MCDBA, MCAD, MCSA MCTS SharePoint 2007 Dev & Admin MCPD SharePoint 2010 Development My Blog www.sharepoint2010now.com
    Thursday, October 20, 2011 10:11 PM
  • thanks for your help, but, although your method works well for resizing / positioning the calendar, it does not change any of the calendars colors (for example, the cells where the day of the month is.. 1, 2, 3, 4, etc...  and the cells that are shaded out because they are not part of the current month...) considering I don't know how to call out these to change them... I have tried messing with the code you have and it works nice for sizing and the days of the week settings, all others don't work.


     any other ideas? Is there a setting I need to change or maybe I need to use something like .ms-acal-color?? or something like that (I don't know what the parts are called to call them out and change them.) is there a way I can find those so I can do this myself?


    I really do appreciate your help.



    Monday, October 24, 2011 5:33 PM
    • Edited by GuYuming Wednesday, October 26, 2011 9:50 AM
    • Marked as answer by GuYuming Friday, October 28, 2011 6:09 AM
    Wednesday, October 26, 2011 9:46 AM