Color Code SharePoint Calendar

Customizing the SharePoint calendar is by far my most popular topic, so I thought I’d make it a little easier to find it all. Here’s what we have, for now.

Color code your SharePoint Calendar walks through how to do basic, no code, color coding in a SharePoint view.

Color code calendar in SharePoint

Next, we have Customize the SharePoint Calendar Colors. This walks through how to use some basic CSS styling to change the colors of your calendar as you want.

New Colors in the Calendar

And finally, there is a little bug that occurs when using the calendar overlay functionality. There is a little script you can apply to your page to resolve, check out Calendar Overlays: Keeping events in the same window.

Advertisements

16 thoughts on “Color Code SharePoint Calendar

  1. Tougwa Franklin

    Hello, Good day. Please I have a problem and will need your assistance. I am working on SharePoint 2013. I have created a Master Calendar and Sub Calendars. I can roll events from Sub Calendars to Master Calendar and from Master Calendar to Sub Calendars. When I create an event is a sub calendar and roll up to the Master Calendar, the event has the default blue color in the sub calendar and has the applied color (e.g red) in the Master Calendar. When an event is created in the Master Calendar and rolled to the sub calendar, it has the default blue color in the Master Calendar and the applied color in the sub calendar. But I want these events to have same color ( i.e applied color, say Red) in the sub calendar irrespective of whether it is created in the Master Calendar or a Sub Calendar. Briefly, all events in the sub calendars should have the same unique applied color, whether it was created in the master calendar or in the sub calendar.
    Thanks for reply
    Franklin

    Reply
  2. Susana

    Hello David! Awesome blog! I was wondering if it was possible (if so how?) to add mulitple color coding depending on a task in one form. i.e. fill out form sally will read (will color code pink on calendar), Matt will review (will color code green on calendar). I want to be able to add several tasks and color code seperate within one form that will then be expressed in a color coded calendar overlay…LOL I can re explain if this is confusing. thanks

    Reply
    1. David Lozzi Post author

      Something like this should be doable simply by creating a unique view for each color, based on the reviewer or status. Then use each view in your overlays. Not sure what you mean by “color code separate within one form”…

      Reply
      1. Susana

        Hey David, thanks for the swift reply! Let me explain further….when using calendar overlay, it uses time interval to plot on the calendar. I was wondering if it was possible to have multiple time intervals for different tasks on one form to then plot it in the calendar at one time as opposed to filling out an individual form for each task that has a seperate color code(I color code by employee). Ugg having a tough time explaining. Does this make sense?

  3. Carrie

    Hi, thank you for this post. I must have missed some huge obvious thing though – my items are duplicating onto all of the views I created. Is there a way to make them not duplicate across all of the views?

    Reply
    1. David Lozzi Post author

      Hi Carrie,

      You need to make sure you filter out the events in each view, including the default/base view on the page. Let me know if you need further guidance.

      Thanks,
      David

      Reply
      1. Carrie

        Ok, thank you. The layout is weird, so I couldn’t even tell that the options on the right were “under” the Filter section, ha.

      2. Carrie

        So – what do you filter on to block them? We are just getting set up so it’s possible we are missing fields.

        Thank you!

      3. David Lozzi Post author

        You’ll need some values to filter on, like a Category field which indicates the type of meeting. Do you know what types of events will be added?

      4. Carrie

        I don’t know any of that yet, actually. I bet as we move forward I can change it. I was hoping to filter on the view name – blocking the other views completely….to be able to use it like google calendar. :)

  4. Carrie

    Ok, thank you. The layout is weird, so I couldn’t even tell that the options on the right were “under” the Filter section, ha.

    Reply
  5. Alex Pham

    Hi David,

    I’ve run across a unique situation that I can’t seem to find any advice for so I’m hoping you can help. I created multiple calendars with color coded events. i.e. Asia, US, Europe. In each one, of course, are the multiple views in order to color code events. Then, I also have a Master calendar called Calendar – Master. I need Asia, US, and Europe to be overlaid onto Calendar – System. But when I do that, I also want the color coded events from the overlaying calendars to populate, which they’re not. Sorry, this is tad confusing. So, right now, I have:

    Calendar – Master
    Asia
    Shipping
    Receiving
    Transportation
    US
    Shipping
    Receiving
    Transportation
    Europe
    Shipping
    Receiving
    Transportation

    My Asia, US, and Europe calendars have multiple calendar views for Shipping, Receiving, and Transportation so each item is color coded on their respective calendars.
    However, when I try to overlay Asia, US, and Europe onto Calendar – Master, none of their color coded events show up. The only way I can get them to show up is if I remove the Blank filter on each calendar.

    Any suggestions? Is this even possible?

    Thanks,
    Alex

    Reply
    1. David Lozzi Post author

      Unfortunately what you’re trying to do is not possible. The overlays are only available per the view you’re on, and doesn’t carry over if you use the view elsewhere. Also, calendar overlays are limited to 10 at the current time.

      Reply
  6. Ramya

    I tried this and unfortunately, it is not visible on all IE browsers. Is there something differently I could do to make it visible across all different browsers?

    Reply

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