Wednesday, December 16, 2015

SharePoint Calendar color coding based on categories using Javascript

In the calendar view we have different kind of categories so based on selected category we have applied different color coding in calendar view using JavaScript.

Add this below script into the page using Content Editor Webpart

$(window).bind("load", function() {
   // code here
    ColorCalendar();
//This will help to previous or next month calendar
    $('a[title="Previous Month"]').bind('click', function (event) {
        setTimeout(function () {
            //do what you need here          
            ColorCalendar();
        }, 1000);
     
    });
    $('a[title="Next Month"]').bind('click', function (event) {
        setTimeout(function () {
            //do what you need here          
            ColorCalendar();
        }, 1000);

    });
});

function ColorCalendar() {

var arrayofDivItems = $('div[class="ms-acal-item"] a');
$('div[class="ms-acal-item"] a').each(function(i) {

var colour = GetColourCodeFromCategory(this.text);
if(this.parentNode.parentNode.parentNode.className == 'ms-acal-item')
{
this.parentNode.parentNode.parentNode.style.backgroundColor = colour;
}
else if(this.parentNode.parentNode.className == 'ms-acal-item')
{
this.parentNode.parentNode.style.backgroundColor = colour;
}
else if(this.parentNode.className == 'ms-acal-item')
{
this.parentNode.style.backgroundColor = colour;
}

});
}

function GetColourCodeFromCategory(category) {
var colour = null;
switch (category.trim().toLowerCase()) {
case 'leave':
//green
colour = '#FF0000';
break;
case 'wfh':
//yellow
colour = '#FF9900';
break;
case 'compoff':
//blue
colour = '#0FAD00';
break;
case 'paternity leave':
//blue
colour = '#0010A5';
break;
case 'meternity leave':
//blue
colour = '#0010A5';
break;

}
return colour;
}


No comments:

Post a Comment