# 日历格式化？

**URL:** https://meta.discourse.org/t/calendar-formatting/279200
**Category:** Support
**Tags:** events
**Created:** [2023年九月16日 00:20 UTC](https://meta.discourse.org/t/calendar-formatting/279200 "2023-09-16T00:20:21Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Marty\_Downs](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/marty_downs/32/288404_2.png) [@Marty\_Downs](https://meta.discourse.org/u/Marty_Downs)
#### Post date: [2023年九月16日 00:20 UTC](https://meta.discourse.org/t/calendar-formatting/279200/1 "2023-09-16T00:20:21Z")

</div>

日历插件中显示的日历颜色是否有简单的调整方法？我们收到了一些关于白底浅灰色配色方案可访问性的投诉。

---

<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: [2023年九月16日 01:56 UTC](https://meta.discourse.org/t/calendar-formatting/279200/2 "2023-09-16T01:56:27Z")

</div>

> [@Marty\_Downs](#):
>
> 我们收到了一些关于浅灰色在白色背景上显示不便的投诉。

没有可以用来调整日历颜色的设置，但可以使用一些 CSS 来覆盖颜色。我远非 CSS 专家，但这是否接近您想要的？

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

我所做的唯一更改是加深了日历外部边框和用于分隔日历日期的线条的颜色。如果您想要这种类型的更改，我可以为您找到正确的 CSS 选择器。（我在该屏幕截图中进行的调整仅通过我的浏览器的 CSS 工具完成。）

---

<div class="post-metadata">

### Author: ![Marty\_Downs](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/marty_downs/32/288404_2.png) [@Marty\_Downs](https://meta.discourse.org/u/Marty_Downs)
#### Post date: [2023年九月16日 02:58 UTC](https://meta.discourse.org/t/calendar-formatting/279200/3 "2023-09-16T02:58:01Z")

</div>

谢谢！这将是一个很大的改进。我需要一些帮助来找到正确的选择器。

---

<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: [2023年九月16日 03:41 UTC](https://meta.discourse.org/t/calendar-formatting/279200/4 "2023-09-16T03:41:08Z")

</div>

太好了！您需要编辑您网站的主题 CSS 文件，或者将更改添加到主题组件中，然后将该主题组件包含到您所有网站的主题中。我在我的测试网站上使用了主题组件方法。下面尝试通过截图展示该过程：

 ![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)

确保将您网站的主题（或主题）添加到“在这些主题上包含组件”输入框中。

完成此操作后，单击“编辑 CSS/HTML”按钮，并将以下内容添加到主题编辑器的“通用 CSS”选项卡中：

```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);
}

```

此更改的作用是将日历的边框颜色设置为您网站的“primary”颜色——与网站文本使用的颜色相同。通过使用 `--primary` 变量，此更改可同时适用于浅色和深色配色方案：

 ![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)

您也可以不使用 `var(--primary)` 来设置颜色，而是硬编码一个十六进制颜色。例如，黑色为 `#000000`：

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

```

如果此更改导致任何不良副作用，请告知我。第二个规则可能会选择一些您希望保留旧的较浅颜色的元素。

---

<div class="post-metadata">

### Author: ![Marty\_Downs](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/marty_downs/32/288404_2.png) [@Marty\_Downs](https://meta.discourse.org/u/Marty_Downs)
#### Post date: [2023年九月16日 04:30 UTC](https://meta.discourse.org/t/calendar-formatting/279200/5 "2023-09-16T04:30:22Z")

</div>

太好了！非常感谢。我明天试试。