22 December 2009

Implementing Color Events in SharePoint Calendar

Hi,

I have color coded event implemented in SharePoint calendar using simple steps and without coding.
All I have done is created a calculated field with input color segment column and a script to include this selected color.

1. Create a Choice type Field named Color .




2. Add the needed colors
3. Create a calculated field name Calendar text Insert formula :

=Color&"|||"&Title

4. Add a CEWP(Content Editor WebPart)

<script language="JavaScript">


var SEPARATOR = "|||";
var nodes, category;
nodes = document.getElementsByTagName("a");

for(var i = 0; i < nodes.length; i++)
{
if(nodes[i].innerText.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 colour = GetCalendarColour(category);

if(colour ! "")
foundNode.style.background = colour;
}
}

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 GetCalendarColour(desc)
{
var colour;

switch(desc.toLowerCase())
{

case "red":
colour = "#ff0000";
break;


case "blue":
colour = "#0000ff";
break;


case "yellow":
colour = "#ffff00";
break;


case "green":
colour = "#008000";
break;

case "orange":
colour = "#ff8040";
break;

default:
colour = "";

}
nbsp;
return colour;
}

</script>


Bingo



--------

Rate Now: