Screencast: Color Code a SharePoint Calendar – The PayRoll Schedule

In a previous article, Jim Bob Howard documented how he created a No Assembly Solution to create a color coded SharePoint calendar for his payroll schedule. This screencast is a followup to that article, showing the steps and techniques he used for creating the calendar.

Nicely done, Jim Bob. Thanks.
Mark

Sure, go ahead and embed this on your site!

View all entries in this series: JimBobHoward-ColorCodedCalendar»

Entries in this series:

SharePoint Color Coded Calendar - The PayRoll Schedule
Screencast: Color Code a SharePoint Calendar - The PayRoll Schedule
7 Minute Screencast: Color code a SharePoint Calendar - Update
Color-coded SharePoint Calendar with Lookup DateTypes
Update: SharePoint Color Coded Calendar – PayRoll Schedule

I recommend SharePoint resources daily on my twitter account here.

Posted by Jim Bob Howard on Friday, April 17, 2009 at 12:05 pm
Filed under Jim Bob Howard · Tagged with calendar, color code, Payroll, Screencast, sharepoint

Please Join the Discussion

8 Responses to “Screencast: Color Code a SharePoint Calendar – The PayRoll Schedule”

Sahan says:

January 12, 2010 at 7:44 pm

I did everything as said in the tutorial . But when I come to the content editor (Modified Shared Webpart) I can not see the content editor insted i see the list view . Wats the fix for this?

Thanks
Sahan

Sahan says:

January 12, 2010 at 9:11 pm

Hi I managed to get through the code. It works but there is no background color coming up. Its a white box with red boarder and red text . There is no fill color in the box. Can uyou help me with this the code i used is as below

color
=CHOOSE(FIND(”L”,LeaveType,1),,,,,”#800080″,,”#008000″)

BgColor
=CHOOSE(FIND(”L”,LeaveType,1),,,,,”#ccffcc”,,”#ffcccc”)

Display
=”"&LeaveType&”;”

//
// Text to HTML
// Feedback and questions: [email protected]
//
var theTDs = document.getElementsByTagName("TD");
var i=0;
var TDContent = " ";
while (i &lt; theTDs.length) {
try {
TDContent = theTDs[i].innerText || theTDs[i].textContent;
if ((TDContent.indexOf(&quot;&lt;DIV&quot;) == 0) &amp;&amp; (TDContent.indexOf(&quot;") &gt;= 0)) {
theTDs[i].innerHTML = TDContent;
}
}
catch(err){}
i=i+1;
}
//
// ExpGroupRenderData overwrites the default SharePoint function
// This part is needed for collapsed groupings
//
function ExpGroupRenderData(htmlToRender, groupName, isLoaded) {
var tbody=document.getElementById("tbod"+groupName+"_");
var wrapDiv=document.createElement("DIV");
wrapDiv.innerHTML=""+htmlToRender+"";
var theTBODYTDs = wrapDiv.getElementsByTagName("TD"); var j=0; var TDContent = " ";
while (j &lt; theTBODYTDs.length) {
try {
TDContent = theTBODYTDs[j].innerText || theTBODYTDs[j].textContent;
if ((TDContent.indexOf(&quot;&lt;DIV&quot;) == 0) &amp;&amp; (TDContent.indexOf(&quot;") &gt;= 0)) {
theTBODYTDs[j].innerHTML = TDContent;
}
}
catch(err){}
j=j+1;
}
tbody.parentNode.replaceChild(wrapDiv.firstChild.firstChild,tbody);
}

Jim Bob Howard says:

January 13, 2010 at 9:51 am

Sahan,

What are your LeaveType choices?

Blessings,
Jim Bob
Tony Caballero says:

February 17, 2010 at 4:54 am

Hi Jim Bob,

I have followed your screencast and created a calendar as per your instructions.
All seems OK except that the colors dont display in the calendar. When I look at the items in list view, all the properties are corrdct (DateType, Color, BGColor, DateChioce) and the Display item has the correct HTML DIV code.
I guess the problem is with the script for the Content Editor Web Part:

—————————————————
This is what I have entered:
```
//
// Text to HTML - Calendar views
// Questions and comments: [email protected]
//
var theAs = document.getElementsByTagName("a");
var i=0;
var AContent = "";
while (i &lt; theAs.length)
{
try
{
AContent = theAs[i].innerText || theAs[i].textContent;
if ((AContent.indexOf(&quot;= 0) &amp;&amp; (AContent.indexOf("") &gt;= 0)) {
theAs[i].innerHTML = AContent;
}
}
catch(err){}
i=i+1;
}
```
——————————–

Any ideas on what I am doing wrong?
I would love to be able to use this color code calendar in my intranet…

Thanks in advance.
Tony Caballero says:

February 17, 2010 at 2:57 pm

Please ignore my precious request.
I have found the latest script and that does work in my case.
Thanks

Tony Caballero