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
