Thunderbird Calendar: Month and Multi-Week view suggestion - add a visual delineation

[Chris777]

For Month and Multiweek views, the calendar background is just one color.  The only thing visually separating one month from another are the day numbers and a small 3 letter Month abbreviation on the 1st box of every month.  When scrolling through the month it is visually difficult to know when to stop as the months just go by all one color with no visual delineation. 

I have seen other calendar software and apps deal with this in various ways :

1- A thicker lined perimeter border around each month. 

2- Each alternate month having a slight background shade.  Example: white/grey/white etc.  

3- Overlaying a large 3 letter Month abbreviation over the center of each month.  

I have included 2 screen shots of one calendar showing alternate month shading, and another showing month outline as well as 3 letter month overlay which scroll with the months.

In Thunderbird, these changes should apply to both MONTH VIEW and MULTIWEEK VIEW.  Both of which are essentially scrolling through months.  

[Jon]

Thanks for submitting an idea to the Mozilla Connect community! Your idea is now open to votes (aka kudos) and comments.

[TechSOS]

I agree with this. There should be a bold horizontal line indicating the first week of every month so its easier to visually reference how fast you are scrolling through the week/months.

[mozillauser9934]

Would love this visual aid aswell!

[Agentvirtuel]

Hello

An subject https://www.reddit.com/r/Thunderbird/comments/1kow3tn/how_to_contrast_color_subsequent_months_in_mul...
If you wish to test a userChrome.css file

/* Change the background color of TODAY to a more distinctive color. */
.calendar-month-day-box-current-month[relation="today"] {
    background-color: #76caff !important;
}

/* Change the background colors of each second month to a darker one. */
.calendar-month-day-box-current-month[month="2"] {
    background-color: color-mix(in srgb, var(--viewMonthDayOtherBackground) 95%, rgb(21, 171, 190)) !important;
}

/* Change the background colors of each second month to an even darker one. */
.calendar-month-day-box-current-month[month="2"].calendar-month-day-box-day-off {
    background-color: color-mix(in srgb, var(--viewMonthDayOtherBackground) 90%, rgb(14, 110, 122)) !important;
}

.calendar-month-day-box-current-month[month="4"] {
    background-color: color-mix(in srgb, var(--viewMonthDayOtherBackground) 95%, rgb(21, 171, 190)) !important;
}

.calendar-month-day-box-current-month[month="4"].calendar-month-day-box-day-off {
    background-color: color-mix(in srgb, var(--viewMonthDayOtherBackground) 90%, rgb(14, 110, 122)) !important;
}

.calendar-month-day-box-current-month[month="6"] {
    background-color: color-mix(in srgb, var(--viewMonthDayOtherBackground) 95%, rgb(21, 171, 190)) !important;
}

.calendar-month-day-box-current-month[month="6"].calendar-month-day-box-day-off {
    background-color: color-mix(in srgb, var(--viewMonthDayOtherBackground) 90%, rgb(14, 110, 122)) !important;
}

.calendar-month-day-box-current-month[month="8"] {
    background-color: color-mix(in srgb, var(--viewMonthDayOtherBackground) 95%, rgb(21, 171, 190)) !important;
}

.calendar-month-day-box-current-month[month="8"].calendar-month-day-box-day-off {
    background-color: color-mix(in srgb, var(--viewMonthDayOtherBackground) 90%, rgb(14, 110, 122)) !important;
}

.calendar-month-day-box-current-month[month="10"] {
    background-color: color-mix(in srgb, var(--viewMonthDayOtherBackground) 95%, rgb(21, 171, 190)) !important;
}

.calendar-month-day-box-current-month[month="10"].calendar-month-day-box-day-off {
    background-color: color-mix(in srgb, var(--viewMonthDayOtherBackground) 90%, rgb(14, 110, 122)) !important;
}

.calendar-month-day-box-current-month[month="12"] {
    background-color: color-mix(in srgb, var(--viewMonthDayOtherBackground) 95%, rgb(21, 171, 190)) !important;
}

.calendar-month-day-box-current-month[month="12"].calendar-month-day-box-day-off {
    background-color: color-mix(in srgb, var(--viewMonthDayOtherBackground) 90%, rgb(14, 110, 122)) !important;
}

About

/* Change the background color of TODAY to a more distinctive color. */
.calendar-month-day-box-current-month[relation="today"] {
    background-color: #76caff !important;
}

If you wish others https://www.w3schools.com/colors/colors_picker.asp

If you have some CSS code ready to paste into a userChrome.css file, you can do that using the following page and download your userChrome.css file from there: https://www.userchrome.org/download-userchrome-css.html