为什么FullCalendar中设置事件的backgroundColor仅修改圆点颜色而非背景色？

问题描述 #

更新 #

这些条目仅显示圆点而不渲染背景色，原因是它们的start属性携带了具体时分时间。若移除时间部分，仅保留日期格式（例如2021-12-07），即可正常展示预期的背景色，因此当前问题调整为：如何让携带时分时间的事件也能正常渲染指定背景色？

我已经为FullCalendar的事件配置了backgroundColor属性值，但仅能修改事件旁的圆点颜色，无法设置整块事件的背景色：

同时我尝试通过extendedProps设置背景色，同样不生效。我期望事件能以指定颜色块的形式展示，类似下图效果：

以下是我的事件数组配置，请问如何调整才能让FullCalendar正确修改事件的背景色？

events: [
    {
        title: 'event1',
        start: '2021-12-07T08:00:00',
        backgroundColor: '#ff00ff'
    },
    {
        title: 'event3',
        start: '2021-12-07T09:00:00',
        backgroundColor: '#4d96f1'
    },
    {
        title: 'event2',
        start: '2021-12-08T08:00:00',
        backgroundColor: '#00ff00',
        extendedProps: {
            backgroundColor: '#00ff00'
        },
    }
],

解决方案 #

根因 #

FullCalendar月视图默认对带时分的定时事件采用「列表条目+左侧圆点」的渲染逻辑，仅全天事件（allDay属性为true或start参数仅含日期无时间）才会渲染为覆盖对应日期区域的背景色块。

方案1：标记为全天事件 #

如果事件本身不需要区分具体时分，占满对应日期全天，直接在每个事件配置中添加allDay: true即可：

events: [
    {
        title: 'event1',
        start: '2021-12-07T08:00:00',
        allDay: true,
        backgroundColor: '#ff00ff'
    },
    {
        title: 'event3',
        start: '2021-12-07T09:00:00',
        allDay: true,
        backgroundColor: '#4d96f1'
    },
    {
        title: 'event2',
        start: '2021-12-08T08:00:00',
        allDay: true,
        backgroundColor: '#00ff00'
    }
]

方案2：修改视图渲染模式 #

如果需要保留事件的时分属性，仅调整月视图的渲染样式，可在FullCalendar初始化配置中指定eventDisplay参数为block，可以全局配置，也可以仅针对月视图配置：

var calendar = new FullCalendar.Calendar(calendarEl, {
  // 仅针对月视图修改渲染规则
  views: {
    dayGridMonth: {
      eventDisplay: 'block'
    }
  },
  events: [
    // 原有事件配置无需修改
  ]
  // 其余原有配置保持不变
});

配置完成后带时分的事件也会在月视图渲染为背景色块，backgroundColor配置可自动生效。

内容的提问来源于stack exchange，提问作者Ortund