How to Color Code a SharePoint Calendar

There is no OOB way to Color Code a SharePoint calendar.  Bamboo has a web part for purchase; however, this web part has limited functionality and it makes significant changes to the look & feel of the calendar.

In order to simply change the color of the calendar entries, based on a column value, modify the JavaScript at the end of this blog to meet your needs.

1.  Create a document library for your code, such as, https://my.sharpoint.com/sites/MySite/CodeLib/ and copy jquery-1.5.1.js there

2.  Modify the first line of code to point to the location of your document library:  <script type="text/javascript" src="https://my.sharpoint.com/sites/MySite/CodeLib/jquery-1.5.1.js"></script>

3.  Create a column in the Calendar list, called “MyCategory.” 

4.  Modify the switch/case section of the javascript to the categories in your list, and choose the colors you would like:

var colour = null;

        switch (category.trim().toLowerCase()) {

             case 'custom category 1':

                colour = "#7bd148";

                break;

            case 'custom category 2':

                colour = "#f691b2";

                break;

            case 'custom category 3':

                colour = "#fbe983";

                break;

            case 'custom category 4':

                colour = "#9a9cff";

                break;

        }

        return colour;

5.   Save the .js file in a document library within the site collection (make sure all users have READ access to this document)

6.   Create a hidden web part that references this .js file

7.   Create a calculated field with ="|||"&MyCategory&"|||"&Title

8.   Create a calendar view choose the new Calculated field (from step 5) for Month View Title, Week View Title, etc. (instead of the default “Title”)

JavaScript

<script type="text/javascript" src="https://my.sharpoint.com/sites/MySite/CodeLib/jquery-1.5.1.js"></script>

<script type="text/javascript">

    _spBodyOnLoadFunctionNames.push('WaitForCalendarToLoad');

    var SEPARATOR = "|||";

    function WaitForCalendarToLoad() {

        if (typeof SP.UI.ApplicationPages.CalendarNotify.$4a == 'undefined') {

            // post SP1

            var pwold$4b = SP.UI.ApplicationPages.CalendarNotify.$4b;

            SP.UI.ApplicationPages.CalendarNotify.$4b = function() {

                pwold$4b();

                ColourCalendar();

            }

            SP.UI.ApplicationPages.SummaryCalendarView.prototype.renderGrids = function($p0) {

                var $v_0 = new Sys.StringBuilder();

                var $v_1 = $p0.length;

                for (var $v_2 = 0; $v_2 < $v_1; $v_2++) {

                    this.$7t_2($v_2, $p0[$v_2]);

                }

                for (var $v_3 = 0; $v_3 < $v_1; $v_3++) {

                    $v_0.append('<div>');

                    this.$I_2.$7o($v_0, $p0[$v_3], $v_3);

                    $v_0.append(this.emptY_DIV);

                    $v_0.append('</div>');

                }

                this.setInnerHtml($v_0.toString());

                ColourCalendar();

            }

        }

        else {

            // pre SP1

            var pwold$4a = SP.UI.ApplicationPages.CalendarNotify.$4a;

            SP.UI.ApplicationPages.CalendarNotify.$4a = function() {

                pwold$4a();

                ColourCalendar();

            }

            SP.UI.ApplicationPages.SummaryCalendarView.prototype.renderGrids = function($p0) {

                var $v_0 = new Sys.StringBuilder();

                var $v_1 = $p0.length;

                for (var $v_2 = 0; $v_2 < $v_1; $v_2++) {

                    this.$7r_2($v_2, $p0[$v_2]);

                }

                for (var $v_3 = 0; $v_3 < $v_1; $v_3++) {

                    $v_0.append('<div>');

                    this.$I_2.$7m($v_0, $p0[$v_3], $v_3);

                    $v_0.append(this.emptY_DIV);

                    $v_0.append('</div>');

                }

                this.setInnerHtml($v_0.toString());

                ColourCalendar();

            }

        }

    }

    function ColourCalendar() {

        if (jQuery('a:contains(' + SEPARATOR + ')') != null) {

            jQuery('a:contains(' + SEPARATOR + ')').each(function(i) {

                $box = jQuery(this).parents('div[title]');

                var colour = GetColourCodeFromCategory(GetCategory(this.innerHTML));

                //this.innerHTML = GetActualText(this.innerHTML);

                this.innerHTML = "<span style='color:#000000'>" + GetActualText(this.innerHTML) + "";

                jQuery($box).attr("title", GetActualText(jQuery($box).attr("title")));

                $box.css('background-color', colour);

            });

        }

    }

    function GetActualText(originalText) {

        var parts = originalText.split(SEPARATOR);

        return parts[0] + parts[2];

    }

    function GetCategory(originalText) {

        var parts = originalText.split(SEPARATOR);

        return parts[1];

    }

    function GetColourCodeFromCategory(category) {

      

var colour = null;

        switch (category.trim().toLowerCase()) {

            case 'custom category 1':

                colour = "#7bd148";

                break;

            case 'custom category 2':

                colour = "#f691b2";

                break;

            case 'custom category 3':

                colour = "#fbe983";

                break;

            case 'custom category 4':

                colour = "#9a9cff";

                break;

        }

        return colour;

    }

</script>

Happy Color Coding!

-          Kristin Cameron, Managing Consultant
   Project Leadership Associates