add color coding to your SharePoint 2007 calendar in 15 minutes

Environment: SharePoint 2007 – wss or MOSS (no SharePoint Designer or third party application required).
Audience: confirmed end user, power user.
Permission level: design or full control.
Estimated time: 15 minutes.
0- Before you start
1- Select your colors (5 minutes)
2- Create your calculated columns (3 minutes)
3- Set up your calendar view (2 minutes)
4- Render the colors (5 minutes)
5- If you want to undo your changes
0- Before you start
To follow this tutorial, you need a calendar created in SharePoint 2007 (wss or MOSS).

 In my example, taken from Mark Miller’s community calendar, items are organized in categories:
- Online Event
- Online Workshop
- Training
- Conference
- User Group
- SharePoint Saturday
- Other
I have created a choice column, called “Category”, to store these choices. Note that for this tutorial seven is the maximum number of choices. If your choice column has more options, only the first seven will be color coded.
A choice column is the natural option to organize items in categories. You can also use any column type that contains text or numbers, like content type, text column, calculated column. Note that columns of type Lookup will not work for this tutorial.
Usability tip: People can distinguish up to ten different colors that are assigned to different categories, but it may be safer to use no more than five different colors for category coding. (source: rightpoint)
Ready? Let’s see if we can get our color coded calendar in less than 15 minutes…
1- Select your colors (5 minutes)

To choose your colors, simply fill out this online form. In my example:
- choice column: Category
- choices: paste here the choices from the choice column
- display: Title (the event title will be displayed on the calendar)
- keep the default value for the other options (except if you are on a non-English SharePoint farm)
- Use the color pickers to select your colors for each choice

Note: the semi-transparent background will not be rendered in older browsers (like IE 6). 

After selecting your options, scroll down to the bottom of the form. You’ll see two formulas (pale-green text areas). Leave this page open or save your two formulas, we’ll use them in the next step.

Note: you can choose to group the two formulas into one by unchecking the “Separate Color Column” checkbox.

While we are on this page, let’s grab the script that we’ll use later for the rendering:
- click on the Download tab.
- right-click on the last file name TextToHTMLlite-v2.1.1.txt, and select “save target as…” to save it to your computer.
- upload the file to a SharePoint library in your site or site collection. The location doesn’t matter, as long as your users have read access to the file.

Note! the download section displays 4 files; pick the last one for this tutorial.

2- Create your calculated columns
On your calendar page, select:
List > List Settings
On the List Settings page, create two calculated columns (use the “Create column” option for this):
- First column, named “Color”: paste the first formula.
- Second column: named “Display”: paste the second formula.
3- Set up your calendar view
Staying on the settings page, under Views, click on your calendar view. In the settings page, choose to display the “Display” column. Save your changes.
 
Now, go back to your calendar view, and you should get an ugly result like this:

Don’t worry, we are going to fix this in step 4.
4- Render the colors
We can now use the script we grabbed in step 1:
- go to your calendar view, and switch the Web page to edit mode:
Site Actions > Edit Page
- Click on “Add a Web Part”, and add a Content Editor Web Part to the page
- drag and drop the calendar view above the Content Editor Web Part (the order is important)
- in the Content Editor Web Part, click on “open the tool pane”
- under content link, paste the URL of your TextToHTMLlite-v2.1.1.txt file (remember, you stored it in a document library in step 1).
If you now exit the edit mode, you should see your calendar in color.
5- If you want to undo your changes
A key advantage of this technique is that all our customizations were made through the SharePoint UI and can easily be undone. If later you want to revert to the initial view:
- remove the Content Editor Web Part from the page
- go to the view settings page and replace Display with Title as the displayed column.
- delete the two calculated columns.