SharePoint Calendar Colors with JavaScript

How to add color coded categories to your calendars with JavaScript:

Caveats:

This solution uses Calculated Fields to display colors related to a particular category. The Category column MUST be a choice column - a lookup column will not work as look-up columns are NOT allowed in Calculated Field Column equations.
You must be able to add a Content Editor Web Part to the pages where the calendar will be viewed.

Part 1: Setting up the JavaScript:

1. Copy the following script into a text file:

   <script>
   _spBodyOnLoadFunctionNames.push('colorCalendarEventLinkIntercept');
   
   function colorCalendarEventLinkIntercept()
   {
     if (SP.UI.ApplicationPages.CalendarNotify.$4a)
     {
       var OldCalendarNotify =
   SP.UI.ApplicationPages.CalendarNotify.$4a;
       SP.UI.ApplicationPages.CalendarNotify.$4a = function ()
         {
           OldCalendarNotify();
           colorCalendarEventLinks();
         }
     }
     if (SP.UI.ApplicationPages.CalendarNotify.$4b)
     {
       var OldCalendarNotify =
   SP.UI.ApplicationPages.CalendarNotify.$4b;
       SP.UI.ApplicationPages.CalendarNotify.$4b = function ()
         {
           OldCalendarNotify();
           colorCalendarEventLinks();
         }
     }
     // future service pack change may go here!
     // if (SP.UI.ApplicationPages.CalendarNotify.???)
   }
   
   function colorCalendarEventLinks()
   {
   
     var divs = document.getElementsByTagName("DIV");
     for (var i=0;i');
       }
       if (divs[i].className.toLowerCase()=="ms-acal-ctrlitem")
       {
         var links = divs[i].getElementsByTagName("A");
         if (links.length==1)
         {
           links[0].href="javascript:colorCalendarEventLinks();void(0);"
         }
       }
     }
   }
   <script>
   

2. Save the text file to a documents folder on the sharepoint site where you intend to modify the calendar. Make sure it's a folder your customer will have rights to view.
3. Copy the URL for the text file you uploaded to notepad - you will need to reference this URL later in part 4.

Part 2: Setting Up the Calendar Colors:

1. Go to this the COLOR-CODING-CALENDAR-LIST site: http://usermanagedsolutions.com/SharePoint-User-Toolkit/Pages/Color-Coding-Calendar-List.aspx
2. Enter the name of your Category column in the "Choice Column" field
3. Enter your Categories in the "Choices" field
4. Enter the name of the column that will be displaying the Calendar Appointment Title text in the "Displayed Column" (usually "Title" or "Name")
5. Decide how you want the color coding displayed - you can apply it to the text, the background, or the text and the background. If you have any CSS skills you can modify this later.
6. Leave the rest of the options as is for now and skip down to where the colors are displayed. You'll notice that the category choices you entered in step 3 are displayed here. Use the color pickers to select the colors you want displayed for each category.

Part 3: Setting up the Calendar:

1. In another TAB or WINDOW, open the Calendar you want to apply the color coding to.
2. Open the LIST SETTINGS for the Calendar
3. Create a NEW Column
4. Name the Column "Color", and set it to "Calculated (calculation based on other columns)"
5. Open the TAB or WINDOW with the COLOR-CODING-CALENDAR-LIST site.
6. Copy the code from the GREEN box under the "Paste the following formula in the Color calculated column:" text.
7. Now open the TAB or WINDOW with your New Calendar Column, and paste the code into the "Formula" box.
8. Click OK.
9. Create another NEW Column
10. Name the Column "Category-Text", and set it to "Calculated (calculation based on other columns)"
11. Open the TAB or WINDOW with the COLOR-CODING-CALENDAR-LIST site.
12. Copy the code from the GREEN box under the "Paste the following formula in the calculated column that will be displayed in the list or calendar:" text.
13. Now open the TAB or WINDOW with your New Calendar Column, and paste the code into the "Formula" box.
14. Click OK.

Part 4: Fixing the View

1. In the LIST Settings, under "Views", click the "Create View" link.
2. Choose the Calendar View type.
3. Name the View (e.g. "Calendar-Colors")
4. Under "Calendar Columns", set the "Month View Title:" "Week View Title:" and "Day View Title" to the "Category-Text" column.
5. Click OK
6. Make sure you are looking at the new view ("Calendar-Colors" or whatever you named it). You will see tags littering the days where you have appointments set.
7. EDIT the PAGE (Site Actions > Edit Page)
8. Add a Content Editor Web Part
9. Click the little dropdown to "EDIT WEB PART".
10. In the Content Link Box where it says "To link to a text file, type a URL." Paste the URL to the text file you uploaded in Part 1.
11. Under Appearance, Set the Chrome Type to "None".
12. Click OK

The little tag should have disappeared, and you should be seeing your appointments displaying the colors you specified based on their categories.

508 Compliance:

Make sure to provide additional views for people to view your items by category. Additionally you could modify the tags that you paste into the "Category-Text" column to include a "Title" attribute that displays the Category column.

References:

http://usermanagedsolutions.com/SharePoint-User-Toolkit/Pages/Color-Coding-Calendar-List.aspx
http://techtrainingnotes.blogspot.com/2010/06/sharepoint-2010-color-coded-calendars.html
http://www.orbitone.com/en/blog/archive/2010/10/25/calendar-colour-coding-in-sharepoint.aspx