Some readers have tried to combine in a same list the “HTML calculated column” and the countdown proposed by Alexander Bautz.

Unfortunately just putting the two scripts side by side in a CEWP doesn’t work for collapsed views: the scripts overwrite each other, as Alexander reused my method for his script.

So here is a quick fix – I have combined both scripts in one and removed the overlapping parts:

<script type="text/javascript">
<!--                                                                                      -->
<!-- COUNTDOWN + HTML CALCULATED COLUMN                                                   -->
<!--                                                                                      -->
<!-- The first part of this script was created by Alexander Bautz                         -->
<!-- Inspired by Christophe@PathToSharePoint.com                                          -->
<!-- This script searches for calculated fields that are "marked" vith "Due:" and         -->
<!-- select them if they are less than today's date, or less than the "offset" as         -->
<!-- specified in the configuration in the top of the script                              -->

<!-- Create a calculated field in the list with the following formula:                    -->
<!-- =IF(DueDate="","N/A","Due: "&MONTH(DueDate)&"/"&DAY(DueDate)&"/"&YEAR(DueDate))      -->

<!-- The data type returned from this formula is: Date and Time                           -->
<!-- The reason for returning Date and Time is that the date fields                       -->
<!-- displays in <nobr> tags and therefore easier to search for because                   -->
<!-- there are fewer <nobr> tags than <td> tags                                           -->

<!-- ************************************************** -->
<!-- ***************  Change these ******************** -->
<!-- ***  yDaysOffset are the offset "Yellow Light" *** -->
<!-- ***  rDaysOffset are the offset "Red Light"    *** -->
<!-- ************************************************** -->

var yDaysOffset = 5;
var rDaysOffset = 0; 

<!-- plus or minus on todaysDate:                     -->
<!-- minus marks the date x days after                -->
<!-- plus marks the date x days before                -->

<!-- ************************************************ -->
<!-- **** Do not change anything below this line **** -->
<!-- ************************************************ -->

function findDatefields() {
// Find today's date
var todaysDate = new Date();

var arr = document.getElementsByTagName('nobr');
	for (var i=0;i < arr.length; i++ ) {
	// Check if it is "our field"
		if(arr&#91;i&#93;.innerHTML.indexOf("Due:") == 0) {

		var sepDate = arr&#91;i&#93;.innerHTML.substring(5).split("/",3);
		var m = sepDate&#91;0&#93;;
		var d = sepDate&#91;1&#93;;
		var y = sepDate&#91;2&#93;;

		// build the datestring
		var fieldDate = new Date(y,m-1,d,00,00,00);

		var frendlyFieldDate = m + "/" + d + "/" + y; 

		// Round overdueDays with one decimal
		var overDueByDays = (Math.round(((todaysDate.getTime() - fieldDate.getTime())/86400000)*10)/10);

		// OffsetDate - Create the traffic lights
		var date = new Date();
		var yDay = date.getDate() + yDaysOffset;
		var rDay = date.getDate() + rDaysOffset;
		var Month = date.getMonth();
		var Year = date.getFullYear();
		var redOffsetDate = new Date(Year,Month,rDay,00,00,00);
		var yellowOffsetDate = new Date(Year,Month,yDay,00,00,00);

			if(yellowOffsetDate.getTime() < fieldDate.getTime() && redOffsetDate.getTime() < fieldDate.getTime()){
			//alert("green");
			arr&#91;i&#93;.innerHTML = "<DIV title='Due " + frendlyFieldDate + "' style='font-weight:bold; font-size:24px; color:green'>&bull;</DIV>";
			}
			else if(yellowOffsetDate.getTime() >= fieldDate.getTime() && redOffsetDate.getTime() < fieldDate.getTime()){
			//alert("yellow");
			arr&#91;i&#93;.innerHTML = "<DIV title='Due " + frendlyFieldDate + "' style='font-weight:bold; font-size:24px; color:yellow'>&bull;</DIV>";
			}
			else if(redOffsetDate.getTime() == fieldDate.getTime()){
			//alert("red");
			arr[i].innerHTML = "<DIV title='Due today!' style='font-weight:bold; font-size:24px; color:red'>&bull;</DIV>";
			}
			else if(redOffsetDate.getTime() > fieldDate.getTime()){
			//alert("red");
			arr[i].innerHTML = "<DIV title='Overdue by " + overDueByDays + " day(s)" + "' style='font-weight:bold; font-size:24px; color:red'>&bull;</DIV>";
			}

		}
	}
}

// call script
findDatefields();
//
//
// Text to HTML - List views
// Feedback and questions: Christophe@PathToSharePoint.com
//
var theTDs = document.getElementsByTagName("TD");
var i=0;
var TDContent = " ";
while (i < theTDs.length) {
try {
TDContent = theTDs&#91;i&#93;.innerText || theTDs&#91;i&#93;.textContent;
if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 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="<TABLE><TBODY id=\"tbod"+ groupName+"_\" isLoaded=\""+isLoaded+ "\">"+htmlToRender+"</TBODY></TABLE>";
var theTBODYTDs = wrapDiv.getElementsByTagName("TD"); var j=0; var TDContent = " ";
while (j < theTBODYTDs.length) {
try {
TDContent = theTBODYTDs&#91;j&#93;.innerText || theTBODYTDs&#91;j&#93;.textContent;
if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 0)) {
theTBODYTDs[j].innerHTML = TDContent;
}
}
catch(err){}
j=j+1;
}
tbody.parentNode.replaceChild(wrapDiv.firstChild.firstChild,tbody);
findDatefields();
}
</script>

Hope this helps!