<script type="text/javascript">
// Change these variables to suit your needs
var dateCols = ['Due Date','Date Completed']; // add Column Titles to the "dateCols" array to color code those columns
var green = 7; // tasks this many days out will be green
var blue = 3; // tasks that are this many days or more are blue
var red = 1; // tasks due in this many days are red
// end user variables
//
var tbls = document.getElementsByTagName("TABLE");
var col = new Array();
for (var t in tbls) {
if (tbls[t].className == "ms-listviewtable") {
var rows = tbls[t].childNodes[0].childNodes;
var hRow = rows[0].getElementsByTagName("TH");
for (i=0;i<hRow.length;i++) {
col[i] = (hRow[i].innerText || hRow[i].textContent) + "";
col[i] = col[i].replace(/\n/,"");
}
for (r=1;r<rows.length;r++) {
for (c=0;c<col.length;c++) {
for (d=0;d<dateCols.length;d++) {
if (col[c] == dateCols[d]) {
colorIt(rows[r].childNodes[c],green,blue,red);
}
}
}
}
}
}
//
function colorIt(x,green,blue,red) {
var strDate = x.innerText || x.textContent;
var today = new Date();
var dateDiff = ((Date.parse(strDate) - Date.parse(today)) / 86400000);
if (dateDiff > green) {
x.innerHTML = "<div style='color:green;'>"+x.innerHTML+"</div>";
} else if (dateDiff >= blue) {
x.innerHTML = "<div style='color:blue;'>"+x.innerHTML+"</div>";
} else if (dateDiff > red) {
x.innerHTML = "<div style='color:red;'>"+x.innerHTML+"</div>";
} else if (dateDiff <= red) {
x.innerHTML = "<div style='color:red;text-decoration:line-through;'>"+x.innerHTML+"</div>";
}
}
</script>
Friday, July 31, 2009
Color Coding Dates in SharePoint Lists - Part 2
Thanks to a comment from Jen on the Part 1 post, I've updated this code as well! This code is easier to work with and understand so it should be much easier to implement. As usual, you'll need to add the Content Editor Web Part to the bottom of the page and then add this code to the "Source Editor..." section:
Subscribe to:
Post Comments (Atom)


0 comments:
Post a Comment