3

I am using SharePoint Online in the Office 365 environment. Currently, I have a calendar view of a list (not an actual calendar app for various other reasons). Using Javascript, I am looking at the class name of each item and then determining how to color code each event. However, the default color of text is white (which is located somewhere I probably have no business messing with). As each entry is a link to the item in the list, I need to change the default color of individual entries. This is the script I am using (I AM NEW TO CODING) so this may look ugly to some people and honestly, I am struggling here.

function ApplyColor() {
  var nodes = document.getElementsByClassName("ms-acal-item");
  for (var i = 0; i < nodes.length; i++) {
    var text = nodes[i].getAttribute('title');
    if (text.includes('*Mission')) {
      nodes[i].style.background = "orangered";
    } else if (text.includes('Mission')) {
      nodes[i].style.background = "chartreuse";
    } else if (text.includes('.Mission')) {
      nodes[i].style.background = "black";
    } else if (text.includes('Information Only')) {
      nodes[i].style.background = "lightskyblue";
    } else if (text.includes('Meeting Planning')) {
      nodes[i].style.background = "lightskyblue";
    } else if (text.includes('Rehearsal')) {
      nodes[i].style.background = "dodgerblue";
    } else if (text.includes('Formation')) {
      nodes[i].style.background = "yellow";
    }
  }
}

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

When an event is chartreuse, the white text on the lime green is nearly unreadable--hence the need to change the text color to say, black.
Is there a "simple" way to identify the link text and change it as well? I also understand that there are different forms of a link (such as visited, hover, etc.) which may make things even more difficult.

Any help is GREATLY appreciated. joe-

2

You can try changing your function to this:

function ApplyColor() {
  var nodes = document.getElementsByClassName("ms-acal-item");
  for (var i = 0; i < nodes.length; i++) {
    var text = nodes[i].getAttribute('title');
    if (text.includes('*Mission')) {
      nodes[i].style.background = "orangered";
    } else if (text.includes('Mission')) {
      nodes[i].style.background = "chartreuse";
      var charttreusechildren = nodes[i].querySelectorAll("a,div");
      charttreusechildren.forEach(function(v) {v.style.cssText = "color : black !important";});
    } else if (text.includes('.Mission')) {
      nodes[i].style.background = "black";
    } else if (text.includes('Information Only')) {
      nodes[i].style.background = "lightskyblue";
    } else if (text.includes('Meeting Planning')) {
      nodes[i].style.background = "lightskyblue";
    } else if (text.includes('Rehearsal')) {
      nodes[i].style.background = "dodgerblue";
    } else if (text.includes('Formation')) {
      nodes[i].style.background = "yellow";
    }
  }
}

I've only added these two lines:

var charttreusechildren = nodes[i].querySelectorAll("a,div");
charttreusechildren.forEach(function(v) {v.style.cssText = "color : black !important";});

You can copy those two lines in any if/else branch where needed.

Btw. it would be better if you had started working on this with jquery and some css, but nevertheless, the important thing is that it does the job.

  • 2
    THANK YOU! This works perfectly. I have been working on this for a week now. I just wish I understood this. – pepsijoe Jan 9 at 19:12

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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