FullCalendar 5-如何获取每个活动的颜色

Question

我在FullCalendar 5中设置特定事件的颜色(每个事件可以有不同的颜色(：

color: 'Red',

然后我尝试用检索特定事件的颜色

eventClick: function(info) {
var eventObj = info.event;
$('#updateColour').val(eventObj.color);
}

然而；eventObj.color"；未定义。如何获得每个活动的颜色？

Answer 1

我重现了您在下面的简单片段中看到的问题。看起来你遇到了一个bug，或者一些未记录的东西，或者可能只是文档中的一个bug。

eventColor(一个完整的日历级属性(文档中写道：

此选项可以被覆盖。。。以每个事件为基础，使用CCD_ 2事件对象选项。

但是单击链接的eventObject文档，没有列出这样的color选项。取而代之的是backgroundColor和borderColor属性。

在这个片段中，我尝试指定一个事件color并读取它。设置有效-事件是用日历上指定的颜色绘制的。但正如您所发现的，读取失败，color是未定义的。

设置和读取backgroundColor和borderColor工作正常，通过在单个事件上同时指定color和backgroundColor，color似乎是设置backgroundColor和borderColor的简写(请参阅片段中的事件2和3(。

因此，有一个解决方法：我们可以设置color，它透明地设置backgroundColor，然后我们可以读取。请参阅演示片段。

更新：

关于您在评论中的额外问题：

此外，只有当事件有开始和结束时间时，才会在事件旁边显示一个彩色点。有没有办法为有开始和结束时间的事件设置背景颜色？

我还没有使用过它，但我搜索并发现了eventDisplay属性，这似乎就是您想要的。我更新了代码段并指定了block选项，它将具有开始和结束时间的事件从列表项更改为块，就像全天事件一样——请参阅事件4。

document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
initialDate: '2021-11-07',
eventDisplay: 'block',
events: [{
title: 'Event 1',
start: '2021-11-01',
color: 'Red',
},
{
title: 'Event 2',
start: '2021-11-02',
backgroundColor: 'green',
color: 'red'
},
{
title: 'Event 3',
start: '2021-11-03',
color: 'red',
backgroundColor: 'blue',
},
{
title: 'Event 4',
start: "2021-11-04T10:00:00-08:00",
end: "2021-11-04T11:30:00-08:00",
color: 'orange',
},
],
eventClick: function(info) {
alert('color: ' + info.event.color + '; backgroundColor: ' + info.event.backgroundColor);
}
});
calendar.render();
});

<link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.js'></script>
<div id='calendar'></div>