如何自定义FullCalendar实现半日起止的任务调度展示？

一、FullCalendar半日事件实现步骤 #

1. 核心配置调整 #

针对半日事件的展示需求，首先要在日历配置中设置时间槽为12小时分段，同时定义槽标签格式区分上午/下午：

<FullCalendar
  plugins={[resourceTimelinePlugin, timeGridPlugin, interactionPlugin]}
  initialView="resourceTimelineDay" // 或 timeGridDay
  slotDuration="12:00:00" // 设置每个时间槽为12小时
  slotLabelFormat={{
    hour: 'numeric',
    meridiem: 'short',
    omitZeroMinute: true
  }} // 显示"AM"/"PM"区分上下午
  events={yourEventsData}
  resources={yourResourcesData}
/>

2. 事件数据规范 #

事件的start和end需严格对应半日区间：

• 上午事件：start设为当日00:00:00，end设为当日12:00:00
• 下午事件：start设为当日12:00:00，end设为次日00:00:00

示例事件数据：

const events = [
  {
    title: "上午开发任务",
    start: "2024-05-20T00:00:00",
    end: "2024-05-20T12:00:00",
    resourceId: "dev-team-1",
    className: "half-day-event morning"
  },
  {
    title: "下午需求评审",
    start: "2024-05-20T12:00:00",
    end: "2024-05-21T00:00:00",
    resourceId: "product-team",
    className: "half-day-event afternoon"
  }
];

3. 自定义样式匹配示例 #

通过CSS覆盖FullCalendar默认样式，实现示例图的视觉效果：

/* 基础半日事件样式 */
.half-day-event {
  height: 92%;
  margin: 4% 3px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

/* 上午事件样式 */
.half-day-event.morning {
  background-color: #2196F3;
  color: #fff;
  box-shadow: 0 2px 4px rgba(33, 150, 243, 0.3);
}

/* 下午事件样式 */
.half-day-event.afternoon {
  background-color: #4CAF50;
  color: #fff;
  box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);
}

/* 事件文本样式 */
.half-day-event .fc-event-title {
  font-size: 0.9rem;
  text-align: center;
  padding: 0 6px;
}

4. 交互逻辑约束 #

如果需要支持拖拽调整事件，通过回调限制操作范围，确保事件始终保持半日时长：

const handleEventResize = (info) => {
  // 强制事件时长为12小时
  const newDuration = info.end.diff(info.start, 'hours');
  if (newDuration !== 12) {
    info.revert();
  }
};

<FullCalendar
  // 其他配置...
  eventResize={handleEventResize}
  eventDrop={handleEventResize}
/>

二、当前效果问题排查 #

如果你的日历未正确展示半日事件，优先检查以下几点：

• 事件的start/end时间是否严格为12小时间隔
• slotDuration是否正确设置为"12:00:00"
• 自定义CSS是否覆盖了FullCalendar的默认事件样式（可通过浏览器开发者工具查看样式优先级）
• 是否使用了支持时间分段的视图（如resourceTimelineDay/timeGridDay）

三、支持半日事件的其他日历库 #

• Bryntum Scheduler：专业级资源调度工具，支持自定义时间槽分段，内置复杂任务调度逻辑
• Syncfusion React Calendar：提供开箱即用的半日视图配置，样式定制灵活，支持事件拖拽与编辑
• DevExtreme React Scheduler：支持多种时间分段视图，集成React生态良好，适合企业级应用
• React Big Calendar：轻量开源方案，可完全自定义视图与事件渲染，适合中小规模调度需求

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