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

Question

我只需要使用渲染的Fullcalendardiv，将背景从纯白色更改为深灰色。我还想把日期的文本颜色改成白色。我想把这个日历放在一个黑色主题的页面上。

文档中充满了如何在特定事件、特定日期、单个单元格等方面实现这一点，但我还没有找到一个通用的"开关"来切换CSS，从而更改整个日历的背景色。一直在CSS中将每个值都改为灰绿色，并毫无影响地拔出我的头发。

希望有一个简单的答案！

Answer 1

不确定你的css，因为我看不到要为你修改的代码，但如果你要为日历更改div，只需添加背景颜色，就像你更改页面背景一样。

你的CSS应该是这样的；

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

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

希望这能有所帮助！

Answer 2

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

在fullcalendar.css文件中查找"table"部分。

找到.fc td并添加以下

• background-color: #333 !important;
• color: #ffffff;

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

• color: #ffffff

并添加了一个样式，该样式在名称中查找所有具有other-month类的.fc td

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

• color: #ffffff;
• 仍在尝试确定如何更改other-month类的背景色，以便更好地与我的页面融合

Answer 3

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

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

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

第二个只是为了防止stickyHeaderDates设置为true。

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