SharePoint: Color Coded Calendars!

Updated!
Note: If you got the Month view working and the Week and Day views did not then make sure that when you customized the view that you changed all three:

           Change the field used for the Month View Title AND Day View Title AND Week View Title to "CalendarText"

 

For the SharePoint 2010 version of this article click here!

To add “strike-out” for canceled events click here!

For color coding other SharePoint lists click here!

Can a calendar display in color?

I have been asked a few times if the SharePoint calendar can display items in color. It turns out this is not too hard to do. The basic steps are:

• Add a column to the calendar list to pick the color
  
• Add a calculated column to create the HTML to display the color. This can be done with HTML or CSS. This example uses "<FONT COLOR=".
  
• Add the new column to the view
  
• SharePoint will convert the "<" character into "&lt;" so we need to add a little JavaScript to convert it back. The easiest way to add the JavaScript is with a Content Editor Web Part
  

Sample:

1. Create or open a calendar
   
2. Add a new column named "Color" (Settings, List Settings) – most likely type will be "Choice" with choices like "Red, Green, Blue, Black", but this could be a lookup or a single line of text.
   (See here for an HTML color chart: http://www.w3schools.com/html/html_colornames.asp)
   
3. Add a new column named "CalendarText"
   
   1. Column Type is Calculated
      
   2. Equation is:
      ="<font color='" & Color & "'>" & Title & "</font>"
                  
   3. Data type returned = single line of text
      
4. Modify the existing view, or create a new view such as "Color Calendar"
   
   1. Change the field used for the Month View Title AND Day View Title AND Week View Title to "CalendarText"
                               
   2. Save and exit (The HTML for "<FONT" will now be displayed. Some JavaScript will be needed to fix the HTML tags)
      
5. Add a Content Editor web part
   
   1. Site Actions, Site Settings, Edit Page
      
   2. Add a Content Editor web part and move it below the calendar web part
      
   3. Click in the web part click Edit, Modify Shared Web Part
      
   4. Click Source Editor
      
6. Paste this JavaScript:
   
   

   <script type="text/javascript" language="javascript">
   var x = document.getElementsByTagName("TD")
   var i=0;
   for (i=0;i<x.length;i++)
   {
     if (x[i].className.substring(0,6)=="ms-cal")
     {
       x[i].innerHTML= x[i].innerHTML.replace(/&lt;/g,'<').replace(/&gt;/g,'>')
     }
   }
   </script> 
   
   

7. Click Save, OK, Exit Edit Mode
   
8. Add a new calendar item and select a color… Color calendars!
   

 

Some thoughts on changing the background color and not just the text color…

Just change the FONT tag to a SPAN tag and use a style. Example:

="<span style='background-color:"&Color&"'>"&Title&"</span>"

This works, but the background is for just the width of the text, not the entire table cell. The closest I’ve come is to hard code the width:

="<span style='width:120px;background-color:"&Color&"'>"&Title&"</span>"

This looks good in the Month view, but not so good in Week or Day views.

                             

You will probably want to use colors like lightblue, lightgreen, tomoto (light red would just be Pink!), etc.

.