Event category colours

[morat]

Here are my personalized style entries.

* <profile folder>\chrome\userChrome.css

Code: Select all

/* Thunderbird userChrome.css */

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

calendar-month-day-box-item[categories^="anniversary"] .calendar-color-box {
  background-color: var(--category-anniversary-color) !important;
  color: white !important;
}
calendar-month-day-box-item[categories^="birthday"] .calendar-color-box {
  background-color: var(--category-birthday-color) !important;
  color: white !important;
}
calendar-month-day-box-item[categories^="business"] .calendar-color-box {
  background-color: var(--category-business-color) !important;
  color: black !important;
}
calendar-month-day-box-item[categories^="calls"] .calendar-color-box {
  background-color: var(--category-calls-color) !important;
  color: black !important;
}
calendar-month-day-box-item[categories^="clients"] .calendar-color-box {
  background-color: var(--category-clients-color) !important;
  color: black !important;
}
calendar-month-day-box-item[categories^="competition"] .calendar-color-box {
  background-color: var(--category-competition-color) !important;
  color: black !important;
}
calendar-month-day-box-item[categories^="cowabunga"] .calendar-color-box {
  background-color: var(--category-cowabunga-color) !important;
  color: black !important;
}
calendar-month-day-box-item[categories^="customer"] .calendar-color-box {
  background-color: var(--category-customer-color) !important;
  color: black !important;
}
calendar-month-day-box-item[categories^="favorites"] .calendar-color-box {
  background-color: var(--category-favorites-color) !important;
  color: white !important;
}
calendar-month-day-box-item[categories^="follow_up"] .calendar-color-box {
  background-color: var(--category-follow_up-color) !important;
  color: white !important;
}
calendar-month-day-box-item[categories^="gifts"] .calendar-color-box {
  background-color: var(--category-gifts-color) !important;
  color: black !important;
}
calendar-month-day-box-item[categories^="holidays"] .calendar-color-box {
  background-color: var(--category-holidays-color) !important;
  color: white !important;
}
calendar-month-day-box-item[categories^="ideas"] .calendar-color-box {
  background-color: var(--category-ideas-color) !important;
  color: white !important;
}
calendar-month-day-box-item[categories^="issues"] .calendar-color-box {
  background-color: var(--category-issues-color) !important;
  color: black !important;
}
calendar-month-day-box-item[categories^="meeting"] .calendar-color-box {
  background-color: var(--category-meeting-color) !important;
  color: black !important;
}
calendar-month-day-box-item[categories^="miscellaneous"] .calendar-color-box {
  background-color: var(--category-miscellaneous-color) !important;
  color: black !important;
}
calendar-month-day-box-item[categories^="personal"] .calendar-color-box {
  background-color: var(--category-personal-color) !important;
  color: white !important;
}
calendar-month-day-box-item[categories^="projects"] .calendar-color-box {
  background-color: var(--category-projects-color) !important;
  color: black !important;
}
calendar-month-day-box-item[categories^="public_holiday"] .calendar-color-box {
  background-color: var(--category-public_holiday-color) !important;
  color: black !important;
}
calendar-month-day-box-item[categories^="status"] .calendar-color-box {
  background-color: var(--category-status-color) !important;
  color: black !important;
}
calendar-month-day-box-item[categories^="suppliers"] .calendar-color-box {
  background-color: var(--category-suppliers-color) !important;
  color: white !important;
}
calendar-month-day-box-item[categories^="travel"] .calendar-color-box {
  background-color: var(--category-travel-color) !important;
  color: white !important;
}
calendar-month-day-box-item[categories^="vacation"] .calendar-color-box {
  background-color: var(--category-vacation-color) !important;
  color: white !important;
}

All default categories and colors except I added the Cowabunga category with the orange color as a test.

[Code Name]

morat,

I ran the JavaScript message pane coding in the Error Console and it successfully toggled off the message pane. (I enabled it again in View.)

I pasted the lengthy JavaScript coding in the Error Console and hit Enter. It changed the coding in the (Error Console) to colors of pink, blue, navy, green, purple and gray.

What do I do with it now?

