In a previous post I titled “SharePoint – Color Coding Your Calendar by Category (Tutorial)” I give a tutorial on how to create a SharePoint Event Calendar that has multiple calendar overlays by category/color. This tutorial takes this concept further by allowing you to choose your own colors, because let’s be honest here, the colors SharePoint has to offer aren’t that great and do not always fit into your color scheme.

  1. Navigate to your Calendar page in SharePoint
  2. Go to Site Actions -> Edit Page
    Site Actions - Edit Page
  3. Click on the Add a Web Part link
  4. Select the HTML Form Web Part under the Forms category and click the Add button

Add A Web Part

  1. On the right-hand side of your HTML Form Web Part click on the down arrow and then click Edit Web Part.
    Edit Web Part
  2. In the HTML Form Web Part Edit box click on Source Editor…
    Form Content - Source Editor
  3. Remove any preexisting code and enter in CSS style tags:

  1. Decide on what colors you would like. You will need the hexadecimal value, using a design program on your computer or a color picker.
  2. Add your colors to the CSS classes between your style tags. Here are the classes you will be editing. The # represents numbers 1-9 of the classes you have available to edit and XXXXXX represents the hexadecimal number that you want your color to be.

  1. Once you have added your CSS classes in the Source Editor, click the OK button. Click the Stop Editing button on the top left-hand side of your screen when you are finished. Since I picked darker colors I also ended up changing the color of the text links so that they were easier to read. See my example below.

Here is the final result of my SharePoint Calendar with custom colors:

SharePoint Calendar With Custom Colors

Like this post? Share it!