Highlighting your late events in your SharePoint Timeline

You give a guy an inch, and he wants a mile. Fortunately I love SharePoint and don’t mind figuring out this fun stuff. Last week I posted on how to color code your timeline. That same colleague was grateful for the coloring, then asked if I can highlight late items in red. Obviously I said “Sure!” again.

Let’s start with what we had last week:

Now we have some late tasks. I didn’t finish everything I was suppose to. What can I say, I’m a slacker. So now I have some late tasks in my time line. Let’s highlight that:

Pretty neat. The code is below, and includes the code including my last post, highlighting everything old in green, and then highlighting late items.

$(document).ready(function() {
	colorCodeOld();
	colorCodeLate();

	function colorCodeOld(){
		var todayLeft = $(".ms-tl-today").offset().left;
		var backgroundColor = "rgb(13,171,5)";
		$(".ms-tl-milestoneLine, .ms-tl-innerDiamond").filter(function() {
		return $(this).offset().left < todayLeft;
		}).css("background-color",backgroundColor)
	}

	function colorCodeLate(){

		$(".ms-error").each(function() {
			var taskName = $(this).parent().parent().find(".ms-vb-title").text();
			console.log(taskName);
			var timeLabel = $(".ms-tl-milestoneLabelTitle").filter(function() {return $(this).text() == taskName});
			var labelLeft = timeLabel.parent().offset().left - 10;
			var lateColor = "rgb(191,0,0)";

			$(".ms-tl-innerDiamond").sort(sortByOffset).filter(function() { return $(this).offset().left > (labelLeft); })
			.first()
			.css("background-color",lateColor);

			$(".ms-tl-milestoneLine").sort(sortByOffset).filter(function() { return $(this).offset().left > (labelLeft); })
			.first()
			.css("background-color",lateColor);

			$(timeLabel).parent().find("span").css("color",lateColor);
		});
	}

	function sortByOffset(a,b){
		return $(a).offset().left > $(b).offset().left ? 1 : -1;
	}
});

What is free code without some caveats:

• Last week’s code was refactored into the method colorCodeOld(), this week’s new code is in colorCodeLate().
• To know which tasks are late, I am grabbing due dates from the list below the timeline that are dark red. Make sure your view has this field.
  
• The other issue with using the list is that if you have late items in the timeline, and they don’t appear in the below list (because of views, filtering, etc) then they won’t highlight red. Make sure the list view has all of your late timeline tasks in there as well.
• Once I know which task is late, I look for it in the timeline. If your timeline is crowded, the code might highlight the wrong lines. You can tweak the line selection with the code

  var labelLeft = timeLabel.parent().offset().left - 10;

  by modifying the – 10 at the end. I added this because the first task, in my case the Kick Off, was pushed to the right since it was fitting within the timeline.

• When you uncheck a late task, SharePoint does a good job clearing the red due date. My code does not, you’ll need to reload the page.
• I did see this happen once: the timeline loads, and the list of tasks below it take it’s sweet time, and as result my code doesn’t pick up the late dates. I can’t recreate this, but I did see it happen. If it happens for you, let me know, I can see about slowing down my code.

That ought to do it! Happy SharePointing!