Event category colours

[riverstyx]

Hi,

Now that calendar tweaks no longer works with current versions of thunderbird, is there an alternative method of making the entire event header change colour according it's category, rather than just the small rectangle at the end?

Thanks.

[Code Name]

'Calendar Tweaks' works with current Tb versions 68.0 - 73.0. What Tb version are you using?

[WaltS48]

My solution would be to create new calendars with the colors of the Categories I wanted to use.

That could be problematic with network calendars though.

I don't use categories.

[riverstyx]

'Calendar Tweaks' works with current Tb versions 68.0 - 73.0. What Tb version are you using?

I'm just setting up a new laptop, so using the current release 78.2.0

[riverstyx]

My solution would be to create new calendars with the colors of the Categories I wanted to use.

That could be problematic with network calendars though.

I don't use categories.

Yeah, I'm using provider for google calendar, so it is synced with my phone, and categories have always been part of my work flow (I add appointments to a 'Work Completed' category after completion, and subsequently to an 'Invoiced' category, which helps me keep track of my work). Having the solid event colours that calendar tweaks provided was really useful to see at-a-glance, if there was anything I still needed to invoice etc.

[sabretooth04]

Hi,

Now that calendar tweaks no longer works with current versions of thunderbird, is there an alternative method of making the entire event header change colour according it's category, rather than just the small rectangle at the end?

Thanks.

I have the same issue now. I removed all the color and categories under the options for the calendar and put in just my own 4 with the colors I used to use. It does the same thing. It puts up a color with a small rectangle on the right side with the color. Is there a way to resolve this please? Version 78.4.3.

[Code Name]

Hi,

Now that calendar tweaks no longer works with current versions of thunderbird, is there an alternative method of making the entire event header change colour according it's category, rather than just the small rectangle at the end?

Thanks.

I have the same issue now. I removed all the color and categories under the options for the calendar and put in just my own 4 with the colors I used to use. It does the same thing. It puts up a color with a small rectangle on the right side with the color. Is there a way to resolve this please? Version 78.4.3.

I miss the Calendar Tweaks add-on too. Bugzilla is trying to get someone to figure out what the Calendar Tweaks add-on did and come up with a patch. So far no one has come forward, willing or able to do it.

I loved how Calendar Tweaks reversed the Calendar colors and Category colors, which displayed 95% of the event bar with the Category color and only 5% of the right-hand tip of the event bar with the Calendar color. That is the way it should be as default. Or, give the owner the option to reverse the Calendar and Category colors.

I use 7 Calendars (my Primary Calendar plus Birthdays, Holidays, Golf, Car Stuff, Grandchildren, Sports) with about 50 Categories (e.g. Appointments (Non-Health), Billing/Payment/Statement, Computer Related, Courtesy Action, Deaths/Visitations/Funerals, Dinner Plans, Family, Financial/Business/Investments, Golf, Health Related, House Stuff, Meetings/Classes/Courses/Programs, Miscellaneous, Orders - In-person/Phone/Online, Phone Calls, Presents/Gifts/Shopping, Projects/Repairs/Service, Reminders, Special Health Events, Special Medications, Trips/Travel, Sports/Games, Vacation, Visits/Parties/Get Togethers, etc., etc.). About 80% of all my events are under my Primary Calendar. All the different Categories have different colors, so when I had Calendar Tweaks my calendar displayed the Categories colors on 95% of the event bar and the right-hand tip of the event bar (5%) had the Calendar color, which made it very easy to see the different category events. Now, without Calendar Tweaks, most all the event bars are colored with mainly only one color - my Primary Calendar color, which doesn't make it easy to see the different category events.

There are currently three (3) Bugzilla reports pertaining to adding something similar to Calendar Tweaks to the Tb Calendar - two are 'enhancement' suggestions and the other one is a 'defect/problem':
► https://bugzilla.mozilla.org/show_bug.cgi?id=1674896
► https://bugzilla.mozilla.org/show_bug.cgi?id=1664731
► https://bugzilla.mozilla.org/show_bug.cgi?id=1674912

