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:

SharePoint Color Coded Timeline

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:

Highlighting late tasks in SharePoint timeline

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() {

	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;

	function colorCodeLate(){

		$(".ms-error").each(function() {
			var taskName = $(this).parent().parent().find(".ms-vb-title").text();
			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); })

			$(".ms-tl-milestoneLine").sort(sortByOffset).filter(function() { return $(this).offset().left > (labelLeft); })


	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.
    Timeline with list view below
  • 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!


6 thoughts on “Highlighting your late events in your SharePoint Timeline

  1. Pingback: Boston SharePoint Bloggers Digest – Summer 2013 | Beantown SharePoint

  2. Marie Castine

    How could I color code the bar (not the callout) and have it color according to a value – not date? So that the value “Banner” inside the dropdown called “Location” would be a dark blue (instead of the default baby blue) and other filters. Also, the previous posts references a JQuery needed from the calendars but I did not see anything on that post that referenced a JQuery. Where can I find that information? Thanks!

    1. David Lozzi Post author

      Great idea! That would take some more coding for sure but not impossible. I’m at Ignite this week, I’ll check this out more next week

  3. ss78123

    Could you think of an easy way to only show a certain date range using this method? I’ve been looking at some blog posts about modifying property bag settings in XML for this but don’t really understand it…maybe hiding all tasks on the timeline with dates outside of a certain task range by using CSS or something?
    thanks if you have any ideas!

  4. ttrainer45

    hello David, I have a training list and I want to show related users taking the same training on a calendar with their dates showing. have you done anything like this using jquery? or have some similar code?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s