How can I change the default color for calendar events, without overlaying?

Question

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?

Answer 1

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;
}
</style>

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

Answer 2

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

http://sharepointsolutions.com/sharepoint-help/blog/2012/10/color-code-events-on-a-sharepoint-calendar/

Or you work with a calculated column.

http://howididit-sharepoint.blogspot.de/2013/01/color-calendar-events-by-column-value.html

I only tested the first solution and it works fine.

Answer 3

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.

<script>

// 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) { 
                colourCalenderElement(anchors[i],"#006600"); 
            } else if(text.indexOf("ERYC - ")>=0) { 
                colourCalenderElement(anchors[i],"#007569"); 
            } else if(text.indexOf("Harrow - ")>=0) { 
                colourCalenderElement(anchors[i],"#4f107a"); 
            } else if(text.indexOf("Hull - ")>=0) { 
                colourCalenderElement(anchors[i],"#e98016"); 
            } else if(text.indexOf("Leeds - ")>=0) { 
                colourCalenderElement(anchors[i],"#1c5571"); 
            } else if(text.indexOf("Redcar - ")>=0) { 
                colourCalenderElement(anchors[i],"#f7901e"); 
            } else if(text.indexOf("Trafford - ")>=0) { 
                colourCalenderElement(anchors[i],"#0089b0"); 
            } else if(text.indexOf("West Suffolk - ")>=0) { 
                colourCalenderElement(anchors[i],"#873984"); 
            } 
        }

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

    colourCalendar();
});

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

</script>