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

Question

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

文档中充满了如何在特定事件、特定日期、单个单元格等上完成此操作，但我还没有找到一个通用的“开关”来翻转 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

并添加了另一种样式，可以查找名称中包含

.fc td

类的所有

other-month

该选择器是

.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。

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

Answer 4

像这样的日子我已经改变了背景， 它适用于 v 5.10.1，并且必须在 6.1.10 上自定义：

var containers = document.getElementsByClassName('fc-daygrid-day-frame');
  for (let i = 0; i < containers.length; i++) {
       
    if(containers[i].innerHTML.includes('fc-daygrid-event-harness'))
      {
         console.log(containers[i].innerHTML);
          containers[i].style.background = "red";
      }
    else
      {
        containers[i].style.background = "green";
      }
        
    }

https://codepen