Calendar formatting?

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.

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?

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

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

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:

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:

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.


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