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



--------

3 comments:

  1. 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 = "";

    }

    return colour;
    }

    ReplyDelete
  2. Muhammad Sami AhmedMonday, 30 January, 2012

    nice post but there were few typo in your script which have been removed in the above code like if(colour ! "") etc..

    ReplyDelete
    Replies
    1. Thanks Muhammad I'll check the script again to help other get proper scripts

      Delete

Thanks for your valuable comments

Rate Now: