Thursday, November 5, 2009

SharePoint Color Coded Calender


SharePoint calender can display the items in color and that too without creating any complicated code.

Steps are:
1.Create or open a calendar

2.Add a new column named "Color" (Settings, List Settings) – most likely type will be "Choice" with choices like "Red, Green, Blue, Black", but this could be a lookup or a single line of text.

3.Add a new column named "CalendarText"

type is Calculated

equation is
="<'font color='" & Color & "''>" & Title & "<'/font'>"

data type returned = single line of text

4.Modify the existing view, or create a new view such as "Color Calendar"

Change the field used for the month view to "Calendar Text"

Save and exit
5.Add a Content Editor web part

Site Actions, Site Settings, Edit Page

Add a Content Editor web part and move it below the calendar web part

Click in the web part click Edit, Modify Shared Web Part

Click Source Editor

6.Paste this JavaScript

<'script type="text/javascript" language="javascript"'>
var x = document.getElementsByTagName("TD")
var i=0;
for (i=0;i<'x.length;i++')
{
if (x[i].className.substring(0,6)=="ms-cal")
{
x[i].innerHTML= x[i].innerHTML.replace(/</g,'<').replace(/>/g,'>')
}
}
<'/script'>


7.Click Save, OK, Exit Edit Mode

8.Add a new calendar item and select a color.

Note: Remove every single quote written after < html tag.

No comments:

Post a Comment