Color coded calendar in SharePoint Online using JavaScript


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.

Calendar planning magnifying glass resting on an important date concept fpr deadline business appointment or meeting


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.


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

calendar overlay javascript 1

  • Created a calculated column to have title and category to apply code:


calendar overlay javascript 2

  • Go to the default calendar view and make sure to refer calculated column everywhere

calendar overlay javascript 3


  • Now, go to the main calendar view to see the data, the data should look like below

calendar overlay javascript 4


  • 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:

calendar overlay javascript 5


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.


View all posts by

23 thoughts on “Color coded calendar in SharePoint Online using JavaScript

    1. 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.

  1. 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?

    1. It seems you have an error in your JavaScript. you can use the developer tools on your browser to pinpoint the error

      1. 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!

  2. 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.

    1. 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.

  3. 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


    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] = color;

    if (parts[1]) {
    nodes[i].innerText = parts[1];

    function GetCalendarColour(desc) {
    var colour;
    switch (desc.toLowerCase()) {
    case "approved":
    colour = "rgb(000,255,000)";

    case "pending":
    colour = "rgb(204,000,204)";

    case "delegated":
    colour = "rgb(255,204,000)";

    case "rejected":
    colour = "rgb(255,000,000)";

    colour = "";
    return colour;

    window.setInterval(function () {
    }, 500);

    1. It should work! put the JavaScript in text file enclosed by script tag and refer that text file in content editor web part.

  4. 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!

  5. 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?

  6. 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

Leave a Reply