Introduction
Microsoft is encouraging SharePoint developers to use client side development to extend SharePoint capabilities. In a series of articles, I will discuss various technics for SharePoint developers to use JavaScript as the scripting language for SharePoint online.
In this blog post, I will introduce a trick for SharePoint Online to show color coded calendar entries. This time I will be playing with SharePoint online calculated column to have visual effect on the calendar view. As you know, a calculated column is something which is actually used to manipulate data on top of other columns.
Problem Statement
The client needs to show different colors for different calendar categories for employee work/leave in his organization. For example, if the employee is on leave, show calendar row as Green, If leave request is rejected, show the calendar row as red, and so on.
Alternate Solution
There are some posts available on internet to solve this problem. They use Calendar overlay feature of SharePoint to have this functionality:
But in this post, I will introduce another way for SharePoint online based on JavaScript. It is good when you don’t want to use Calendar overlay, since calendar overlay needs multiple calendars in your site.
Solution
Lets see, how I did it:
- Created a list called LeaveRequests
- I have edited an existing column called category and added below choice values for leave status:
- Approved
- Rejected
- Pending
- Delegated
- Created a calculated column to have title and category to apply code:
=Category$|$Title
- Go to the default calendar view and make sure to refer calculated column everywhere
- Now, go to the main calendar view to see the data, the data should look like below
- Next step is to edit the page and add a content editor web part having below code.
- Code basically parses the calculated colum and as per cetegory applies the color code
- Final output will look like below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<script type="text/javascript" src="https://sharepointjunkies.sharepoint.com/sites/demo/Style Library/jquery-1.9.1.js"></script> <script type="text/javascript"> 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(000,255,000)"; break; case "pending": colour = "rgb(204,000,204)"; break; case "delegated": colour = "rgb(255,204,000)"; break; case "rejected": colour = "rgb(255,000,000)"; break; default: colour = ""; } return colour; } window.setInterval(function () { ApplyColor(); }, 500); </script> |
In this article I introduce a way to have color coded calendar in SharePoint online using JavaScript technic. You can use this technic to have color coded calendar entries in one calendar without using overlay feature of SharePoint online.
Formula: =Category$|$Title
is throwing a syntax error to me. Did it really worked for you
you should use : Category&”$|$”&Titile
This is overly complex, do you have a sample of parsing just the category field? Why do a calc field then parse that?
yes, it is a little more complicated because of using the calculated field. we use the value of the calculated field to color code the calendar bars.
Moreover, the main purpose of this blog post is educational, you may find easier way to do that.
absolutely awesome. thank you. but I have a question. I have created a site page with a web part calendar to include the script. for whatever reason, the colors are not populating on the calendar. any idea as to why?
It seems you have an error in your JavaScript. you can use the developer tools on your browser to pinpoint the error
I have the same problem too. It works great in the calendar page itself, but as soon as I try to use the calendar as webpart on another page, the colors disappear. Any ideas? Great code by the way!
Never mind, got it working. You have to manually change the view to the coloured item view for the calendar web part.
How do you do this? I cannot get my colors to display. Thank you
Hi!
I tried this code & got everything working as far as the parsing of the event names, but can’t get the color coding to work. Do I need to save a JS file to my Style Library location? Any assistance would be great. Thank you!
<script type="text/javascript" src="https://breakawayllc.sharepoint.com/sites/H10010/Style%20Library/calcolorcode.js"
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 "desktop services":
colour = "rgb(000,255,000)";
break;
case "is dept events":
colour = "rgb(204,000,204)";
break;
case "pto":
colour = "rgb(255,204,000)";
break;
default:
colour = "";
}
return colour;
}
window.setInterval(function () {
ApplyColor();
}, 500);
I found that I your appointment or meeting is more than 1 hour the color is only changed under the text.
how to get it changed completely.
Hi Hamad, we are tweaking the look of OOB rendering for calendar view. as per the structure of rendering, it is not possible to get the color of box to change. Also, by achieving this there will be issues if there are multiple overlays in the same box.
Awesome. It worked for me …!! Thanks
I have copied the code and created the js file. Stored the js file in the site assets. created a link from contenet editor to call the function but getting Form HTML is not supported through content editor
My Link Url in Contenent editor is
Code
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(000,255,000)";
break;
case "pending":
colour = "rgb(204,000,204)";
break;
case "delegated":
colour = "rgb(255,204,000)";
break;
case "rejected":
colour = "rgb(255,000,000)";
break;
default:
colour = "";
}
return colour;
}
window.setInterval(function () {
ApplyColor();
}, 500);
It should work! put the JavaScript in text file enclosed by script tag and refer that text file in content editor web part.
TY! I have been searching high and low for how to do this!!! Finally decided to write my own JQuery and found yours!!! TY!
Worked great but how can this be enhanced to modify the colour of the text to black for example?
Hi Jeff Legault,
Where you able to apply text color change to calendar items? If so, kindly share the updated script.?
This worked great! Thanks for your help. Is there a way this can be done without splitting the title? What would the code look like if we ignored the $|$ separator? Thanks again!
I’m already using this code for color coding, and it works beautifully. Thank you! Question – any (easy) way to adjust the text size of the events, as well?
That worked perfectly! Thank you.
What if you want to change the text color and/or font?
How do we remove the separator “$|$” if the second field value that we used to create the calcualted field is empty? right now, if the second field value of the text field is emapty, it diplays “$|$” on the Calendar
I would REALLY like some assistance on how to change the text/font color
Hi,
Thanks for the code. Its working perfectly. Is there any way to remove the tooltip which has $|$
Hey Farshid Mahdavipour,
First of all thank you so much share this one but which list templet you used if you create custom list the existed column not change means it is single line text which the title column, if I created the the new column I can’t get on choice so could you more clarify this point i stack before going to the code check.
Thank you