Event category colours

[morat]

Any ideas?

The cause isn't the JavaScript code. I don't know.

handful of categories... using '&' symbol and forward slashes '/'

I added these categories with the red color as a test.

Beta & Zeta
Gamma/Delta/Epsilon

Here is the style entries.

Code: Select all

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

Code: Select all

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

I tested the style entries. They work here.

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

Here are the calendar.category.color.* preference names for the above categories in the about:config window.

calendar.category.color.beta_-ux26-_zeta
calendar.category.color.gamma-ux2f-delta-ux2f-epsilon

Did you notice that the string is the same in the style entry and preference name?

Unicode Character Ampersand U+0026
http://www.fileformat.info/info/unicode ... /index.htm

Unicode Character Solidus U+002F
http://www.fileformat.info/info/unicode ... /index.htm

[Code Name]

I think I found what triggered the problem, which was strange because it would work and then it wouldn't work on a random basis.

Originally I had all my categories in my userChrome.css file - even the categories that use symbols (e.g. & /) which I planned to deal with at a later time. I think one or more of those categories with symbols (not yet corrected using Unicodes) triggered the random problem. Once I removed those categories (in waiting) that needed the Unicode corrections all my categories with entries in the userChrome.css file displayed correctly. I'm now adding the remaining categories that need Unicode corrections. I'm getting there!

[Code Name]

morat,

I now have my calendar events displaying my category colors...instead of the calendar colors. It looks just like the Calendar Tweaks add-on used to provide. My calendar not only looks much, much better but I can now easily and quickly find at a glance what I'm looking for with the event background bar displaying my category colors...instead of the category colors only displaying a tiny sliver on the far right-hand side of the event bar. Needless to say I am very happy and thrilled with the final results.

I took the time to do a little tidying-up and housecleaning of my calendar events while I was tending to making sure the coding was accurate and matched. I'm still not sure exactly what was causing the random issue of it working fine one minute and then suddenly not working. The glitch may have been caused by the numerous punctuation marks and symbols [e.g. , / - () &] I had been using, which I ended up removing many of them to ease the burden of dealing with the Unicodes (but which in-turn caused me to go through hundreds of calendar events to change the category names so they'd match again. But it was all worth the effort.

I really (REALLY) appreciate your help and the patience you had helping me. I realize I needed I lot of hand-holding being new to doing this. Thank you very much!

I'm curious, morat - do you develop or maintain any add-ons/extensions or have a website? I would very much like to make a donation to express my gratitude for all your help and assistance. Please let me know...

Thanks again!

[morat]

It's a shame you couldn't get the JavaScript code working. That would have formatted the css for you.

make a donation

Please donate to your local church or food bank.

Thanks again!

You're welcome.

[WaltS48]

I would have just created new calendars on the computer, give them the category names and colors.

You can find the color by selecting the Category in the Calendar preferences tab, click Edit, click the Color, copy the # setting.

Create the new calendar with the category name, click the Color button in the creation dialog, paste the # setting, click Next, click Finish.

YMMV.

[Code Name]

I would have just created new calendars on the computer, give them the category names and colors.

You can find the color by selecting the Category in the Calendar preferences tab, click Edit, click the Color, copy the # setting.

Create the new calendar with the category name, click the Color button in the creation dialog, paste the # setting, click Next, click Finish.

YMMV.

Walt - I'm using 50 categories, so that would mean that I would have needed to create 50 calendars. I wouldn't really want a long list of 50 calendars in my left-hand calendar pane. Besides, (at least the way I look at the matter) they are different 'categories' to be used in calendar(s), not calendars doubling (replicating) as categories. However, if I only used maybe a dozen categories then creating calendars (as categories) would definitely be the quick and easy way to accomplish it.

[Code Name]

It's a shame you couldn't get the JavaScript code working. That would have formatted the css for you.

Yeah, I'm still confused about the JavaScript code. I really don't understand what all happened (if anything) when I entered the JavaScript code in the Error Console and it was copied to the clipboard. I had no clue what I was doing or what to expect. I was oblivious to the JavaScript code somehow being able to format the css for me. I guess I need to study-up on how to do that...

[Code Name]

make a donation

Please donate to your local church or food bank.

Thanks again!

You're welcome.

I already donate substantially to my church and two other favorites - Salvation Army and Hospice Foundation...
If you reconsider and change your mind I'd gladly make it possible by funding for you to donate to your choice, under your name.

Thank you

[Code Name]

Here is a 'Before' and 'After' of the same calendar month - blurred on purpose.

