更改FullCalendar事件（v4）的backgroundColor

Question

我正在尝试在FullCalendar v4中实现“选定事件”行为，但是没有运气。 我想要的行为是：

• 单击事件时，其颜色会发生变化，并且该事件将成为所选事件
• 单击另一个事件时，上一个选定的事件将颜色更改为默认颜色，而新单击的事件将变为选定的事件并更改颜色
• 在事件外部单击时，所选事件变为null，所有可见事件均使用默认颜色。

第一个问题是更改所单击事件的背景颜色，但我没有成功。

FullCalendar v4文档对backgroundColor有点含糊。 我尝试了以下方法（反应示例）：

在我放置的设置中

const calendar = new Calendar(this.calRef.current, {
    ...
    eventClick: this.eventClick
    ...
}

第一种方法使用here

中所述的setProp方法

eventClick = (info) => {
    info.event.setProp('backgroundColor', 'red')
}

这行不通

第二种方法使用元素样式，如here

所述

eventClick = (info) => {
    info.el.style.backgroundColor = 'red';
}

这也不起作用

我在做什么错了？

Answer 1

丹妮。 在查看您的要求之后，看起来它已经可以作为全日历的选择。 创建日历时，您必须包含 interaction 插件，并将 selectable 选项设置为 true 。 像这样：

var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'dayGrid','timeGrid','interaction' ],
    selectable: true,
...

您可以在https://codepen.io/ormasoftchile/pen/byZZXq

上看到一个有效的示例

最诚挚的问候。