First time poster, though I've gotten alot of excellent info off this site in the past. I have a calendar I'm working on that's giving me fits. I have set up several event categories and associated views to each category with different colors, which I can display via calendar overlays. I'd like to display more colors than there are available overlays through jquery.

For each acal-color# div class, sharepoint is adding a title attribute as a string in the following format: [category][range][project][assigned to]. I need to change the color of the event based on "category" and "project" values. I put together a jfiddle with what I thought would be the solution, but I can't seem to get it to work via a script snippet in Sharepoint. Jfiddle is here:


If there's any additional info I can provide please let me know. Any help would be greatly appreciated.

2 Answers 2


Got it working using the following:

function chCol() {
  setInterval(changeColor, 0);
function changeColor() {
  $('div.ms-acal-color3[title*="Index"]').css("background-color", "rgba(0, 140, 255, 0.6)");
  $('div.ms-acal-color4[title*="Index"]').css("background-color", "rgba(0, 100, 255, 0.6)");
  $('div.ms-acal-color5[title*="Index"]').css("background-color", "rgba(0, 200, 255, 0.6)");
ExecuteOrDelayUntilScriptLoaded(chCol, "sp.ui.applicationpages.calendar.js");

Would definitely be interested in knowing if there's a more efficient way of doing this.


You can use CSS instead of JS:

.ms-acal-color# {
.ms-acal-selcolor# {
.ms-acal-apanel-color# {
 BORDER-COLOR: #xxxxxx;

More detail at http://davidlozzi.com/color-code-sharepoint-calendar/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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