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

Posted 2023-05-08

【中文标题】FullCalendar 5 - 我如何获得每个事件的颜色？

【英文标题】：FullCalendar 5 - How do I get the colour of each event?

【发布时间】：2021-12-30 16:08:40

【问题描述】：

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

color: 'Red',

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

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

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

【问题讨论】：

我可以确认我看到与a simple JSFiddle 相同。使用了指定的color（即使是像Red 这样的非标准大写颜色），但不能用作可读属性。请注意，color 实际上并未在the eventObject docs 中作为属性列出，即使在the eventColor page 中对其进行了描述；还要注意backgroundColor 是 可访问的，即使没有指定，并且来自color。也许您可以使用backgroundColor？

@Don'tPanic 我已将“颜色”更改为“背景颜色”，这很有效。请将此添加为您的答案，以便我投票并接受。此外，当事件具有开始和结束时间时，这只会在事件旁边显示一个彩色点。有没有办法为具有开始和结束时间的事件设置背景颜色？

【参考方案1】：

我在下面的简单 sn-p 中重现了您看到的问题。看起来您遇到了一个错误，或者一些未记录的内容，或者可能只是文档中的一个错误。

eventColor（整个日历级别的属性）documentation 说：

可以使用color Event Object 选项在每个事件的基础上覆盖此选项。

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

在 sn-p 中，我尝试指定事件color 并阅读它。设置工作 - 事件在日历上以指定的颜色绘制。但正如您发现的那样，读取失败，color 未定义。

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

所以有一个解决方法：我们可以设置color，它透明地设置backgroundColor，然后我们可以读取。有关演示，请参见 sn-p。

更新：

关于您在 cmets 中的额外问题：

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

我没有使用它，但我搜索并遇到了the eventDisplay property，这似乎是您所追求的。我更新了 sn-p 并指定了 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>