diff --git a/calendar/resources/content/calendar.js b/calendar/resources/content/calendar.js
index da3c3020bac5..aa9b1d004162 100644
--- a/calendar/resources/content/calendar.js
+++ b/calendar/resources/content/calendar.js
@@ -129,37 +129,6 @@ var calendarsToPublish = new Array();
 *  G L O B A L     C A L E N D A R      F U N C T I O N S
 */
 
-/**
- * This obsevers changes in calendar color prefs.
- * It removes all the style rules, and creates them
- * all again
- */
-
-var categoryPrefObserver =
-{
-   mCalendarStyleSheet: null,
-   observe: function(aSubject, aTopic, aPrefName)
-   {
-      var i;
-      for (i = 0; i < this.mCalendarStyleSheet.cssRules.length ; ++i) {
-        if (this.mCalendarStyleSheet.cssRules[i].selectorText.indexOf(".event-category-") == 0) {
-          dump(this.mCalendarStyleSheet.cssRules+" "+this.mCalendarStyleSheet.cssRules[i].selectorText+"\n");
-          this.mCalendarStyleSheet.deleteRule(i);
-          --i;
-        }
-      }
-
-      var categoryPrefBranch = prefService.getBranch("calendar.category.color.");
-      var prefCount = { value: 0 };
-      var prefArray = categoryPrefBranch.getChildList("", prefCount);
-      for (i = 0; i < prefArray.length; ++i) {
-         var prefName = prefArray[i];
-         var prefValue = categoryPrefBranch.getCharPref(prefName);
-         this.mCalendarStyleSheet.insertRule(".event-category-" + prefName + " { border-color: " + prefValue +" !important; }", 1);
-      }
-   }
-}
-
 /** 
 * Called from calendar.xul window onload.
 */
@@ -302,9 +271,7 @@ function calendarFinish()
    
    finishCalendarToDoUnifinder();
 
-   var pbi = prefService.getBranch("");
-   pbi = pbi.QueryInterface(Components.interfaces.nsIPrefBranch2);
-   pbi.removeObserver("calendar.category.color.", categoryPrefObserver);
+   finishCalendarManager();
 
    gCalendarWindow.close();
 
diff --git a/calendar/resources/content/calendarManagement.js b/calendar/resources/content/calendarManagement.js
index ba0387944a1f..9ff3d5119af5 100644
--- a/calendar/resources/content/calendarManagement.js
+++ b/calendar/resources/content/calendarManagement.js
@@ -82,6 +82,7 @@ var calCalendarManagerObserver = {
                 var colorCell = item.childNodes[1];
                 colorCell.style.background = aValue;
             }