BEFORE
(All events use the calendar's background color (most events are on the primary calendar - navy blue) with the category colors on the right-hand tips for category identification.



AFTER
(All events on all calendars now use the category colors as the background color for quick and easy identification at a glance. Category colors on the event's right-hand tips are removed.

[WaltS48]

I would have just created new calendars on the computer, give them the category names and colors.

You can find the color by selecting the Category in the Calendar preferences tab, click Edit, click the Color, copy the # setting.

Create the new calendar with the category name, click the Color button in the creation dialog, paste the # setting, click Next, click Finish.

YMMV.

Walt - I'm using 50 categories, so that would mean that I would have needed to create 50 calendars. I wouldn't really want a long list of 50 calendars in my left-hand calendar pane. Besides, (at least the way I look at the matter) they are different 'categories' to be used in calendar(s), not calendars doubling (replicating) as categories. However, if I only used maybe a dozen categories then creating calendars (as categories) would definitely be the quick and easy way to accomplish it.

Well, you created 27 more categories than the 23 default categories that ship with Thunderbird and spent how much time doing this. Enjoy!

[Code Name]

I would have just created new calendars on the computer, give them the category names and colors.

You can find the color by selecting the Category in the Calendar preferences tab, click Edit, click the Color, copy the # setting.

Create the new calendar with the category name, click the Color button in the creation dialog, paste the # setting, click Next, click Finish.

YMMV.

Walt - I'm using 50 categories, so that would mean that I would have needed to create 50 calendars. I wouldn't really want a long list of 50 calendars in my left-hand calendar pane. Besides, (at least the way I look at the matter) they are different 'categories' to be used in calendar(s), not calendars doubling (replicating) as categories. However, if I only used maybe a dozen categories then creating calendars (as categories) would definitely be the quick and easy way to accomplish it.

Well, you created 27 more categories than the 23 default categories that ship with Thunderbird and spent how much time doing this. Enjoy!

Haha! I really liked how the now-abandoned 'Calendar Tweaks' add-on provided the option to color the event backgrounds using the category colors. Check a box and it was done. When Thunderbird updated to 78 and I was no longer able to have that nice feature I didn't realize just how nice it was, and how much I'd miss it.

Yes, I guess I did double the number of categories to suit my needs, but whether it's 15 categories or 50 categories they all look the same (except for the sliver of category color on the tip end) the way Thunderbird's default is setup. When you're scrolling quickly through multi-weeks or months looking for something with a known category amongst hundreds of other events that all look the same, it's not conducive to productivity. It's just so much easier when you're able to see the category color so you can quickly spot what you're after...at least it narrows down the hunt and speeds-up the results. (If you have a lot of events (like I do) it was like looking for a particular 4-door sedan in heavy traffic on the Interstate when all 4-door sedans are painted navy blue, and the only distinguishing identifying mark that's different among them is the side mirrors are painted different colors.)

The time it took me to make the change was a non-factor. I had nothing in particular better to do for the time I spent. I just hope morat wasn't too bothered by my inexperience and questions. Now I can say I've accomplished something a little different! And, I will definitely enjoy it!

[morat]

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

I just pasted that long code section starting with "function" into the error console. The result is just one word: "undefined".

I don't know why Code Name and Ed1 are having trouble with the JavaScript code in Windows 10.

I created a fresh profile with a single newsgroup account in Windows 7. I didn't change any preferences.

Error console and main window alert screenshot
http://imgur.com/GnoLg2V

Personalized style entries in system clipboard:

Code: Select all

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^="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;
}

Thunderbird Portable 78.6.0
Windows 7 SP1 32-bit

[iago-lito]

The workaround does not seem to work anymore (TB 91.1.0).

The property used seems not to be `background-color` anymore but `--item-backcolor` instead. Still, setting this property in `userChrome.css` does not to have any effect on the rendered calendar now, as the value `var(category-mycategory-color)` seems automatically replaced with some mysterious `var(--calendar-7f15812f-ux2d-190d-ux2d-4258-ux2d-9dc4-ux2d-0348abf3db0c-backcolor)`. Any idea to work around this again?

[morat]

Thunderbird 78 and Thunderbird 91 both have '--item-backcolor' and '--item-forecolor' in the style attribute.

The problem is the devs removed the categories attribute.

i.e. <calendar-month-day-box-item ... style="..." categories="birthday" ...>

No pure css workaround possible I guess.

Similar problem: http://forums.mozillazine.org/viewtopic ... &t=3078761

Structurally simplify calendar event items
http://bugzilla.mozilla.org/show_bug.cgi?id=1694820

[freddyflintstone]

Here is a 'Before' and 'After' of the same calendar month - blurred on purpose.

BEFORE
(All events use the calendar's background color (most events are on the primary calendar - navy blue) with the category colors on the right-hand tips for category identification.



AFTER
(All events on all calendars now use the category colors as the background color for quick and easy identification at a glance. Category colors on the event's right-hand tips are removed.

And how did you achieve this? && can it be applied to Linux TB ver 91.7
My old code from a previous "fix" was

Code: Select all

.calendar-event-box-container[categories] {margin: 0px !important;background-position: top left !important;background-repeat: no-repeat !important;}

calendar-category-box[categories]{display: none !important;}

/* Adapting background color following category */
.calendar-event-box-container[categories="appointments"] { color: white !important; background-color: #663366 !important;}

Read earlier in this forum change coding to

Code: Select all

calendar-color-box

and some really long version of function.. As in where to put that file?
Many thanks Code Name

Is there a final solution due to discontinued of Legacy and programmers stop supporting there lovely work