MozillaZine


Event category colours

For discussing the Mozilla Calendar, Sunbird and Lightning projects.
morat
 
Posts: 4763
Joined: February 3rd, 2009, 6:29 pm

Post Posted December 25th, 2020, 10:05 am

Code Name wrote:Any ideas?

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

Code Name wrote: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.

morat wrote: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/char/0026/index.htm

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

Code Name

User avatar
 
Posts: 181
Joined: December 23rd, 2019, 1:53 pm
Location: Dallas, TX

Post Posted December 25th, 2020, 11:07 am

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!
Politicians and Diapers must be changed often for the exact same reason...

Code Name

User avatar
 
Posts: 181
Joined: December 23rd, 2019, 1:53 pm
Location: Dallas, TX

Post Posted December 25th, 2020, 7:43 pm

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. :D

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! =D>

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!
Politicians and Diapers must be changed often for the exact same reason...

morat
 
Posts: 4763
Joined: February 3rd, 2009, 6:29 pm

Post Posted December 26th, 2020, 7:16 am

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

Code Name wrote:make a donation

Please donate to your local church or food bank.

Code Name wrote:Thanks again!

You're welcome.

WaltS48

User avatar
 
Posts: 4950
Joined: May 7th, 2010, 9:38 am
Location: Pennsylvania, USA

Post Posted December 26th, 2020, 7:24 am

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.
Linux Desktop - AMD Athlon(tm) II X3 455 3.3GHz | 8.0GB RAM | GeForce GT 630
Windows Notebook - AMD A8 7410 2.2GHz | 6.0GB RAM | AMD Radeon R5

Code Name

User avatar
 
Posts: 181
Joined: December 23rd, 2019, 1:53 pm
Location: Dallas, TX

Post Posted December 26th, 2020, 8:13 am

WaltS48 wrote: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.
Politicians and Diapers must be changed often for the exact same reason...

Code Name

User avatar
 
Posts: 181
Joined: December 23rd, 2019, 1:53 pm
Location: Dallas, TX

Post Posted December 26th, 2020, 8:21 am

morat wrote: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...
Politicians and Diapers must be changed often for the exact same reason...

Code Name

User avatar
 
Posts: 181
Joined: December 23rd, 2019, 1:53 pm
Location: Dallas, TX

Post Posted December 26th, 2020, 8:33 am

morat wrote:
Code Name wrote:make a donation

Please donate to your local church or food bank.

Code Name wrote: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 :D
Politicians and Diapers must be changed often for the exact same reason...

Code Name

User avatar
 
Posts: 181
Joined: December 23rd, 2019, 1:53 pm
Location: Dallas, TX

Post Posted December 26th, 2020, 1:40 pm

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.

Image


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.

Image
Politicians and Diapers must be changed often for the exact same reason...

WaltS48

User avatar
 
Posts: 4950
Joined: May 7th, 2010, 9:38 am
Location: Pennsylvania, USA

Post Posted December 26th, 2020, 5:25 pm

Code Name wrote:
WaltS48 wrote: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! :)
Linux Desktop - AMD Athlon(tm) II X3 455 3.3GHz | 8.0GB RAM | GeForce GT 630
Windows Notebook - AMD A8 7410 2.2GHz | 6.0GB RAM | AMD Radeon R5

Code Name

User avatar
 
Posts: 181
Joined: December 23rd, 2019, 1:53 pm
Location: Dallas, TX

Post Posted December 26th, 2020, 6:16 pm

WaltS48 wrote:
Code Name wrote:
WaltS48 wrote: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! :D
Politicians and Diapers must be changed often for the exact same reason...

morat
 
Posts: 4763
Joined: February 3rd, 2009, 6:29 pm

Post Posted January 1st, 2021, 11:51 am

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

Ed1 wrote: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
 
Posts: 1
Joined: September 12th, 2021, 10:22 pm

Post Posted September 12th, 2021, 10:29 pm

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
 
Posts: 4763
Joined: February 3rd, 2009, 6:29 pm

Post Posted September 15th, 2021, 9:09 am

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: viewtopic.php?f=39&t=3078761

Return to Calendar


Who is online

Users browsing this forum: No registered users and 2 guests