Hopefully the Tb experts will find someone to provide a patch and incorporate what Calendar Tweaks did to the v78+ calendar to make it better.

In the meantime, all you can really do is add calendars to match what your categories were in pre-v78 Tb so the event colors are easily recognized. In my case I have far too many categories to add them as calendars. I'll have to wait and hope Tb makes what Calendar Tweaks did as part of the Tb calendar. I'm not holding my breath.

[sabretooth04]

Whoa!!!! I think I found a solution. I was setting the Category not the Calendar! I deleted all the Category colors and put in my own colors that did not work except to put that small bar on the right side with the color when using Calendar reminder.

I need to use the top setting, Calendar for the color! That works with no add ons. Using those custom colors work fine and it puts the correct color the the small bar on the right when using Category colors. Just leave the Category to 'None". Would be nice to show the color when setting the reminder itself.

I'm good now.

[Code Name]

Whoa!!!! I think I found a solution. I was setting the Category not the Calendar! I deleted all the Category colors and put in my own colors that did not work except to put that small bar on the right side with the color when using Calendar reminder.

I need to use the top setting, Calendar for the color! That works with no add ons. Using those custom colors work fine and it puts the correct color the the small bar on the right when using Category colors. Just leave the Category to 'None". Would be nice to show the color when setting the reminder itself.

I'm good now.

I'm glad you are happy with your 'solution', but the Calendar Tweaks add-on was much better with it reversing how the event bar was colored - the Category color displayed on 95% of the calendar event bar and the Calendar color displayed on the right-hand tip end of the calendar event bar.

The way the Tb calendar event colors are defaulted now really makes no sense - because everybody is going to have far more Categories than they have Calendars. Most people will have only 1 to maybe as many as 4 Calendars, but they'll likely have dozens of different categories. The way it is now, it would be like a car manufacturer offering their line of cars in say 30 different colors, but only the door handles [category] are painted those 30 different colors...and all their car bodies [calendar] are painted only one or up to maybe 4 different colors. When all the cars are only one to maybe 4 colors, when looking at them in mass traffic (the calendar) and wanting to quickly identify one particular category - unless you really narrow your focus (eyes) on each individual car (event) to see what color the door handle is, it makes it difficult to identify the car (the event) you are looking for.

It seems to me it would be very easy for Tb to reverse how the Calendar colors and Category event colors are displayed on the calendar event bars. Either reverse their colors or offer the Tb user an option to be able to reverse them.

[morat]

@riverstyx

You could use the error console to copy your personalized style entries to the system clipboard for use in the userChrome.css file.

userChrome.css
http://kb.mozillazine.org/UserChrome.css

Remember to set the toolkit.legacyUserProfileCustomizations.stylesheets preference to true, then restart.

Here is an example to apply category color to the item box for the Multiweek & Month views.

Code: Select all

(function () {
  var categoryList = cal.category.fromPrefs();
  var arr = [];
  for (var i = 0; i < categoryList.length; i++) {
    var categoryName = 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 = 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;
  }
})();

I got the code from the calendartweaks-calendar-views.js file.

Calendar Tweaks
http://addons.thunderbird.net/thunderbird/addon/14384

P.S.

How to remove the category box. ( i.e. small rectangle at end )

Code: Select all

.calendar-category-box-gradient {
  width: 0 !important;
}

How to change the category box background to the default item box background.

Code: Select all

.calendar-category-box-gradient {
  background-color: #a8c2e1 !important;
}

Reference
http://searchfox.org/comm-esr78/source/ ... -views.css
http://searchfox.org/comm-esr78/source/ ... ersion.txt

[Code Name]

morat - I need some hand-holding help to walk me through this.

► I have added a file named 'chrome' to my Profile that have these files in it:
userChrome.css
userContent.css

