This project has moved and is read-only. For the latest updates, please go here.

Using SPservices to change the calendar color based on field value

Feb 25, 2015 at 2:02 PM
Hi All,

I'm trying to us spservices to chanage the calendar view item backgroud color based on a field value. I'm new to this so please be easy on me :)

Here is what I'm using :
$j(document).ready(function () {
    operation: "GetListItems",
    //webURL: "http://devpoint",
    async: false,
    listName: "{44C1CA94-28F0-4C72-8C6C-A307CBCF3A75}",
    CAMLViewFields: "<ViewFields><FieldRef Name='TeamProfileID_x003a_ColorHEX' /></ViewFields>",
    completefunc: function (xData, Status) {
        $j(xData.responseXML).SPFilterNode("z:row").each(function () {
            var colorHEX = $j(this).attr("ows_TeamProfileID_x003a_ColorHEX");
            $j('.ms-acal-item').each(function () {
                if (colorHEX == "#FFB6C1") {
                    $j('body').append('<style> .ms-acal-item{background:#FFB6C1 !important;}</style>');
                } else if (colorHEX == "#FFA07A") {
                    $j('body').append('<style> .ms-acal-item{background:#FFA07A !important;}</style>');
                } else if (colorHEX == "#c8b2f6") {
                    $j('body').append('<style> .ms-acal-item{background:#c8b2f6 !important;}</style>');
                } else if (colorHEX == "#d2a788") {
                    $j('body').append('<style> .ms-acal-item{background:#d2a788 !important;}</style>');
The field name is "TeamProfileID_x003a_ColorHEX" and it has diffrent Hex values in each item.
When I try the code, it will apply the first one to all items as you can see in this screenshot:


The ".ms-acal-item" class is the default class that I'm using to styling the default background color:

I'm using SP2010 Foundation.
Any help?
Thanks alot
Feb 26, 2015 at 7:17 AM
Because you're adding the styling to the body, it's affecting all elements that match.

You'll need to identify something about each cell that you want to color and use a selector to grab only those cells, then apply the CSS just to them.

This isn't exactly what you need because I'm not sure what to select on, but...
        $j(xData.responseXML).SPFilterNode("z:row").each(function () {
           var colorHEX = $j(this).attr("ows_TeamProfileID_x003a_ColorHEX");

            $j('.ms-acal-item').filter(function() {
              // some sort of test to limit to the elements you want to set the color for
                "background-color": colorHEX