如何让FullCalendar月视图事件仅高亮日单元格部分区域而非整行

嘿，我刚好折腾过fullCalendar月视图的类似自定义需求，给你一套可行的实现方案，一步步来：

1. 先配置基础的工作时段参数 #

首先在你的日历初始化配置里，明确工作时段的范围，后续计算事件位置会用到：

$('#calendar').fullCalendar({
  defaultView: 'month',
  // 定义工作时段，和你需求的8AM-6PM对应
  businessHours: {
    start: '08:00',
    end: '18:00',
  },
  // 你的其他已有配置（比如events数据源等）...
});

2. 核心：用eventRender自定义事件渲染 #

默认月视图的事件会占满整个单元格，我们需要通过eventRender回调，根据事件的实际时段计算它在单元格内的位置和高度，同时隐藏时间显示：

eventRender: function(event, element) {
  // 定义工作时段的开始/结束小时数（方便计算）
  const workStart = 8;
  const workEnd = 18;
  // 这里按你说的8小时工作时长调整，如果是实际工作8小时（比如8AM-4PM），把workEnd改成16即可
  const totalWorkHours = workEnd - workStart;

  // 把事件的开始/结束时间转成小时数（包含分钟，比如9:30就是9.5）
  const eventStartHour = event.start.hours() + event.start.minutes()/60;
  // 处理没有设置结束时间的事件，默认按1小时算
  const eventEndHour = event.end ? event.end.hours() + event.end.minutes()/60 : eventStartHour + 1;

  // 确保只渲染工作时段内的事件部分（如果事件跨工作时段，只显示有效区间）
  const renderStart = Math.max(eventStartHour, workStart);
  const renderEnd = Math.min(eventEndHour, workEnd);

  // 计算事件在单元格内的top偏移和高度百分比
  const topPercent = ((renderStart - workStart) / totalWorkHours) * 100;
  const heightPercent = ((renderEnd - renderStart) / totalWorkHours) * 100;

  // 隐藏默认的时间显示
  element.find('.fc-time').remove();
  // 给事件设置绝对定位和对应的尺寸
  element.css({
    position: 'absolute',
    top: `${topPercent}%`,
    height: `${heightPercent}%`,
    width: '90%',
    margin: '0 5%',
    border: 'none',
    backgroundColor: '#378006', // 可以自定义事件的背景色
    borderRadius: '4px',
    display: 'flex',
    alignItems: 'center',
    padding: '0 4px'
  });

  // 把日单元格设为相对定位，让事件的绝对定位生效
  element.closest('.fc-day').css('position', 'relative');
}

3. 调整单元格样式保证显示效果 #

默认月视图的单元格高度可能不够，导致事件显示被压缩，需要加一点自定义CSS：

/* 给月视图的单元格设置最小高度，确保事件能显示出高度差异 */
.fc-month-view .fc-content-skeleton {
  min-height: 140px;
}
/* 防止事件超出单元格范围 */
.fc-day {
  overflow: hidden;
}

小提示：如果你的工作时段确实是严格8小时（比如8AM到4PM），直接把代码里的workEnd改成16，这样8AM-9AM的事件高度就会是1/8的单元格高度，完全符合你的要求。

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