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:

Happy SharePointing!

92 thoughts on “Color code your SharePoint calendar

Add yours

  1. You might have answered this elsewhere but the big problem with the hyperlink in the legend is that is shows the overlay but somehow doesn’t show it with the color I set but with the original default color. And there’s no real navigation to get back. Would the color customization in your other article possibly be adaptable to fix this? Any ideas on the navigation issue?

    1. Yes, totally a weird setup there, and not much you can do about it. You can add custom colors to the other page so it matches the overlay view. My other post covers adding the CSS.

      1. I found a solution to the navigation issue. Inserting an extra bit of CSS in the web part where colors are customized disables the links.

        .ms-acal-apanel ul, .ms-acal-apanel li {
        padding: 0px;
        margin: 0px;
        list-style-type: none;
        overflow: hidden;
        pointer-events: none;

        The pointer-events: none takes care of it.

  2. Sigh. That’s an entirely different matter. It’ll take longer to do and feel safe with so I think I’ll shift that part of the redesign down the list.

Leave a Reply

Up ↑

%d bloggers like this: