Color coded calendar 2007 versus 2013

Question

I have a calendar color coded in SP 2007. Its working good. I used the same code in SP 2013, but it doesn't work there. Any Suggestions?

<script language="javascript" type="text/javascript">  
 var SEPARATOR = "|||";  
 var nodes, Group;  
 nodes = document.getElementsByTagName("a");  
 function getObjInnerText (obj)  
 {  
   return (obj.innerText) ? obj.innerText : (obj.textContent) ? obj.textContent : "";  
 }   
 for(var i = 0; i < nodes.length; i++)  
 {  
   if(getObjInnerText(nodes[i]).indexOf(SEPARATOR) != -1)  
   {  
     UpdatecalendarEntryText(nodes[i]);  
     var foundNode = nodes[i];  
     var trap = 0;  
     while(foundNode.nodeName.toLowerCase() != "td")  
     {  
       foundNode = foundNode.parentNode;  
       trap++;  
       if(trap > 10)  
       {  
         break; // don't want to end up in a loop  
       }  
     }  
     var colourinfo = GetcalendarColourInfo(Group);  
     if(colourinfo.bg != "")  
     {  
       foundNode.style.background = colourinfo.bg;  
     }  
     // try and update the text colour if we can TD/A/NOBR/B/#text  
     if(colourinfo.fg != "")  
     {  
       try  
       {  
         // there should only be one anchor tag  
         childNodes = foundNode.all;  
         for(var j = 0; j < childNodes.length; j++)  
         {  
           if(childNodes[j].nodeName.toLowerCase() == "a")  
           {  
             // found anchor tag  
             childNodes[j].style.color = colourinfo.fg;  
             // set the NOBR tag as well to set the time if it is shown, but set it on the B tag for month view  
             if(childNodes[j].children[0].nodeName.toLowerCase() == "nobr")  
             {  // month view has an extra b tag surrounding the text  
               childNodes[j].children[0].style.color = colourinfo.fg;  
               if(childNodes[j].children[0].children[0].nodeName.toLowerCase() == "b")  
               {  
                 childNodes[j].children[0].children[0].style.color = colourinfo.fg;  
               }  
             }  
             break;  
           }  
         }  
       }  
       catch(e) {}  
     }  
   }  
 }  
 function ColourInfo(bg, fg)  
 {  
   this.bg = bg;  
   this.fg = fg;  
 }  
 function UpdateCalendarEntryText(anchorNode)  
 {  
   var children = anchorNode.childNodes;  
   for(var i = 0; i < children.length; i++)  
   {  
     if(children[i].nodeType == 3 && children[i].nodeValue.indexOf(SEPARATOR) != -1)  
     {  
       var parts = children[i].nodeValue.split(SEPARATOR);  
       category = parts[0];  
       children[i].nodeValue = parts[1];      
     }  
     else  
       UpdateCalendarEntryText(children[i]);  
   }  
 }  
 function GetCalendarColourInfo(desc)  
 {  
   var colour = new ColourInfo("", "");  
   var trimmed = desc.replace(/^\s+|\s+$/g, '') ;  
   switch(trimmed.toLowerCase())  
   {  
     case "Business Visit":  
           colour.bg = "#f0e109";  
           colour.fg = "";  
           break;   
     case "Flex":  
           colour.bg = "#19f009";  
           colour.fg = "";  
           break;   
     case "Out Of Office":  
           colour.bg = "#25add6";  
           colour.fg = "";  
           break;              
     case "Holiday":  
           colour.bg = "#d67d25";  
           colour.fg = "";  
           break; 
     case "Other":  
           colour.bg = "#8467d7";  
           colour.fg = "";  
           break;  
     default:  
     {  
       colour.bg = "";  
       colour.fg = "";  
     }  
   }  
   return colour;  
 }  
 </script> 

Answer 1

I have used this site's documentation to color code 2013 calendars: http://www.planetwilson.co.uk/sharepoint-2013-colour-calendar-v2/

It is a simple solution that utilizes some of the same coding concepts as your solution.

I even exported a color calendar template for others to use that cuts out most of the technical work.

Answer 2

I recommend using calendar overlays for colors, and then you can use some CSS to change those colors to what you want. Write up on http://davidlozzi.com/color-code-sharepoint-calendar/

For the CSS a sample looks like:

.ms-acal-color# {
 BACKGROUND-COLOR: #xxxxxx
}
.ms-acal-selcolor# {
 BACKGROUND-COLOR: #xxxxxx
}
.ms-acal-apanel-color# {
 BORDER-COLOR: #xxxxxx;
 BACKGROUND-COLOR: #xxxxxx;
}

Where # is the number of the color you're replacing.