FullCalendar如何实现跨多天彩色事件条不同审批状态的视觉区分

完全可实现，无需修改FullCalendar源码，基于官方公开的生命周期钩子即可完成，兼容v5、v6版本，效果和Outlook日历的分段状态展示一致。

核心依赖FullCalendar官方提供的eventDidMount渲染钩子，在事件挂载到DOM树之后，根据事件的审批状态边界动态设置样式即可，不会和组件内置的拖拽、调整大小等交互冲突。

• 第一步：给休假事件增加自定义扩展字段
  每个休假事件存储对应时间属性，存在extendedProps里：
  • approvedEnd：已审批通过的假期段截止时间
  • type：固定为vacation用于筛选目标事件
• 第二步：提前写好状态对应的CSS样式
  已审批状态用业务要求的彩色实底，未审批状态用45度灰色斜纹，同事件跨两种状态的用CSS变量控制分割位置，实现单条事件条内的样式分段。
• 第三步：在渲染钩子中判断状态、绑定样式
  事件挂载后根据approvedEnd和事件自身start/end的时间关系，给事件DOM绑定对应类名，跨状态的事件计算已审批段的长度占比，通过CSS变量传给样式实现精准分割。

/* 已审批状态样式 */
.event-vacation-approved {
  background-color: #1677ff;
  border-color: #1677ff;
}
/* 未审批状态灰色斜纹 */
.event-vacation-pending {
  background: repeating-linear-gradient(
    45deg,
    #8c8c8c,
    #8c8c8c 3px,
    #bfbfbf 3px,
    #bfbfbf 6px
  );
  border-color: #8c8c8c;
}
/* 单事件条内混合状态 */
.event-vacation-mixed {
  --split-position: 0%;
  background: linear-gradient(
    90deg,
    #1677ff 0%,
    #1677ff var(--split-position),
    #8c8c8c var(--split-position),
    #8c8c8c 100%
  ),
  repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.15) 0px,
    rgba(255,255,255,0.15) 3px,
    transparent 3px,
    transparent 6px
  );
  background-blend-mode: normal;
  border-color: #1677ff;
}

const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
  // 其余基础配置（plugins、initialView等）按业务需求配置
  eventDidMount: (info) => {
    const { event, el } = info
    // 仅处理休假类事件
    if (event.extendedProps.type !== 'vacation') return

    const eventStart = event.start.getTime()
    const eventEnd = event.end.getTime()
    const approvedEndTs = new Date(event.extendedProps.approvedEnd).getTime()

    // 全段已审批
    if (approvedEndTs >= eventEnd) {
      el.classList.add('event-vacation-approved')
      return
    }
    // 全段未审批
    if (approvedEndTs <= eventStart) {
      el.classList.add('event-vacation-pending')
      return
    }
    // 跨两种状态，计算分割位置占比
    const splitPercent = ((approvedEndTs - eventStart) / (eventEnd - eventStart)) * 100
    el.style.setProperty('--split-position', `${splitPercent}%`)
    el.classList.add('event-vacation-mixed')
  }
})

• 若使用时间网格周/日视图，FullCalendar会自动将跨日事件拆分为按天渲染的独立DOM片段，此时无需计算渐变占比，直接判断当前片段所属日期是否在已审批时间范围内，对应添加样式类即可，适配成本更低。
• 员工拖拽调整事件时长后，同步更新事件的extendedProps.approvedEnd字段，调用calendar.updateEvent()方法触发事件重渲染即可自动刷新样式。
• 所有样式修改仅操作事件根DOM的类名与CSS变量，不要手动修改FullCalendar生成的内部DOM结构，避免版本升级后DOM结构变动导致样式失效。

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