# Calendar formatting?

**URL:** <https://meta.discourse.org/t/calendar-formatting/279200>\
**Category:** Support\
**Tags:** events\
**Created:** [September 16, 2023, 12:20am UTC](https://meta.discourse.org/t/calendar-formatting/279200 "2023-09-16T00:20:21Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)\
**Post date:** [September 16, 2023, 3:41am UTC](https://meta.discourse.org/t/calendar-formatting/279200/4 "2023-09-16T03:41:08Z")

</div>

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](https://global.discourse-cdn.com/meta/original/4X/1/b/a/1ba61735abf91a931c1fff3970e01ad05ccf307c.png)

 ![image](https://global.discourse-cdn.com/meta/original/4X/6/d/5/6d5963d0f43379a61468fef0cb6ffa9d3caaf34f.png)

 ![image](https://global.discourse-cdn.com/meta/original/4X/f/4/f/f4f2c528b0b8ce0903fbb6ad161663760df5f05d.png)

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:

```css
.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](https://global.discourse-cdn.com/meta/original/4X/0/e/2/0e20de034c47c1dc3458cb6cb080b9b709deff09.png)

 ![image](https://global.discourse-cdn.com/meta/original/4X/7/0/5/7051a1eed0d68fb948d6d277e22b2beeb693fa4d.png)

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

```css
.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.

---

_[View the full topic](https://meta.discourse.org/t/calendar-formatting/279200)._