► The userChrome.css file has this coding in it:
/*
* Do not remove the @namespace line -- it's required for correct functioning
*/
@namespace url("http://www.mozilla.org/keymaster/gateke ... s.only.xul"); /* set default namespace to XUL */


► The userContent.css file has this in it:
@namespace url(http://www.w3.org/1999/xhtml); ← Does that look correct?


► I have changed the Config Editor for 'toolkit.legacyUserProfileCustomizations.stylesheets' preference to true.


Now I guess I'm ready to add the following coding that you provided (from your above post) but which file do I add it to?

(function () {
var categoryList = cal.category.fromPrefs();
var arr = [];
for (var i = 0; i < categoryList.length; i++) {
var categoryName = cal.view.formatStringForCSSRule(categoryList);
var backColor = Components.classes["@mozilla.org/preferences-service;1"].
getService(Components.interfaces.nsIPrefService).
getBranch("calendar.category.color.").getCharPref(categoryName, "#E0E0E0");
var foreColor = 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;
}
})();

~~~~~~~~~~~~~~~~~~~~~

• Is all this correct?
• Is there anything else I need to do pertaining to this coding, such as adding /* or */ somewhere - like before or after the coding you provided?
• To which file do I add it - I presume I add it to the userChrome.css file (not the userContent.css file)? If so, do I add your coding one or two lines beneath the line that says: @namespace url("http://www.mozilla.org/keymaster/gateke ... s.only.xul"); /* set default namespace to XUL */
• If I'm supposed to use the userChrome.css file for your coding, what is the userContent.css file used for?

Am I correct that doing this will color my calendar event backgrounds my category colors instead of my calendar colors?

[Code Name]

morat,

Well, I added your coding to the userChrome.css file one line space under the @namespace... and I saved it. I restarted Tb and opened the calendar but there was no change.

I know the userChrome.css works because when I used your coding to remove the category box (small rectangle at far right end), it did remove it.

There must be something wrong with the coding that colors the event background with the category color. Can you tell what it is?

[morat]

@Code Name

Don't try to mess with the JavaScript code i.e. (function () {...})(); and the error console until you know how to use the userChrome.css file.

...

You must set the toolkit.legacyUserProfileCustomizations.stylesheets preference to true in about:config in order to load the userChrome.css file.

Check if the userChrome.css file is really in the chrome folder in the correct profile folder.

Menu Bar > Help > Troubleshooting Information > Profile Folder > Open Folder

The userChrome.css file name is case sensitive. Windows hides file extensions by default. Novice users may end up mistakingly naming the file userChrome.css.txt without realizing it.

Also make sure that file is a plain text file without formatting or a BOM (byte order mark). You can open the file in a Firefox tab as a test.

Try testing another rule to see if the userChrome.css file is working correctly.

Code: Select all

* { background-color: orange !important; }

It may be that a syntax error earlier in the file is preventing the rule from being parsed.

Remember you must restart the application for the changes to take effect.

How to create a userChrome.css file (for Firefox)
http://www.userchrome.org/how-create-us ... e-css.html

[Code Name]

Yes userChrome.css works. Ugh, the orange was shocking! Your coding to remove the category box (small rectangle at far right end) also worked.

So, I know the userChrome.css is setup correctly and it works. But the lengthy coding that is suppose to replace my calendar event colors with my category colors doesn't work. I copied your exact coding without making any changes.

Thank you for your help. I appreciate it!

[morat]

But the lengthy coding that is suppose to replace my calendar event colors with my category colors doesn't work.

Are you pasting the lengthy JavaScript code into the userChrome.css file? That's wrong.

You need to paste the lengthy JavaScript code into the error console command line.

...

Try running the following simple JavaScript code that toggles the message pane using the error console.

Code: Select all

MsgToggleMessagePane();

Instructions:

* open error console i.e. tools > developer Tools > error console
* copy and paste JavaScript code into error console command line
* press enter to run

Error Console command line
http://developer.mozilla.org/docs/Tools ... mmand_line