Posted on July 16, 2014|by: Ricardo Palhano| 16 Comments

Previously MetroStar had a blog on how to create a color coded calendar Out of the box (OOB). This post will cover step by step on how you can leverage just a bit of JS that you can easily copy and paste into a Content Editor Web Part to achieve a more robust solution. So don’t worry, you still don’t have to know how it works.
This solution is thanks to PlanetWilson’s V2 color calendar JS script which checks for a calculated field’s HTML value then replaces that with its own CSS with an !important tag.  If you are comfortable with JS you can create your own version as well which improves on the one provided, but that is for a different post.
In the following steps we will be creating a color coded calendar for a proposal review calendar:

Color Calendar in a proposal site

Create a new Calendar

We will be using the basic OOB calendar app so if you don’t already have a calendar go ahead and create one. If you already have a calendar you need to color code please skip this section and move on to “Create a new Calculated Column

Add an App

1. Go into your site’s contents and click “add an app

 Add Calendar

2. Click “Calendar” give it a name then click “Create

Create a new Calculated Column

The way the JS we will be copying and pasting works is by looking on our calendar page for the characters “|||” our category then “|||” again. This way we don’t accidentally find the wrong item on the page. So we need to create a calculated column that adds those characters in as well as our category and title. Note that if you are using Content Types you can add the column on the content type instead of at the list level.

Create Column

1. So on our calendar Click “Create Column

Column Name

2. Give the Column the name “CategoryTitle” or another name you prefer and select “Calculated (calculation based on other columns)

 Calculated Column Formula

3. Now we will enter our formula to create the text we will display on our calendar.

