Hey Guys,

I would like to change the colour fo the Calendar view. If there is a certain category (a choice field), it should have a specific blue colour. I'v already found a non code solution, but I you have to create too many Views.

I'm searching  for an easier solution or a javascript code, which I can use for changing my specific (RGB) colours.

Best regards and thanks in advance

Matthias

We have a similar requirement where we need to show different color for different categories. We created a calculated column and stored the categories along with the title with "|" as separator. 

Pls find the javascript code below.

_spBodyOnLoadFunctionNames.push('WaitForCalendarToLoad');

var SEPARATOR = "|||";

function WaitForCalendarToLoad() {
    // we will slightly rewrite this existing function as defined originally in SP.UI.ApplicationPages.Calendar.debug.js
    var pwold$4a = SP.UI.ApplicationPages.CalendarNotify.$4a
    SP.UI.ApplicationPages.CalendarNotify.$4a = function () {
        pwold$4a();
        ColourCalendar();
    }

    SP.UI.ApplicationPages.CalendarViewBase.prototype.resetSelection = function () {
        ULSSPg: ;
        if (SP.UI.ApplicationPages.CalendarViewBase.prototype.$4u_1) {
            SP.UI.ApplicationPages.CalendarViewBase.prototype.$4u_1.$1D();
        }
        
        setTimeout("ColourCalendar()", 200);
        
    }

    // This code is added to hide the header (i.e. Chrome Type) of calendar
    $(".ms-WPHeader").hide();
}

function ColourCalendar() {
    if ($('a:contains(' + SEPARATOR + ')') != null) {
        $('a:contains(' + SEPARATOR + ')').each(
        function (i) {
            $box = $(this).parents('div[title]');
            var colour = GetColourCodeFromCategory(GetCategory(this.innerHTML));
            this.innerHTML = GetActualText(this.innerHTML);
            $($box).attr("title", GetActualText($($box).attr("title")));
            $box.css('background-color', colour);
        });
    }
}

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 GetColourCodeFromCategory(category) {
    var colour = null;
    switch (category.trim().toLowerCase()) {
        case 'department':
            colour = '#fef8d6';
            break;
        case 'company':
            colour = '#d0ffbc';
            break;
        case 'personal':
            colour = "#feebcd";
            break;
        case 'community':
            colour = "#c8f0ff";
            break;
    }
    return colour;
}

Hi

use a dev tool ( like F12 in IE ) and check which style is applied for that element

Next use your own css file and apply that style inside

http://erikswenson.blogspot.com/2010/01/sharepoint-2010-css-references-in.html