FullCalendar 仅fc-daygrid-event-dot可设色时如何设置事件框背景色

问题根源 #

当前组件渲染效果和预期不符的核心原因有两点：

• FullCalendar v5及以上版本的月视图（dayGrid模式）默认全天事件为「彩色圆点+纯文字」的紧凑渲染样式，事件本身的容器默认无背景，此前配置的color字段仅会作用于内部的圆点元素fc-daygrid-event-dot，不会给整个事件块着色
• 此前尝试将字段改为background-color不生效，是因为组件事件配置不支持连字符格式的CSS属性名，必须使用官方约定的驼峰命名字段

具体操作步骤 #

1. 适配现有事件数据结构，无需逐条修改后端返回值 #

在现有日历初始化配置中追加eventDataTransform回调，自动把每条事件已有的color值同步给背景、边框样式字段，不需要手动修改后端输出的JSON数据：

document.addEventListener('DOMContentLoaded', function() {
  // titleFormat: 'MMMM D, YYYY' 
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    // 保留你原有所有配置
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    initialDate: '2021-04-25',
    navLinks: true,
    selectable: true,
    selectMirror: true,
    select: function(arg) {
      $('#createEventModal #startTime').val(arg.start);
      $('#createEventModal #endTime').val(arg.end);
      $('#createEventModal #when').text(arg.start);
      $('#createEventModal').modal('toggle');
    },
    eventClick: function(arg) {
      if (confirm('Are you sure you want to delete this event?')) {
        arg.event.remove()
      }
    },
    editable: true,
    dayMaxEvents: true,
    events: <?php echo json_encode($myArray); ?>,
    // 追加这段自动适配的代码
    eventDataTransform: function(eventItem) {
      // 校验色值合法性，过滤无效值（比如你数据里的undefin这类非法颜色）
      const colorReg = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;
      if (eventItem.color && colorReg.test(eventItem.color)) {
        eventItem.backgroundColor = eventItem.color;
        eventItem.borderColor = eventItem.color;
      } else {
        // 非法色值时设置兜底默认色
        eventItem.backgroundColor = '#378006';
        eventItem.borderColor = '#378006';
      }
      return eventItem;
    }
  });
  calendar.render();   
});

2. 追加CSS覆盖组件默认的透明渲染样式 #

组件默认的事件块为透明背景、无圆角、带内嵌小圆点的紧凑样式，需要追加以下CSS打通样式绑定，达到整块着色的预期效果：

/* 覆盖月视图事件块的默认样式 */
.fc .fc-daygrid-event.fc-event {
  --fc-event-text-color: #fff;
  border-radius: 4px;
  padding: 2px 8px;
}
/* 隐藏冗余的小圆点元素 */
.fc .fc-daygrid-event .fc-daygrid-event-dot {
  display: none;
}

常见踩坑排查 #

• 注意：事件配置里的样式字段必须用驼峰命名，正确写法是backgroundColor、borderColor，写连字符格式的background-color组件不会识别，自然不会生效
• 注意：必须做色值合法性校验，你现有返回的事件数据里有undefin这类非法颜色值，这类值会被组件忽略，导致对应事件无样式
• 注意：如果之前的测试方案出现文字重叠的效果，是因为没有把默认的圆点元素隐藏，同时保留了原来的文字边距，按照上面的CSS隐藏圆点、调整内边距即可解决文字排版问题

内容的提问来源于stack exchange，提问作者Pi Network Crytocurrency