Calendar formatting?

Support

AI-generated summary

Calendar formatting: adjusting colors for accessibility

Marty_Downs is seeking a way to adjust the colors of the calendar plugin to improve accessibility, specifically addressing the light-gray-on-white color scheme. simon suggests overriding the colors with CSS, providing an example of darkening the outer border and dividing lines.

simon guides Marty_Downs on implementing the change by editing the site’s theme CSS file or adding a theme component. simon shares screenshots and provides the necessary CSS code to set the calendar’s border colors to the site’s primary color using the --primary variable.

Alternatively, a hex color can be hardcoded, such as #000000 for black. Marty_Downs expresses gratitude and plans to test the solution.

1

Is there a straightforward way to adjust the colors of the calendar displayed in the calendar plugin? We have some complaints about accessibility of the light-gray-on-white color scheme.

2

There aren’t any settings that can be used to adjust the calendar’s colors, but the colors can be overridden with a bit of CSS. I’m far from a CSS expert, but is something like this close to what you’re looking for?

image
image1017Ă—891 38.5 KB

The only change I’ve made is to darken the outer border and the lines that are used to divide the calendar days. If that’s the kind of change you are looking for, I can find the correct CSS selectors for you. (The adjustment I made in that screenshot was just done through my browser’s CSS tools.)

3

Thanks! That would be a big improvement. I’d live some help finding the right selectors.

4

Great! You’ll need to either edit your site’s theme CSS file, or add the changes to a theme component and then include that theme component on all your site’s themes. I’ve used the theme component approach on my test site. Here’s an attempt to show that process with screenshots:

image
image1056Ă—604 56.9 KB

image
image823Ă—397 25.3 KB

image
image1073Ă—753 62.5 KB

Make sure to add your site’s theme (or themes) to the “Include component on these themes” input.

Once you’ve done that, click the "Edit CSS/HTML button and add the following to the theme editor’s Common CSS tab:

.discourse-calendar-wrap {
    border: 5px solid var(--primary);
}

.calendar.fc.fc-unthemed .fc-content,
.calendar.fc.fc-unthemed .fc-divider,
.calendar.fc.fc-unthemed .fc-list-heading td,
.calendar.fc.fc-unthemed .fc-list-view,
.calendar.fc.fc-unthemed .fc-popover,
.calendar.fc.fc-unthemed .fc-row,
.calendar.fc.fc-unthemed tbody,
.calendar.fc.fc-unthemed td,
.calendar.fc.fc-unthemed th,
.calendar.fc.fc-unthemed thead {
    border-color: var(--primary);
}

What that change does is set the calendar’s border colors to your site’s “primary” color - the same color as is used for the site’s text. By using the --primary variable, the change works with both light and dark color schemes:

image
image989Ă—913 36.2 KB

image
image981Ă—921 37.2 KB

Instead of using var(--primary) to set the color, you can hard code a hex color. For example #000000 for black:

.discourse-calendar-wrap {
    border: 5px solid #000000;
}

Let me know if you see any undesirable side effects from this change. It’s possible that the second rule is selecting some elements that you’d rather leave at the old lighter color.

5

Sweet! Thanks so much. I’ll give it a try tomorrow.