I have created a new calendar app, and currently when I add a new event it will be displayed as a blue colored box.

I have overlayed other calendars inside the current calendar, and when I overlay a calendar I can change its event color. But when the user clicks on the calendar, its events will always be blue.

Is there a way to change the event color codes for a calendar without being overlayed?


3 Answers 3


To change the default event colour for an individual calendar in SP2013, add a Content Editor Web Part to the page and apply the following css style within the HTML of the Web Part.

<style type="text/css">
div.ms-acal-item {
 background-color: #288054;

This example is applying a green background colour, but you can change the HEX colour code to anything you require.

  • I use this method to color-code calendar items based on keyword filters in the event title. CSS is a beautiful thing.
    – Omegacron
    Commented Jul 30, 2015 at 19:01

Create categories for your events and overlay the views of the calendar.


Or you work with a calculated column.


I only tested the first solution and it works fine.


If you want a code way of doing it I have done this previously on SharePoint 2010 calendars.

I put my categories (the thing I want to colour code on) in the title of my calendar view (daily / weekly and monthly). I have this as a calculated field.

Then I just stick some javascript on the page using a content editor web part with the following content in it. You may be able to change it to your needs (and optimise it - get the right anchors inside the calendar, use css classes, change the if elses into a mapping etc!). It simply looks for any links with the right wording in it and alters a style or two. Sub calendars may be more elegant, but this worked well enough for my requirements.


// Lets colour by project - change the if statement below to add more....
document.addEventListener("DOMContentLoaded", function(event) { 

    // Colouring function
    function colourCalenderElement(element, colour) {
        var tableElement = element.closest("table");
        if(tableElement) {
            tableElement.style.border = "5px solid "+colour;
            tableElement.style.padding = "10px";
            tableElement.style.width = "100%";

    function colourCalendar() {
        var anchors = document.querySelectorAll('a');
        var i = 0;

        for(i=0; i< anchors.length; i++) {
            var text = anchors[i].text;
            if(text.indexOf("Blackburn - ")>=0) { 
            } else if(text.indexOf("ERYC - ")>=0) { 
            } else if(text.indexOf("Harrow - ")>=0) { 
            } else if(text.indexOf("Hull - ")>=0) { 
            } else if(text.indexOf("Leeds - ")>=0) { 
            } else if(text.indexOf("Redcar - ")>=0) { 
            } else if(text.indexOf("Trafford - ")>=0) { 
            } else if(text.indexOf("West Suffolk - ")>=0) { 

        // Call me again in 3 seconds
        setTimeout(colourCalendar, 3000);


// Polyfill for closest
if (window.Element && !Element.prototype.closest) {
    Element.prototype.closest = 
    function(s) {
        var matches = (this.document || this.ownerDocument).querySelectorAll(s),
            el = this;
        do {
            i = matches.length;
            while (--i >= 0 && matches.item(i) !== el) {};
        } while ((i < 0) && (el = el.parentElement)); 
        return el;


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.