Calendar formatting?

Support
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.)

1 Like
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.

2 Likes
5

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

2 Likes