无法更改全日历中背景事件的文本颜色

Question

我在我的 vue 应用程序中使用 fullcalendar.io v6 来处理正常事件和后台事件。不过，我想更改 textColor，它可以完美地处理正常事件，但背景事件不会改变，除非我删除 display: 'background'。如何自定义背景事件的文本颜色？

 {
    task_id: 2,
    title: 'Test Time event',
    start: '2024-06-10T15:00:00',
    end: '2024-06-10T16:00:00',
    display: 'background',
    backgroundColor: '#ff9f89',
    borderColor: '#ff9f89', 
    textColor: 'green'
  }

Answer 1

后台事件文档说：

可以通过瞄准来操纵背景事件的颜色

fc-bg-event

className，您自己提供的自定义类名之一 事件对象的

className

属性，或者通过显式指定 每个事件对象或事件源的

color

或

backgroundColor

属性。

由于您可以使用 CSS 定位后台事件，因此您可以为后台事件类设置 CSS

color

属性，例如如下所示：

.fc-bg-event
{
  color: green;
}

现场演示：https://codepen.io/ADyson82/pen/pomWwVv