[Code Name]

Here are my personalized style entries.

* <profile folder>\chrome\userChrome.css

Code: Select all

/* Thunderbird userChrome.css */

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

calendar-month-day-box-item[categories^="anniversary"] .calendar-color-box {
  background-color: var(--category-anniversary-color) !important;
  color: white !important;
}
calendar-month-day-box-item[categories^="birthday"] .calendar-color-box {
  background-color: var(--category-birthday-color) !important;
  color: white !important;
}
calendar-month-day-box-item[categories^="business"] .calendar-color-box {
  background-color: var(--category-business-color) !important;
  color: black !important;
}
calendar-month-day-box-item[categories^="calls"] .calendar-color-box {
  background-color: var(--category-calls-color) !important;
  color: black !important;
}
calendar-month-day-box-item[categories^="clients"] .calendar-color-box {
  background-color: var(--category-clients-color) !important;
  color: black !important;
}
calendar-month-day-box-item[categories^="competition"] .calendar-color-box {
  background-color: var(--category-competition-color) !important;
  color: black !important;
}
calendar-month-day-box-item[categories^="cowabunga"] .calendar-color-box {
  background-color: var(--category-cowabunga-color) !important;
  color: black !important;
}
calendar-month-day-box-item[categories^="customer"] .calendar-color-box {
  background-color: var(--category-customer-color) !important;
  color: black !important;
}
calendar-month-day-box-item[categories^="favorites"] .calendar-color-box {
  background-color: var(--category-favorites-color) !important;
  color: white !important;
}
calendar-month-day-box-item[categories^="follow_up"] .calendar-color-box {
  background-color: var(--category-follow_up-color) !important;
  color: white !important;
}
calendar-month-day-box-item[categories^="gifts"] .calendar-color-box {
  background-color: var(--category-gifts-color) !important;
  color: black !important;
}
calendar-month-day-box-item[categories^="holidays"] .calendar-color-box {
  background-color: var(--category-holidays-color) !important;
  color: white !important;
}
calendar-month-day-box-item[categories^="ideas"] .calendar-color-box {
  background-color: var(--category-ideas-color) !important;
  color: white !important;
}
calendar-month-day-box-item[categories^="issues"] .calendar-color-box {
  background-color: var(--category-issues-color) !important;
  color: black !important;
}
calendar-month-day-box-item[categories^="meeting"] .calendar-color-box {
  background-color: var(--category-meeting-color) !important;
  color: black !important;
}
calendar-month-day-box-item[categories^="miscellaneous"] .calendar-color-box {
  background-color: var(--category-miscellaneous-color) !important;
  color: black !important;
}
calendar-month-day-box-item[categories^="personal"] .calendar-color-box {
  background-color: var(--category-personal-color) !important;
  color: white !important;
}
calendar-month-day-box-item[categories^="projects"] .calendar-color-box {
  background-color: var(--category-projects-color) !important;
  color: black !important;
}
calendar-month-day-box-item[categories^="public_holiday"] .calendar-color-box {
  background-color: var(--category-public_holiday-color) !important;
  color: black !important;
}
calendar-month-day-box-item[categories^="status"] .calendar-color-box {
  background-color: var(--category-status-color) !important;
  color: black !important;
}
calendar-month-day-box-item[categories^="suppliers"] .calendar-color-box {
  background-color: var(--category-suppliers-color) !important;
  color: white !important;
}
calendar-month-day-box-item[categories^="travel"] .calendar-color-box {
  background-color: var(--category-travel-color) !important;
  color: white !important;
}
calendar-month-day-box-item[categories^="vacation"] .calendar-color-box {
  background-color: var(--category-vacation-color) !important;
  color: white !important;
}

All default categories and colors except I added the Cowabunga category with the orange color as a test.

Entering the lengthy coding didn't do anything. But I'm not sure why it didn't.

I entered your personalized style entries and it changed some of my event colors to my category colors, which helps me get started.

What confuses me is what the 'lengthy coding' is supposed to do because it looks nothing like your personalized style entries you shared.

