SharePoint – Apply color to Calendar as per categories
I got an requirement to show different colors to SharePoint calendar for different user status like leave requests approved, Pending, Rejected, Delegated. Below is the flow of creation.
- Create categories to color:
http://codemanga.com/wp-content/uploads/2015/06/Calendar.png - Create a calculated column <<TitleCalculated>> having formula: = Category&”$|$”&Title
3. Change the calendar view to show <<TitleCalculated>> column
http://codemanga.com/wp-content/uploads/2015/06/Calendar2.png
4. Now data will be displayed as below:
http://codemanga.com/wp-content/uploads/2015/06/Calendar3.png
5. Add below code in content editor web part as bellows:
<script>
function ApplyColor() {
var SEPARATOR = "$|$";
var nodes, category;
nodes = document.getElementsByTagName("a");
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].innerText.indexOf(SEPARATOR) != -1) {
var parts = nodes[i].innerText.split(SEPARATOR);
if (parts[0]) {
var color = GetCalendarColour(parts[0]);
nodes[i].parentNode.parentNode.style.background = color;
}
if (parts[1]) {
nodes[i].innerText = parts[1];
}
}
}
}
function GetCalendarColour(desc) {
var colour;
switch (desc.toLowerCase()) {
case "approved":
colour = "rgb(215,175,255)";
break;
case "pending":
colour = "rgb(204,255,204)";
break;
case "delegated":
colour = "rgb(255,204,153)";
break;
case "rejected":
colour = "rgb(255,255,153)";
break;
default:
colour = "";
}
return colour;
}
window.setInterval(function () {
ApplyColor();
}, 500);
</script>
6. Now, data will be displayed as per color:
http://codemanga.com/wp-content/uploads/2015/06/Calendar4.png
