FullCalendar DayGridMonth视图：单日事件无法按时间渲染样式问题

安全阿岳

2026-7-15

解决FullCalendar DayGridMonth视图单日事件水平渲染问题

针对你遇到的单日事件无法按时间水平渲染的问题，核心原因是单日事件的.fc-daygrid-event-harness默认是position: static定位，导致你设置的left和right样式不生效。以下是修正后的代码：

eventDidMount: function(arg) {
  const event = arg.event;
  const eventElement = arg.el;
  const dayCell = eventElement.closest('.fc-daygrid-day');
  const dayCellWidth = dayCell.offsetWidth || 1;
  const eventBlockCell = eventElement.closest('.fc-daygrid-event-harness');

  // 给单日事件的harness设置绝对定位，确保left/right生效
  eventBlockCell.style.position = 'absolute';
  // 重置默认的margin和padding，避免布局偏移
  eventBlockCell.style.margin = '0';
  eventElement.style.width = 'auto';

  // 修正rightValue的判断：单日事件没有style.right，parseInt后是NaN
  let rightValue = parseInt(eventBlockCell.style.right, 10);
  if (isNaN(rightValue)) {
    rightValue = -dayCellWidth;
  }

  // 计算事件开始时间相对于当天0点的偏移比例
  const eventStartMoment = moment(event.start);
  const durationFromStart = eventStartMoment.diff(moment(event.start).startOf('day'), 'minutes');
  const leftPxAmount = (durationFromStart / (24 * 60)) * dayCellWidth;
  eventBlockCell.style.left = `${leftPxAmount}px`;

  // 计算事件结束时间相对于当天24点的偏移比例
  const eventEndMoment = moment(event.end || event.start);
  const durationFromEnd = eventEndMoment.diff(moment(eventEndMoment).endOf('day'), 'minutes');
  const rightPxAmount = Math.abs(durationFromEnd / (24 * 60)) * dayCellWidth + rightValue;
  eventBlockCell.style.right = `${rightPxAmount}px`;
}