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.

18 thoughts on “Color Code SharePoint Calendar

Add yours

  1. Try the following. Just add to HTML Form web part and define your ms-colors to what you want. It will roll up all items of the same. ;)


    function expandCal() {
    setInterval(expandCalCheck, 1200);
    function expandCalCheck() {
    var a = $(“”, $(“>div”)).get(0);
    if (a) {
    for (var r = 0; r div”).get(r)).get(0);
    if (a)
    if (a.innerText.indexOf(“more”) >= 0);
    ExecuteOrDelayUntilScriptLoaded(expandCal, “sp.ui.applicationpages.calendar.js”);

    // Not working correctly (pulls MS Colors not ones defined in web part)
    function getStyleRuleValue(style, selector, sheet) {
    var sheets = typeof sheet !== ‘undefined’ ? [sheet] : document.styleSheets;
    for (var i = 0, l = sheets.length; i < l; i++) {
    var sheet = sheets[i];
    if( !sheet.cssRules ) { continue; }
    for (var j = 0, k = sheet.cssRules.length; j < k; j++) {
    var rule = sheet.cssRules[j];
    if (rule.selectorText && rule.selectorText.split(',').indexOf(selector) !== -1) {
    return null;
    function getColourStyleRuleValue(style) {
    if (style == '.ms-acal-color1') {
    return '#133897';
    else if (style == '.ms-acal-color2') {
    return '#F88015';
    else if (style == '.ms-acal-color3') {
    return '#F6C811';
    else if (style == '.ms-acal-color4') {
    return '#4E79E6';
    else if (style == '.ms-acal-color5') {
    return '#F5699A';
    else if (style == '.ms-acal-color6') {
    return '#83AD47';
    else if (style == '.ms-acal-color7') {
    return '#BF53A4';
    else if (style == '.ms-acal-color8') {
    return '#9C6013';
    else if (style == '.ms-acal-color9') {
    return '#ED0033';
    else {
    return null;
    $('.ms-acal-title a').each(function (index) {
    if (index == 0) {
    // Get existing HTML code for Calendar items
    var x = document.getElementsByClassName("ms-acal-rootdiv");
    var htmlcode;
    for (var i = 0; i < x.length; i++) {
    if (i == 1) {
    htmlcode += x.item(i).innerHTML;

    // Modify HTML code for Calendar items
    var htmlObject = document.createElement('div');
    htmlObject.innerHTML = htmlcode;
    var calendaritemshtml = "";
    var startcalhmlt = '’;
    var endcalhtml = ”;

    var y = htmlObject.getElementsByClassName(“ms-acal-item”);
    var itemcount = 0;
    var classname;
    var gradientcolours = “”;
    var gradientcolourstext = “”;
    gradientindex = 0;
    for (var i = 0; i 0) {
    gradientcolours += ‘ ‘ + gradientindex + ‘px, ‘;
    gradientcolourstext += ‘ ‘ + gradientindex + ‘px, ‘;
    else {
    //Start of gradient
    gradientcolours += ‘, ‘;
    gradientcolourstext += ‘, ‘;
    //Increment gradient
    gradientindex = gradientindex + 20;
    //gradientcolours += getStyleRuleValue(‘background-color’, ‘.’ + classname[1]) + ‘ ‘ + gradientindex + ‘px, ‘;
    gradientcolours += getColourStyleRuleValue(‘.’ + classname[1]) + ‘ ‘ + gradientindex + ‘px, ‘;
    gradientcolourstext += classname[1] + ‘ ‘ + gradientindex + ‘px, ‘;
    var eventlink = y.item(i).getElementsByTagName(‘a’)[0].getAttribute(‘href’);

    if (i < y.length – 1) {
    //Check if event is the same as the next item
    if (eventlink == y.item(i + 1).getElementsByTagName('a')[0].getAttribute('href')) {
    itemcount = itemcount + 1;
    else {
    y.item(i – itemcount).style.height = '41px';
    y.item(i – itemcount).style.backgroundImage = '-webkit-repeating-linear-gradient(135deg, ' + gradientcolours.slice(0, -2) + ')'; /* For Safari 5.1 to 6.0 */
    y.item(i – itemcount).style.backgroundImage = '-o-repeating-linear-gradient(135deg, ' + gradientcolours.slice(0, -2) + ')'; /* For Opera 11.1 to 12.0 */
    y.item(i – itemcount).style.backgroundImage = '-moz-repeating-linear-gradient(135deg, ' + gradientcolours.slice(0, -2) + ')'; /* For Firefox 3.6 to 15 */
    y.item(i – itemcount).style.backgroundImage = 'repeating-linear-gradient(135deg, ' + gradientcolours.slice(0, -2) + ')'; /* Standard syntax */

    calendaritemshtml += y.item(i – itemcount).outerHTML;
    itemcount = 0;
    gradientcolours = "";
    gradientcolourstext = "";
    gradientindex = 0;
    else {
    //Last item
    calendaritemshtml += y.item(i).outerHTML;
    calendaritemshtml = startcalhmlt + calendaritemshtml + endcalhtml;
    //Write to DOM
    var z = document.getElementsByClassName("ms-acal-rootdiv");
    for (var i = 0; i < z.length; i++) {
    if (i == 1) {
    z.item(i).innerHTML = calendaritemshtml;
    } ,1500);

  2. 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?

  3. 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

    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?


    1. 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.

  4. 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.

  5. 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?

    1. 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.


      1. 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. 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!

        1. 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?

      3. 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. :)

  6. 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

    1. 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”…

      1. 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?

  7. 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

Leave a Reply

Up ↑

%d bloggers like this: