Setting background color in Calendar web part using javascript

Question

I am trying to set the background color of Calendar overlay using javascript. I can set them using a static css file, but I would like to do that via javascript, based on certain conditions.

var allOrangeJuiceQuery = document.querySelectorAll('.ms-acal-color5.ms-acal-apanel-color5');
for (var i=0, len=allOrangeJuiceQuery.length; i<len; i=i+1|0) {
    allOrangeJuiceQuery[i].style.backgroundColor="red";
}

this code does not seem to work. If it is a css object, I can set it but not if it is a class. Any help is much appreciated.

Answer 1

try the below code,

<script type="text/javascript">

    function ApplyColor() {
        var SEPARATOR = "$|$";
        var nodes, category;
        nodes = document.getElementsByTagName("a");
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].innerText.indexOf(SEPARATOR) != -1) {
                var parts = nodes[i].innerText.split(SEPARATOR);
                if (parts[0]) {
                    var color = GetCalendarColour(parts[0]);
                    nodes[i].parentNode.parentNode.style.background = color;
                }

                if (parts[1]) {
                    nodes[i].innerText = parts[1];
                }
            }
        }
    }

    function GetCalendarColour(desc) {
        var colour;
        switch (desc.toLowerCase()) {
            case "approved":
                colour = "rgb(000,255,000)";
                break;

            case "pending":
                colour = "rgb(204,000,204)";
                break;

            case "delegated":
                colour = "rgb(255,204,000)";
                break;

            case "rejected":
                colour = "rgb(255,000,000)";
                break;

            default:
                colour = "";
        }
        return colour;
    }

    window.setInterval(function () {
        ApplyColor();
    }, 500);

</script>

SOURCE