Before start this post I am thanking to the blog planetwilson because I found the color coded calendar article from there this is a modified version from there.
Step 1. Create a calendar list in your sharepoint server
Step 2. Create a column name Category type--> choice
3. Create a calculated column
 | ||
| Add caption |
Step 5: Add an Content Editor Webpart under the Calendar Control
Step 6: Paste the following code
<script>
var SEPARATOR = "|||";
var nodes, category;
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(category);
if(colourinfo.bg != "")
{
var temp= foundNode.parentNode;
temp=temp.parentNode;
temp=temp.parentNode;
temp.parentNode.style.background = 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 "appointment":
colour.bg = "#ffd266";
colour.fg = "";
break;
case "birthday":
colour.bg = "#ae99dc";
colour.fg = "";
break;
case "business":
colour.bg = "#8aabe0";
colour.fg = "";
break;
case "important":
colour.bg = "#e77379";
colour.fg = "";
break;
case "vacation":
colour.bg = "#fffa91";
colour.fg = "";
break;
default:
{
colour.bg = "";
colour.fg = "";
}
}
return colour;
}
</script>
Step 5: Exit the edit mode Happy Coding
.gif)
Important: