Tag Archives: color coding

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!


Coloring your SharePoint Timeline in one line of code

I just had a colleague ask me “Can we color code a timeline?”. I, of course, answered “Sure!”. I had a little wiggle room in my day so I busted this out.

Let’s go from the all blue timeline:

SharePoint Timeline

To something that indicates where your are, a little more visually:

SharePoint Color Coded Timeline

One line of code, BOOM:

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

I’m not a fan of one-line-of-code solutions, I’m a bigger fan of clean, legible code, so here’s the above, but a little more understandable.

$(document).ready(function() {
 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;

If it’s not obvious, you’ll need jQuery on your page as well ;). Similar to my color coding calendars, you’ll have to throw this into a content editor web part or a HTML forms web part.

Happy SharePointing!

Color code your SharePoint calendar

A nice new feature in SharePoint 2010 is the ability to roll up multiple calendars into one, and color code them. In previous versions of SharePoint, this was something that was only doable with third-party products or some serious jQuery.

Consider the following scenario. The sales department of Contoso has a single calendar they use to track and manage their events, like trade shows, client meetings, follow up calls, department meetings, etc. They have it all in one calendar, but it’s a mess, and hard to see important events.

Boring SharePoint Calendar View

Instead, they would like to view each category of event in its own color. Like this:

Color coded SharePoint calendar

This is simple to do with a single calendar, there’s just a little leg work up front.

Before we begin: one down side to this is that it’s not easily replicable. Once you create your calendar, you cannot copy or move it to another location. You’ll need to recreate it again in your new location. So start with your calendar view or web part you want to use.

One more note: it has been discovered that once you’re using the calendar overlay, clicking on an event will open a new window to view the event. It will not use the modal dialog box. I’m betting this is a “feature” since the overlay could technically pull from calendars from other lists and sites. I’ll see if I can figure a way around that. ;)

To make this pretty calendar, we need to make a view for each color set we want. By making each view, we can overlay each view over the calendar and then select a color for each. Creating each view will require the filter data to be in the appointment in some manner. Ideally a choice field has been added with options to choose from, but if your users were typing in “Tradeshow” or “Meeting” in the Title field, we can filter on that as well.

First thing we do is modify the default view. Chances are your current default view is Calendar, which includes all items. This will be our base for our colorful masterpiece. This default view will automatically assume the green color. Go head and modify this view to weed out anything you don’t want using a unique color (i.e. set the filter where category is equal to blank, as long as the users specify a category it shouldn’t show up in this view).

Now create a view for each color set.

Quick steps to create a view

  • In the ribbon, click the Calendar tab, then click Create View
  • On the bottom half of the page, select existing view Calendar
  • Name it accordingly.
  • Scroll down to the Filter and specify your filter
  • Click OK

Continue these same steps to create each view. At the end, you should have a few views. Check out each view and ensure you’re seeing unique values in each. If you see the same value in more than one, it will appear more than once (in each color) in your color coded calendar.

Once your views are made, go to your site home page and browse to your calendar page. This will ensure we’re on the default page that your users will also access.

Now let’s bring it all together

  • In the ribbon, click the Calendar tab
  • Click Calendars Overlay
  • Click New Calendar
  • Name it, preferably the same name as your view
  • Select your color
  • Ensure the correct URL is specified and click Resolve
  • Select your Calendar list
  • Select your View
  • Check Always Show
  • Click OK

Do this for each view and then click OK to return.

Now you have a pretty color coded calendar! You’ll also see a legend on the left, which helps define the colors for your users.

Color code SharePoint legend

Don’t forget your missing appointments! Make sure your views are including all of your appointments. In my example, if the Category field isn’t required, users can create appointments without specifying a category. This would cause appointments to go missing in our new view. To resolve this, create another view which includes a filter to include all but the above items.

Want to change up the colors? Check out my other post: https://davidlozzi.com/2012/06/20/customize-the-sharepoint-calendar-colors/.

Happy SharePointing!