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
6- A note for SharePoint 2010 users
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))
If your choice list includes more than seven choices, this follow up article will show you how to proceed.
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.
6- A note for SharePoint 2010 users
In SharePoint 2010, the script from step 4 will not work because calendars are rendered asynchronously. Alternate options can be found in this post.
Updates [09/08/2010]:
– Links now point to the new location for the SharePoint User’s Toolkit
– Link to follow up article for more than seven choices
– Note for SP 2010 users
Update [12/06/2010]:
Brendan Newell published an article based on this tutorial, with a couple additional tips. For example, here is the style in SharePoint 2010 to remove the default background from the event:
<style type="text/css">
.ms-acal-selected, .ms-acal-item {
background:none;border:0px;
}
</style>
The article also mentions a resizing issue, which AFAIK is linked to the default calendar, not to color coding.
Check out Brendan’s article for more information!
Several months back I was tasked with a training build for our highest turnover position. The main function of the job was a 7 screen registration process, and because of government regulation and business requirements, every field on these 7 screens needed thorough instructions. The information I was to work from was half a paper ream thick as hard copy! First step was a severe edit of the information and then solid structuring to make it useable to staff. My thoughts went right to 
Path to SharePoint... and Beyond! 