+            updateStyleSheetForObject(aCalendar);
         } else if (aName == 'name') {
             if (item) {
                 var nameCell = item.childNodes[2];
@@ -92,6 +93,8 @@ var calCalendarManagerObserver = {
 
     onCalendarPrefDeleting: function(aCalendar, aName) {
         setCalendarManagerUI();
+        if (aName == 'color')
+            updateStyleSheetForObject(aCalendar);
     }
 };
 
@@ -222,6 +225,14 @@ function initCalendarManager()
     calMgr.addObserver(calCalendarManagerObserver);
     composite.addObserver(calCompositeCalendarObserver, 0);
     setCalendarManagerUI();
+    initColors();
+}
+
+function finishCalendarManager() {
+    // Remove the category color pref observer
+    var pbi = prefService.getBranch("");
+    pbi = pbi.QueryInterface(Components.interfaces.nsIPrefBranch2);
+    pbi.removeObserver("calendar.category.color.", categoryPrefObserver);
 }
 
 function getDefaultCalendar()
@@ -242,3 +253,98 @@ function reloadCalendars()
 {
     getDisplayComposite().refresh();
 }
+
+function getCalendarStyleSheet() {
+    var calStyleSheet = null;
+    for (var i = 0; i < document.styleSheets.length; i++) {
+        if (document.styleSheets[i].href.match(
+                /chrome.*\/skin.*\/calendar.css$/ )) {
+        calStyleSheet = document.styleSheets[i];
+        break;
+        }
+    }
+    return calStyleSheet;
+}
+
+function initColors() {
+    var calendars = getCalendarManager().getCalendars({});
+    for (var j in calendars) 
+        updateStyleSheetForObject(calendars[j]);
+
+    var categoryPrefBranch = prefService.getBranch("calendar.category.color.");
+    var prefArray = categoryPrefBranch.getChildList("", {});
+    for (var i = 0; i < prefArray.length; i++) 
+        updateStyleSheetForObject(prefArray[i]);
+   
+    // Setup css classes for category colors
+    var catergoryPrefBranch = prefService.getBranch("");
+    var pbi = catergoryPrefBranch.QueryInterface(
+        Components.interfaces.nsIPrefBranch2);
+    pbi.addObserver("calendar.category.color.", categoryPrefObserver, false);
+    categoryPrefObserver.observe(null, null, "");
+}
+
+function updateStyleSheetForObject(object) {
+    var calStyleSheet = getCalendarStyleSheet();
+    var name;
+    if (object.uri)
+        name = object.uri.spec;
+    else
+        name = object.replace(' ','_');
+
+    // Returns an equality selector for calendars (which have a uri), since an
+    // event can only belong to one calendar.  For categories, however, returns
+    // the ~= selector which matches anything in a space-separated list.
+    function selectorForObject(name)
+    {
+        if (object.uri)
+            return '*[item-calendar="' + name + '"]';
+        return '*[item-category~="' + name + '"]';
+    }
+    
+    function getRuleForObject(name)
+    {
+        for (var i = 0; i < calStyleSheet.cssRules.length; i++) {
+            var rule = calStyleSheet.cssRules[i];
+            if (rule.selectorText == selectorForObject(name))
+                return rule;
+        }
+        return null;
+    }
+    
+    var rule = getRuleForObject(name);
+    if (!rule) {
+        calStyleSheet.insertRule(selectorForObject(name) + ' { }',
+                                 calStyleSheet.cssRules.length);
+        rule = calStyleSheet.cssRules[calStyleSheet.cssRules.length-1];
+    }
+
+    var color;
+    if (object.uri) {
+        color = getCalendarManager().getCalendarPref(object, 'color');
+        rule.style.backgroundColor = color;
+        if (color)
+            rule.style.color = getContrastingTextColor(color);
+        return;
+    }
+    var categoryPrefBranch = prefService.getBranch("calendar.category.color.");
+    try {
+        color = categoryPrefBranch.getCharPref(object);
+    }
+    catch(ex) { return; }
+
+    rule.style.borderColor = color;
+    rule.style.borderWidth = "2px";
+}
+
+var categoryPrefObserver =
+{
+   observe: function(aSubject, aTopic, aPrefName)
+   {
+       var name = aPrefName;
+       // We only want the actual category name.  24 is the length of the 
+       // leading 'calendar.category.color.' term
+       name = name.substr(24, aPrefName.length - 24);
+       updateStyleSheetForObject(name);
+   }
+}
diff --git a/calendar/resources/content/calendarWindow.js b/calendar/resources/content/calendarWindow.js
index 8e584bf2e394..9f9797f346f9 100644
--- a/calendar/resources/content/calendarWindow.js
+++ b/calendar/resources/content/calendarWindow.js
@@ -726,22 +726,21 @@ CalendarView.prototype.createEventBox = function(aItemOccurrence, aInteralFuncti
 
 CalendarView.prototype.setEventboxClass = function calView_setEventboxClass(aEventBox, aEvent, aViewType)
 {
-   // XXX this isn't really const, of course; need to get it from prefs
-   const containerName = "default";
-
    // set the event box to be of class <aViewType>-event-class
    // and the appropriate calendar-color class
    var categoriesClassList = "";
-   if( aEvent.categories != null ) {
-      var categoriesList = aEvent.categories.split(",");
+   if( aEvent.getProperty("CATEGORIES") != null ) {
+      var categoriesList = aEvent.getProperty("CATEGORIES").split(",");
       for ( var i=0; i<categoriesList.length; ++i ) {
          // Remove illegal chars.
-         categoriesList[i].replace( /[ -_.*?"']/g, "" );
+         categoriesList[i] = categoriesList[i].replace(' ','_');
 
-         categoriesClassList = categoriesClassList + "event-category-" + categoriesList[i].toLowerCase();
+         categoriesClassList = categoriesClassList + categoriesList[i].toLowerCase();
       }
    }
-   aEventBox.setAttribute("class", aViewType + "-event-class " + containerName + " " + categoriesClassList);
+   aEventBox.setAttribute("class", aViewType + "-event-class ");
+   aEventBox.setAttribute("item-calendar", aEvent.calendar.uri.spec);
+   aEventBox.setAttribute("item-category", categoriesClassList);
 }
 
 /** PRIVATE