Am I to modify (and add when necessary) to your personalized style entry coding to equal my category names? How about the 'lengthy coding' - where does that play a part?

[morat]

It changed the coding in the (Error Console) to colors of pink, blue, navy, green, purple and gray.

Hmm. That makes no sense to me.

The lengthy JavaScript code should have popped up a main window alert telling you that your personalized style entries are copied to the system clipboard.

You should have then pasted your personalized style entries into the userChrome.css file, saved the userChrome.css file, then restarted the application.

[Code Name]

Using your personalized style coding - you have a few category names (e.g. announcements & personal) the same as I do, and those events are colored with the category color.

However, when I try to add or modify your coding list (in the userChrome.css file) to coincide with my categories it does not change the event to the category color. I am saving the changes and restarting Tb. What am I not doing right?

[Code Name]

It changed the coding in the (Error Console) to colors of pink, blue, navy, green, purple and gray.

Hmm. That makes no sense to me.

The lengthy JavaScript code should have popped up a browser window alert telling you that your personalized style entries are copied to the system clipboard.

You should have then pasted your personalized style entries into the userChrome.css file, saved the userChrome.css file, then restarted the application.

The 'lengthy coding' was copied to system clipboard...and I clicked on OK.

Was there anything else I needed to do pertaining to what was copied to the system clipboard? Do I need to somehow retrieve or paste what is on the system clipboard somewhere? Or, once it is saved to the system clipboard nothing more needs to be done with it?

[morat]

You won't see a main window alert box if there is an error running the JavaScript code.

I will ask another user to test the JavaScript code after the holidays.

[Code Name]

Maybe this helps...

This is what the Error Console's Filter Output displays after I run the lengthy JavaScript code:

