Color Coding Dates in SharePoint Lists

UPDATE!!! - 10:00am, 31 August 2009

This code has been updated!!!
Link here.

UPDATE!!! - 9:45am, 21 October 2008

After reviewing the code, Christophe pointed out a couple flaws that slipped past me. In it's previous version, the code only worked on dates with two-digit months and it was applied to all date strings in the view.

I plugged away at it for a bit and believe I've fixed these bugs and I've updated the original code. In order to make this new code work, you'll need to tell it how many date columns you have on your page and which ones you want to apply the color coding to.

var intNumDateCols = 3; - this is indexed at zero, so the page that this code is on has 4 date columns.

var aryDateCols = [0, 1, 3] - this array holds the column number for the columns you want to have the color coding applied to. It is also indexed at 0, so using the 4 columns from before, this will apply coloring to the first, second, and fourth columns.

-end update-

I thought I'd start of Monday by sharing another little triumph from last week. Most of the work that I've been doing has been to customize and modify SharePoint calender views, but sometimes, my users want to look at a list of items. When they do, they still want to be able to quickly and easily identify items in the list so the task falls to me to make it easy for them.

Here's how it works:

The Challenge: Color code dates in a list based on a date calculation from today. If the event is more than 7 days out, make it green. If it's between 7 and 3, make it blue. If it's between 2 and 0, make it red. If it's expired, make it red and draw a line through it.

The Problem: SharePoint doesn't provide an integrated method for color coding events in a list. You can use filters, but it's not always the solution people want.

The Solution: As with most of my SharePoint solutions, Javascript answers this problem. Unlike my previous example, this one is much cleaner and easier to put together. All you should have to change to customize it to your site is to change the day ranges and the CSS style if you don't like mine. Here's the code:

 <script type="text/javascript">
var theNOBRs = document.getElementsByTagName("NOBR");
var n=0, d=0, dateDiff=0, intCurCol=0, today = new Date(), strDate = "";

var intNumDateCols = 1;   // using index 0, enter the number of date columns you have visible
var aryDateCols = [0];  // using index 0, enter column index for each column you want to color
// in this example there are two columns on the page with date
// values and only the first column would have color coding applied
var green = 7;    // dates that are this many days or more from today are colored green
var blue = 3;    // same but blue, this is kind of a warning period
var red = 0;     // these dates are TODAY!

while (n < theNOBRs.length)
{
strDate = theNOBRs[n].innerText || theNOBRs[n].textContent;
if (strDate.split("/").length == 3)
{
while (d < aryDateCols.length)
{
if (aryDateCols[d] == intCurCol)
{
 dateDiff = ((Date.parse(strDate) - Date.parse(today)) / 86400000);
 if (dateDiff > green)
 { theNOBRs[n].innerHTML = ("<div style='color:green'>" + theNOBRs[n].innerHTML + "</div>");
 }
 else if (dateDiff >= blue)
 { theNOBRs[n].innerHTML = ("<div style='color:blue'>" + theNOBRs[n].innerHTML + "</div>");
 }
 else if (dateDiff > red)
 { theNOBRs[n].innerHTML = ("<div style='color:red'>" + theNOBRs[n].innerHTML + "</div>");
 }
 else
 { theNOBRs[n].innerHTML = ("<div style='color:red'><s>" + theNOBRs[n].innerHTML + "</s></div>");
 }
}
d += 1;
}
d=0;
if (intCurCol < intNumDateCols) { intCurCol += 1; }
else if (intCurCol >= intNumDateCols) { intCurCol = 0; }
}
n += 1;
}
</script>

Putting this code into a Content Editor Web Part after the list should make the color coding work. As always, I'm happy to help you customize this to your specific site, just let me know.