FullCalendar默认事件渲染内凹样式修改问题求助

嗨，我完全懂你现在的困扰——想改掉FullCalendar默认事件的内凹样式，结果试了几种方法都只让当天最后一个事件生效，实在让人头疼！

先帮你分析下问题：你提到的.fc-timegrid-event-harness这个类，FullCalendar在渲染重叠事件时，会给每个事件的这个元素动态计算并添加内联样式（比如那个inset:44px 0%-132px），这种内联样式的优先级比你写的普通类选择器高很多，哪怕加了!important，也可能因为渲染顺序的问题，只有最后一个事件的样式被正确覆盖，前面的还是被动态生成的内联样式压过了。

给你几个靠谱的解决思路，按推荐程度排序：

1. 用eventDidMount回调逐个修改样式 #

这个方法最稳妥，因为它会在每个事件渲染完成后单独执行，能确保每个事件的样式都被修改：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    // 你的其他日历配置
    eventDidMount: function(info) {
      // 找到目标元素并修改inset样式
      const harnessEl = info.el.querySelector('.fc-timegrid-event-harness');
      if (harnessEl) {
        harnessEl.style.inset = '0'; // 这里改成你想要的数值，比如去掉内凹就设为0
      }
    }
  });
  calendar.render();
});

2. 给事件添加自定义类，用高特异性选择器覆盖 #

通过FullCalendar的eventClassNames给每个事件绑定自定义类，再用更具体的选择器来覆盖默认样式：

// 日历配置里添加
eventClassNames: 'custom-calendar-event'

然后写CSS：

.fc-timegrid .custom-calendar-event .fc-timegrid-event-harness {
  inset: 0 !important; /* 这里替换成你的目标样式值 */
}

这里的选择器结合了父元素和自定义类，特异性比FullCalendar的默认选择器高，能有效覆盖动态样式。

3. 调整重叠事件的渲染逻辑 #

如果你的内凹样式是因为事件重叠导致的，也可以调整FullCalendar的重叠处理配置，比如设置eventOverlap: false让事件不重叠，这样默认的内凹样式可能就不会生成了，但这个方法会改变事件的排列方式，需要根据你的需求来权衡。

之前你用全局类加!important只生效最后一个事件，大概率是因为FullCalendar在渲染每个事件时，都会给.fc-timegrid-event-harness添加内联样式，后面渲染的事件会覆盖全局样式的作用范围，而前面的事件还是被内联样式压制了。上面的前两种方法都能避开这个问题。

备注：内容来源于stack exchange，提问作者Hrosy