(function () {
var categoryList = cal.category.fromPrefs();
var arr = [];
for (var i = 0; i < categoryList.length; i++) {
var categoryName = cal.view.formatStringForCSSRule(categoryList);…


Uncaught ReferenceError: cal is not defined
<anonymous> debugger eval code:2
<anonymous> debugger eval code:35
getEvalResult resource://devtools/server/actors/webconsole/eval-with-debugger.js:231
evalWithDebugger resource://devtools/server/actors/webconsole/eval-with-debugger.js:162
evaluateJS resource://devtools/server/actors/webconsole.js:1134
evaluateJSAsync resource://devtools/server/actors/webconsole.js:1028
makeInfallible resource://devtools/shared/ThreadSafeDevToolsUtils.js:103

[Code Name]

Am I supposed to use the /* and */ in the userChrome.css before and after the lengthy JavaScript coding?

[Code Name]

You won't see a main window alert box if there is an error running the JavaScript code.

I will ask another user to test the JavaScript code after the holidays.

Thank you! I appreciate all your help...

[Code Name]

Okay, I'm getting there!

I figured out that my events using category names that are a single word (e.g. family, personal, travel, vacations) works and makes the color change to that of the category as expected. However, I have numerous category names that are multiple words (e.g. Check Status, Billing/Payment/Statement, Orders/Purchases) that do not work.

I thought I needed to use underscore ( _ ) between the words when I add them to the userChrome.css file for it to work with multiple worded categories, but that doesn't work either. There must be something I'm missing...

[morat]

ReferenceError: cal is not defined

I get |cal| and |window.cal| as an object in the error console.

Code: Select all

cal;

Code: Select all

window.cal;

You can search for the calendar.category.color.* preferences in the about:config window to help figure out the css selector.

I added the Alpha Omega category with the red color as a test.

Here is the style entry.

Code: Select all

calendar-month-day-box-item[categories^="alpha_omega"] .calendar-color-box {
  background-color: var(--category-alpha_omega-color) !important;
  color: white !important;
}

I tested the style entry. It works here.

[Code Name]

I added the alpha_omega coding to my userChrome.css and added the category for Alpha Omega with red for the color in my calendar...and it worked perfectly.

I can't figure out why only just a few other categories are working and not all of them.

What am I supposed to do with the cal; and window.cal; coding?

[morat]

ReferenceError: cal is not defined

What am I supposed to do with the cal; and window.cal; coding?

Nothing.

If the |cal| object is not defined, then that's why the JavaScript code fails in the error console.

Try running the following JavaScript code using the error console. I rewrote the JavaScript code without the |cal| object.

Code: Select all

(function () {
  var scope = {};
  ChromeUtils.import("resource:///modules/calendar/calUtils.jsm", scope);
  var categoryList = scope.cal.category.fromPrefs();
  var arr = [];
  for (var i = 0; i < categoryList.length; i++) {
    var categoryName = scope.cal.view.formatStringForCSSRule(categoryList[i]);
    var backColor = Components.classes["@mozilla.org/preferences-service;1"].
      getService(Components.interfaces.nsIPrefService).
        getBranch("calendar.category.color.").getCharPref(categoryName, "#E0E0E0");
    var foreColor = scope.cal.view.getContrastingTextColor(backColor);
    arr.push('calendar-month-day-box-item[categories^="' + categoryName + '"] .calendar-color-box {');
    arr.push("  background-color: var(--category-" + categoryName + "-color) !important;");
    arr.push("  color: " + foreColor + " !important;");
    arr.push("}");
  }
  switch (1) {
    case 1:
      // copy style entries to clipboard
      var clipboard = Components.classes["@mozilla.org/widget/clipboardhelper;1"].
        getService(Components.interfaces.nsIClipboardHelper);
      clipboard.copyString(arr.join("\r\n"));
      alert("Style entries copied to clipboard.");
      break;
    case 2:
      // run once to test style entries and run twice to reset
      var ios = Components.classes["@mozilla.org/network/io-service;1"].
        getService(Components.interfaces.nsIIOService);
      var uri = ios.newURI("data:text/css," + encodeURIComponent(arr.join("\n")), null, null);
      var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].
        getService(Components.interfaces.nsIStyleSheetService);
      var type = sss.USER_SHEET;
      if (sss.sheetRegistered(uri, type)) sss.unregisterSheet(uri, type);
      else sss.loadAndRegisterSheet(uri, type);
      break;
  }
})();

If that doesn't work, then I don't know a solution.

[Code Name]

I am using your re-written JavaScript coding and that seemed to really get things working, until...

Suddenly some events just mysteriously stopped working! One minute what I had accomplished was working fine and I closed Tb and restarted it again and some of the events (but not all) that had been working (i.e. events had category colors) just stopped working and instead they displayed the calendar color. I didn't change anything and I didn't add anything - I opened Tb (working), closed Tb and opened Tb again (some not working). Even the test 'Alpha Omega' category I kept in the .css list and made an event for in the calendar (choosing red for the color) stopped working and reverted to my navy blue calendar color! Have you ever experienced something like this before where something worked and suddenly it stopped working for no apparent reason?

Maybe there's a process that I'm not following to the 't'. Just so you'll know, I'm using your personalized category list and modifying the category names to match my categories, and where necessary changing the font color from black to white, or visa-versa. I would change 2-3 and save/exit the userChrome.css file and check the Tb calendar to see if the changes were made. That seemed to work well until suddenly some (but not all) of the categories reverted back to only displaying the calendar color whereas literally just a moment before it was displaying the category color as was expected.

So, playing around with it trying to make some sense out of things:
If I copy the category coding for one of my categories further down my userChrome.css list and paste it first in line (under the @namespace) at the top of my userChrome.css list (without changing anything else or even removing the category coding that I copied from where it was originally in the list) that particular event works again with the correct category color. I can do this for about a dozen categories (one at a time, saving the userChrome.css file each time and exiting, then restarting Tb each time to confirm it works, and so on), but after doing about a dozen or so categories like that it just reverts back to not working again and only displaying the calendar color instead of the category color. Not all stop working, but 4-5 do stop working.
Any ideas?

Also, I have a handful of categories that I'm leaving until last to add to the userChrome.css file that have multiple words using '&' symbol and forward slashes '/' (e.g. 'Season & Time Change', 'Information/Planning/Hearing') that I couldn't get to work, so I removed them and plan to add them after I learn how to deal with the '&' symbol and forward slashes '/'. Do you know what I need to do for those?