0

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> 

2 Answers 2

0

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.