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.


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.

|improve this answer|||||

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/

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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