Color Calendar and Icons in 10 easy Steps (en)

Color Calender and Icons in  easy Steps en Title
, ,

Let’s go! If you don’t have a calendar already, click on the cogwheel, site contents and then add an app.

Color Calender and Icons in 10 easy Steps (en)_1


2. Add a Calendar and give it a name. In this guide I took the name “Eventcalendar”.

Color Calender and Icons in 10 easy Steps (en)_2


3. Add a new column. You can do that in two different ways. Click on List Settings and then Create Column or directly like in the picure below:

Color Calender and Icons in 10 easy Steps (en)_3


4. This column will show the icon and the category of the events.
In my case the name is “kind” and the choice values are: Fair, Release, Lecture and something else.

Color Calender and Icons in 10 easy Steps (en)_4


5. Add another column with the name “kindtitle” and type “calculated” like in the next picure. The column will help us to find the right items and change the background color.
The formular is: = “|||” & [kind] & “|||” & [Title]
Be careful if you copy the above formular that the apostrophes are correct.

Color Calender and Icons in 10 easy Steps (en)_5


6. We are almost there. 🙂
Now create or edit the view of your calendar and change the month, week and dayview’s title to the newly created column (kindtitle). In my tutorial I used the default view.

Color Calender and Icons in 10 easy Steps (en)_6


7. Edit the site and add a content editor. As you maybe have already seen, the title in the events has now changed.

Color Calender and Icons in 10 easy Steps (en)_7


8. Now the magic happens. 🙂
Add the following script into the content editor. Click on “Click here to add new content”, then “Edit Source” and then paste the script and save everything.
If you have different choice options you have to change them in the script (Fair, Release, Lecture, something else). You can also change the colors (bgcolor = background color) and (fgcolor = text color).

 </style><script src="" type="text/javascript"></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);
 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 'Fair':
 bgcolor = '#ECD078';
 fgcolor = '#000000';
 case 'Release':
 bgcolor = '#D95B43';
 fgcolor = '#000000';
 case 'Lecture':
 bgcolor = '#C02942';
 fgcolor = '#000000';
 case 'something else':
 bgcolor = '#53777A';
 fgcolor = '#000000';
 return [bgcolor, fgcolor];


Color Calender and Icons in 10 easy Steps (en)_8

9. Now you have it! Your own calender with different colors for different events. Nice job!

Color Calender and Icons in 10 easy Steps (en)_9


10. If you want to add the calender to a different site as a webpart, don’t forget to add the Content Editor with the script.

I did that on the start page “events” and added on the right side the calendar in a different view. (Kind, Title, Start date, End date).
This list will give the user an overview in a list style but instead of the text you can display icons.

Color Calender and Icons in 10 easy Steps (en)_10


Save the following script and add it to your “Event overview listview”.
As always, please double check the values of your own environmet. (Fair, Release, Lecture, something else) and of course the image source.

// created by Patrick - don't be
(function () {
var kategorieFieldCtx = {};
kategorieFieldCtx.Templates = {};
kategorieFieldCtx.Templates.Fields = {
"kind": {
"View": KategorieViewTemplate
function KategorieViewTemplate(ctx) {
var _kategorie = ctx.CurrentItem.kind;
if (_kategorie == 'Release')
return "<img src='http://sp13/events/SiteAssets/release_16.png'/>";
if (_kategorie == 'Fair')
return "<img src='http://sp13/events/SiteAssets/messe_16.png'/>";
if (_kategorie == 'Lecture')
return "<img src='http://sp13/events/SiteAssets/vortrag_16.png'/>";
return "<img src='http://sp13/events/SiteAssets/etwasAnderes_16.png'/>";

Where and how you save this you can see in a other blog post here. After that the start page should look similar to mine:

Color Calender and Icons in 10 easy Steps (en)_11


The icons Fair, Release, Lecture and something else are free for download in my OneDrive here.
Also the scripts for the Content Editor (background color) and the javascript (rendering of the icons) are included. Please be sure if you download it, that you choose the english versions.

EN Color Calendar and Icons – ContentEditor.txt
EN Color Calendar and Icons – Javascript.txt

That’s it. I hope you like this post.
If so, please share it, follow me or just smile in front of your computer if everything works. 😉

If you have any questions, don’t be afraIT to ask or comment this post below.

6 responses to “Color Calendar and Icons in 10 easy Steps (en)”

  1. Hello
    I tried what is described here, the only differences are that my choice field is named “Business Lines” and the calculated one, “Color”. As soon as I apply the script, the values simply disappear from the calendar.

    I didn’t seen anything to change in the script as nothing seems to relate to the field names.

    where did I go wrong ?



    • Hi Christian,

      please make sure that the formular is correct. Yours should be = “|||” & [Business Lines] & “|||” & [Title]

      Also check that you have choosen your column Color in the view.

      Hope this helps. If not, please let ne know.

  2. Patrick,

    I have tried several methods as mentioned in your blog. This solution doesn’t work. I get the “|||” working, but after I apply the script the page strips the events and nothing is shown.

    Thank you.

    • Hi Andres,

      please make sure you have choosen the right column for your view. See step 6 in the blog.

      Hope this helps.
      Cheers Patrick

    • Hey Andres,
      there are two single quotes in line 11 around SEPARATOR where only one should be and in line 18 the semicolon at the end is missing.

      Replace those lines with these:
      Line 11: var query = ‘a:contains(‘ + SEPARATOR + ‘)’;
      Line 18: anchor.text(GetActualText(anchor.text()));

      • Hi Wuhasa,

        thanks for looking in the script. I updated it with your lines.

        Greetings from Germany

Leave a Reply

Your email address will not be published. Required fields are marked *