Fullcalendar 更改日历的整个背景颜色答案

【问题标题】：Fullcalendar change entire background color for calendarFullcalendar 更改日历的整个背景颜色
【发布时间】：2016-04-19 00:20:05
【问题描述】：

我只需要获取渲染的 Fullcalendar div 并将背景从纯白色更改为深灰色。我还想将日期的文本颜色更改为白色。我正在尝试将此日历放在一个深色主题的页面上。

文档塞满了如何在特定事件、特定日期、单个单元格等中完成此操作，但我还没有找到一个通用的“开关”来翻转 CSS 来更改整个日历的背景颜色。将 CSS 中的每个值都更改为石灰绿色，并将我的头发拉出来没有任何影响。

希望有一个简单的答案！

【问题讨论】：

【解决方案1】：

不确定您的 css，因为我看不到要为您修改的代码，但是如果您要更改日历的 div，它应该只是添加背景颜色的简单问题，就像您一样改变了页面的背景。

你的 CSS 应该是这样的；

#calendar
{
//* various CSS styles to make calendar
background-color: #A0A8A0;
}

只要你有一个通用的日历 div，如果你添加颜色，那应该会给你想要的背景。如果这不起作用，请粘贴与日历相关的代码。

希望这会有所帮助！

【讨论】：

谢谢！我会看看我是否可以把它变成一个小提琴，因为我的问题似乎不像我希望的那么简单！我已经直接在 div 本身上更改了样式中的背景颜色标记。日历被呈现为 div 顶部的表格，并且单元格本身不透明（或其他东西......）。我可以更改背景颜色，但不幸的是它不会影响日历。
如果你没有让它变得透明，你可以随时尝试添加类似背景透明的东西；在 CSS 中。没有代码很难看到，但祝你好运！
是的，我正在制作小提琴，但似乎无法渲染：P 我和我的胖手指jsfiddle
好的，感谢您的帮助！我无法得到渲染的东西，但我已经想通了......不容易解决。我需要使用元素检查器来找到我想要更改的东西的确切 ID/类/元素名称。然后我修改了 fullcalendar.css 文件以合并我的更改。慢，但它完成了工作！

【解决方案2】：

好的，如果要更改整个背景和标签文本，则需要在 fullcalendar.css 文件中修改一些项目。日历在 div 上呈现一个表格，因此必须更改表格。

在 fullcalendar.css 文件中找到“表格”部分。

找到.fc td并添加以下内容

还为.fc th 添加了新的/单独的样式

并添加了另一种样式，该样式可查找名称中包含 other-month 类的所有 .fc td

该选择器是.fc td[class*="other-month"]，并指定了以下样式：

【讨论】：

【解决方案3】：

对于使用 timeGridWeek 视图的 FullCalendar 5，这就是我所做的。

#calendar .fc-view {
    background-color: #EEEEEE;
}
#calendar  {
    --fc-page-bg-color: #EEEEEE;
}

使用第一种样式，您可以更改日历的背景。

第二个是为了以防你将stickyHeaderDates设置为true。

这应该适用于所有视图以及同一视图中的多个日历。

【讨论】：