FullCalendar 5 - 如何获得每个事件的颜色？

Question

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

color: 'Red',

然后我尝试通过以下方式检索特定事件的颜色：

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

但是，“eventObj.color”是未定义的。我如何获得每个事件的颜色？

Answer 1

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

eventColor（全历级别属性）documentation说：

This option can be overridden ... on a per-event basis with the color Event Object option.

但是点击 the linked eventObject docs，没有列出这样的 color 选项。相反，有 backgroundColor 和 borderColor 属性。

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

设置和读取 backgroundColor 和 borderColor 工作正常，并且通过在单个事件上同时指定 color 和 backgroundColor，似乎 color 是shorthand 用于同时设置 backgroundColor 和 borderColor（请参阅代码段中的事件 2 和 3）。

所以有一个解决方法：我们可以 set color，它透明地设置 backgroundColor，然后我们可以 read。请参阅演示代码段。

更新：

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

Also, this only gives a coloured dot next to the event when it has a start and end time. Is there a way to have a background colour for events that have a start and end time?

我没用过，但我搜索了一下发现了the eventDisplay property，这似乎是你想要的。我更新了代码片段并指定了 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>

FullCalendar 5 - 如何获得每个事件的颜色？

FullCalendar 5 - How do I get the colour of each event?

fullcalendar

fullcalendar-5

更新：