Color Code SharePoint Calendar

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

//code.jquery.com/jquery-latest.js

function expandCal() {
setInterval(expandCalCheck, 1200);
}
function expandCalCheck() {
var a = $(“a.ms-cal-nav”, $(“div.ms-acal-rootdiv:last>div”)).get(0);
if (a) {
for (var r = 0; r div”).get(r)).get(0);
if (a)
if (a.innerText.indexOf(“more”) >= 0)
a.click();
}
}
}
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 rule.style[style];
}
}
}
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;
}
}
$(document).ready(function(){
setTimeout(function(){
$(function(){
$('.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;
break;
}
}
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;
}
}
}
$(this).contents().unwrap();
});
});
} ,1500);
});

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