a. Enter the following formula (Be sure to Replace “Category” and “Title” if you have replaced those fields.

= “|||” & [Category] & “|||” & [Title]

b. Now Select “Single line of text” and click “OK

Modify your Categories

If you have already created your calendar categories you can skip this step and move on to “Creating a Color Coded View”. In our case now we will be adding some review categories for a proposal review. Because we are changing category names we will need to make this change in the JS as well.

List Settings

1. Click on “List Settings

 Category Column

2. Click on “Category

Categories

3. In my case I am entering different proposal review teams as my categories, but you can leave things as is or enter your own categories here then click “OK”

Red Team
Pink Team
Blue Team
Orange Team
Green Team
Gold Team

Creating a Color Coded View

Now we will need to create a calendar view that shows our calculated column instead of the title. You can also just edit the existing default view if you prefer.

Create View

1. Click “Create View

 Calendar view

2. Select the “Calendar View

Calendar View Name

3. I am calling this calendar “Color Calendar” but you can name it anything. I am also using the default “Start Time” and “End Time” fields, but if you have replaced these pick the appropriate fields.

View Columns

4. Here I am setting all of the title fields to the calculated column we created called “CategoryTitle”. If you named it differently select that field. Now we can click “OK

Modify the JS with the Colors you want and the Categories you Created

At this point if you kept the default categories and you don’t care what colors are associated with each category then skip to “Adding the JS to your Calendar
You can get the JS file at PlanetWilson or you can just use the text found in this section. Here is the full JS which we will be making a few changes to. Note that it uses the JQuery libraries as well.


<style>
.ms-acal-item{display:none;}
</style>

<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js"></script>
<script type="text/javascript">

var shouldcolortext = true;

LoadSodByKey("SP.UI.ApplicationPages.Calendar.js", function () {
window.setTimeout(ColorCalendar, 1000);
});

var SEPARATOR = "|||";

function ColorCalendar() {
var container = jQuery('#s4-bodyContainer');
var query = 'a:contains(\'' + SEPARATOR + '\')';

if(container.find(query).length > 0)
{
container.find(query).each(function (i) {
var box = jQuery(this).parents('div[title]');
var colors = GetColorCodeFromCategory(GetCategory(this.innerHTML));
var anchor = jQuery(this);
anchor.text(GetActualText(anchor.text()))
box.attr("title", GetActualText(box.attr("title")));
box.css('background-color', colors[0]);
box.css('display', 'block');
if(shouldcolortext )
{
box.find('div, a').css("cssText", "color: " + colors[1] + " !important;");
}
});

}
window.setTimeout(ColorCalendar, 2000);
}

function GetActualText(originalText) {
var parts = originalText.split(SEPARATOR);
return parts[0] + parts[2];
}

function GetCategory(originalText) {
var parts = originalText.split(SEPARATOR);
return parts[1];
}

function GetColorCodeFromCategory(category) {
var bgcolor = null;
var fgcolor = null;
switch (category.trim()) {
case 'Meeting':
bgcolor = '#f4b084';
fgcolor = '#c65911';
break;
case 'Work hours':
bgcolor = '#ffd966';
fgcolor = '#bf8f00';
break;
case 'Business':
bgcolor = '#9bc2e6';
fgcolor = '#2f75b5';
break;
case 'Holiday':
bgcolor = '#a9d08e';
fgcolor = '#548235';
break;
case 'Get-together':
bgcolor = '#aeaaaa';
fgcolor = '#757171';
break;
case 'Gifts':
bgcolor = '#c00000';
fgcolor = '#ff4b4b';
break;
case 'Birthday':
bgcolor = '#9966ff';
fgcolor = '#6600ff';
break;
case 'Anniversary':
bgcolor = '#99ffcc';
fgcolor = '#00cc66';
break;
}
return [bgcolor, fgcolor];
}
</script>

1.  The first thing you will want to do is copy and paste all of this into notepad or you editor of choice.

Category Code

2. Now search for “Meeting” and replace that with your first category.  Then for “Work Hours” and replace that with your next category and so on until you have replaced all of your categories.

a. Note that I only had 6 categories so I deleted the case “Birthday” and “Anniversary”.  If you had more categories you can copy and paste an existing section as needed.

Hex Color Website

3. Now we can change the colors.  “bgcolor” is the background color and “fgcolor” is the text color.  Note that it is in HEX format and I like to use a site called http://www.color-hex.com to find out the correct color codes.

a. I want the colors to correspond to my categories and I want all of my text to be black so I made the following changes.

 Color Codes

4. Now you can save this as a new file or just copy it to your clip board

Adding the JS to your Calendar

Now I can either add my color coded view to my existing view or add the calendar to a new page and select that view.  In either case I need to copy and paste my JS on the page so it will work.  For this example we will go ahead and just use the view page itself.

Add Webpart

1. Note that I am on my view’s page (But any page where we are showing the view we created or modified will do).  Click on the gear icon then “Edit page

 Add webpart

2. Now click on “Add a Web Part

Add CEWP

Add Button

 3. Select “Media and Content” then “Content Editor” then click “Add

 

Edit Source

4. Now click “Click here to add new content” then on the ribbon click “Edit Source

a. Note skip this step and go to “Add JS as a file to your calendar” if you prefer that method.  It is recommended if you are using this on multiple pages.

 HTML Source Copy

5. Now copy and paste everything in your notepad into the window and click “OK

 Create Calendar Item

6. If you don’t already have items in your calendar go ahead and create some events in your calendar

 Color Coded Example Item

7. Note that now the color displays according to your category.

Adding JS as a file to your Calendar

Since you may want this functionality on multiple pages for your calendar it may be easier to save that JS you have in your notepad as a file.  Then we can just point to that file in the content editor web part.

 Save file as

1. First let’s save the file as “ColorCalendar.txt”, you can name it anything.

 Upload Document

Add a Document

2. Now go ahead and upload that document anywhere people who will be viewing the calendar will have access to.  You may want to use the “Site Assets” or “Style Library” library if possible.

a. Note the URL of the file you just uploaded

 Edit Web Part

3. Click the down arrow on the “Content Editor Web Part” then select “Edit Web Part

 Content Editor Content Link

4. Now enter in the relative URL to your file and click “OK”.

So as you can see it’s not too hard to add color coding to your calendar with whatever colors you want.  The final file I copied and pasted and also uploaded is below for reference:


<style>
.ms-acal-item{display:none;}
</style>

<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js"></script>
<script type="text/javascript">

var shouldcolortext = true;

LoadSodByKey("SP.UI.ApplicationPages.Calendar.js", function () {
window.setTimeout(ColorCalendar, 1000);
});

var SEPARATOR = "|||";

function ColorCalendar() {
var container = jQuery('#s4-bodyContainer');
var query = 'a:contains(\'' + SEPARATOR + '\')';

if(container.find(query).length > 0)
{
container.find(query).each(function (i) {
var box = jQuery(this).parents('div[title]');
var colors = GetColorCodeFromCategory(GetCategory(this.innerHTML));
var anchor = jQuery(this);
anchor.text(GetActualText(anchor.text()))
box.attr("title", GetActualText(box.attr("title")));
box.css('background-color', colors[0]);
box.css('display', 'block');
if(shouldcolortext )
{
box.find('div, a').css("cssText", "color: " + colors[1] + " !important;");
}
});

}
window.setTimeout(ColorCalendar, 2000);
}

function GetActualText(originalText) {
var parts = originalText.split(SEPARATOR);
return parts[0] + parts[2];
}

function GetCategory(originalText) {
var parts = originalText.split(SEPARATOR);
return parts[1];
}

function GetColorCodeFromCategory(category) {
var bgcolor = null;
var fgcolor = null;
switch (category.trim()) {
case 'Red Team':
bgcolor = '#ff0000';
fgcolor = '#000000';
break;
case 'Pink Team':
bgcolor = '#ffc0cb';
fgcolor = '#000000';
break;
case 'Blue Team':
bgcolor = '#0000ff';
fgcolor = '#000000';
break;
case 'Orange Team':
bgcolor = '#ffa500';
fgcolor = '#000000';
break;
case 'Green Team':
bgcolor = '#008000';
fgcolor = '#000000';
break;
case 'Gold Team':
bgcolor = '#FFD700';
fgcolor = '#000000';
break;
}
return [bgcolor, fgcolor];
}
</script>

Filed in: Collaboration, Tips & Tricks

16 Comments

  1. Gert Vernhout
    October 17, 2014 at 6:08 am

    Nice post. If the categories would be in a list with two additional field: bgcolor and fgcolor, that are added by lookup, there would be no need to change the JS for the categories, right? When adding an activity on the calendar one would choose a category, and the bgcolor and fgcolor will be added to the calendar and are ready to be used by the JS. Or do I miss something?

  2. Jaroslav Sindler
    June 30, 2015 at 7:51 am

    Very helpfull post. Thanks.

  3. June 30, 2015 at 10:25 am

    Hello, Thanks for the feedback. Yes, you could definitely store the color code in a SharePoint list, but you would just need to modify the JS to 1. Find those variables in the page (or get them using CSOM), and 2. return those values like it does with box.find(‘div, a’).css(“cssText”, “color: ” + colors[1] + ” !important;”);

    • Matthias
      July 27, 2016 at 10:38 am

      Could explain it in more details how I can use CSOm to retrieve the values in list.
      I’ve tried it several times, but without success.

      Best regards

      Matthias

  4. vincep1974
    August 1, 2015 at 11:23 pm

    Thanks for sharing this… it’s working great for us and is just what we were looking for.

  5. Fabrice
    September 4, 2015 at 12:38 pm

    Hello,
    I tried to make this script but when I put it the top menu is desapparing…
    And the color does not change .;-)
    Somebody have the same things (Sherpoint 2013)
    thanks a lot.

  6. Scott
    October 8, 2015 at 12:16 pm

    Awesome – I reached this page via a Google search after already trying several prior search results for this same type of problem.

    This particular blog did it for me very quickly and simply. The authors JS code is laid out rather nicely such that it was simple to modify for my needs.

    Nice job!

  7. Ram
    March 14, 2016 at 10:32 am

    Nice Post. It’s working great. But, I changed the Name of the Calendar in both .JS code and also the Calendar list name.

    Then its not working. Can someone help me?

  8. Adrienne
    March 18, 2016 at 3:06 pm

    This is very nice and easy to use. One limitation though is that I cannot seem to get it to work when the calendar is a web part on another page. Is there a way to customize the code that it will properly execute on a page with several web parts? Please advise!

  9. Jamie
    June 22, 2016 at 2:21 pm

    I uploaded the Color.Calendar.txt file to the Style Library here: https://spteams/sites/ngen/Style Library/Forms/AllItems.aspx, but once I dropped in the ColorCalendar.txt file into Content Web Editor part my ability to edit the calendar or see the page itself entirely disappeared. Do I need to enable any sort of site feature first in order for this to work?

    • Jamie
      June 22, 2016 at 2:24 pm

      BTW… I found the page. Once I was able to edit and remove ‘Content Web Editor’, now my permissions returned. Anyone have a clue? Here was my code used:

      .ms-acal-item{display:none;}

      var shouldcolortext = true;
      LoadSodByKey(“SP.UI.ApplicationPages.Calendar.js”, function () {
      window.setTimeout(ColorCalendar, 1000);
      });
      var SEPARATOR = “|||”;
      function ColorCalendar() {
      var container = jQuery(‘#s4-bodyContainer’);
      var query = ‘a:contains(\” + SEPARATOR + ‘\’)’;
      if(container.find(query).length > 0)
      {
      container.find(query).each(function (i) {
      var box = jQuery(this).parents(‘div[title]’);
      var colors = GetColorCodeFromCategory(GetCategory(this.innerHTML));
      var anchor = jQuery(this);
      anchor.text(GetActualText(anchor.text()))
      box.attr(“title”, GetActualText(box.attr(“title”)));
      box.css(‘background-color’, colors[0]);
      box.css(‘display’, ‘block’);
      if(shouldcolortext )
      {
      box.find(‘div, a’).css(“cssText”, “color: ” + colors[1] + ” !important;”);
      }
      });
      }
      window.setTimeout(ColorCalendar, 2000);
      }
      function GetActualText(originalText) {
      var parts = originalText.split(SEPARATOR);
      return parts[0] + parts[2];
      }
      function GetCategory(originalText) {
      var parts = originalText.split(SEPARATOR);
      return parts[1];
      }
      function GetColorCodeFromCategory(category) {
      var bgcolor = null;
      var fgcolor = null;
      switch (category.trim()) {
      case ‘Allocation (AB, IDEA, RDF, P&H)’:
      bgcolor = ‘#f4b084’;
      fgcolor = ‘#000000’;
      break;
      case ‘Awareness Events’:
      bgcolor = ‘#ffd966’;
      fgcolor = ‘#000000’;
      break;
      case ‘Dry Run’:
      bgcolor = ‘#9bc2e6’;
      fgcolor = ‘#000000’;
      break;
      case ‘Freeze Dates’:
      bgcolor = ‘#a9d08e’;
      fgcolor = ‘#000000’;
      break;
      case ‘Holidays’:
      bgcolor = ‘#aeaaaa’;
      fgcolor = ‘#000000’;
      break;
      case ‘MDP’:
      bgcolor = ‘#c00000’;
      fgcolor = ‘#000000’;
      break;
      case ‘MFP OP’:
      bgcolor = ‘#9966ff’;
      fgcolor = ‘#000000’;
      break;
      case ‘MOM (WM/SCAL)’:
      bgcolor = ‘#99ffcc’;
      fgcolor = ‘#000000’;
      break;
      case ‘MRI’:
      bgcolor = ‘#93FFE8’;
      fgcolor = ‘#000000’;
      break;
      case ‘Product EPM’:
      bgcolor = ‘#307D7E’;
      fgcolor = ‘#000000’;
      break;
      case ‘Replenishment (AIP, IP, RDF, Scaling)’:
      bgcolor = ‘#3EA055’;
      fgcolor = ‘#000000’;
      break;
      case ‘RP Reporting’:
      bgcolor = ‘#FF7F50’;
      fgcolor = ‘#000000’;
      break;
      case ‘SIM’:
      bgcolor = ‘#E77471’;
      fgcolor = ‘#000000’;
      break;
      case ‘Vendor MDM’:
      bgcolor = ‘#7D0552’;
      fgcolor = ‘#000000’;
      break;

      }
      return [bgcolor, fgcolor];
      }

    • Stephanie Wilson
      July 13, 2016 at 1:10 pm

      Hi Jamie,
      Try and create it on a view page instead of a new web part page, but if you still want the current page you have you may want to validate the names of the id’s and class’s to make sure they are not any different. In some cases, if they don’t have either you will need to use jquery to select child elements instead.

      I hope this helps solve your problem!

  10. Simon King
    November 3, 2016 at 12:53 am

    AWESOME!!!!!

    I went through a range of category colouring articles for SP 2013 calendars and this was by far the best to follow the instructions and it just worked – although I tinkered to suit my needs.

  11. Tyler
    November 22, 2016 at 10:46 am

    Is it possible to use this same logic to color code events based on word value(s) in the “Title” field? If so, what modifications are required to the script? Thank you!

    • November 23, 2016 at 3:12 pm

      Tyler,

      The JS is just checking for the ||| separators in the calculated column. So you can really add any field combination you want. If you wanted = “|||” & [Title] & “|||” & [Title] that should work too. So it would just look for the words in the title field in that example.

Your email is kept private. Required fields are marked *

*
*