Monday, September 17, 2012


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