日历与排班系统
日历组件是企业级应用中不可或缺的基础设施。从会议室预约到员工排班，从课程表到项目时间线，日历系统的应用场景遍布各类管理系统。本文将围绕 FullCalendar 的常用 API 封装、会议室预约流程、员工排班视图以及日历事件的 CRUD 管理进行全面分析。
FullCalendar 常用 API 封装
FullCalendar 是目前最流行的开源日历库之一，功能全面但配置项众多。在企业项目中，通常需要对其核心能力进行二次封装，形成团队统一使用的日历组件。
视图切换
FullCalendar 内置了三种主流视图：
- dayGridMonth：月视图，以网格形式展示整月日期
- timeGridWeek：周视图，以时间轴 + 列的形式展示一周安排
- timeGridDay：日视图，以时间轴形式展示单日安排
通过 initialView 属性设置默认视图，使用 headerToolbar 配置切换按钮组。常见封装方式是将视图切换按钮提取为独立 UI，通过调用日历实例的 changeView 方法进行切换。
事件渲染
FullCalendar 的事件（Event）是其核心数据模型。事件通过 events 属性传入，可以是静态数组或数据获取函数。每个事件包含以下关键字段：
const event = {
id: '1',
title: '产品需求评审',
start: '2026-07-21T09:00:00',
end: '2026-07-21T10:30:00',
backgroundColor: '#6366f1',
extendedProps: {
room: 'A厅',
participants: '张三, 李四'
}
};通过 eventRender 钩子可以自定义事件的 DOM 渲染样式，实现会议室颜色标记、参与人头像等高级展示。
拖拽调整
FullCalendar 支持事件拖拽（editable: true）来调整时间。具体能力包括：
- 拖拽移动：将事件拖到新的日期或时间段
- 拖拽拉伸：拖动事件底部的调整手柄改变持续时间
拖拽完成后触发 eventDrop 和 eventResize 回调，前端在这些回调中更新本地数据，并同步到后端 API。
会议室预约系统
会议室预约是日历系统最常见的业务场景之一，其核心流程包括资源展示、时间选择、冲突检测和预约管理。
预约流程
标准的会议室预约流程包含以下步骤：
- 选择日期：在日历中点击或选中某一天
- 选择时段：指定开始和结束时间
- 选择会议室：从可用会议室列表中选取
- 填写信息：会议标题、参与人、描述
- 提交预约：系统检测时间冲突，无冲突则创建成功
会议室资源视图
在多会议室场景中，通常使用资源视图（Resource View）来展示每个会议室的日程。FullCalendar 的 Scheduler 插件提供了 resourceTimeline 和 resourceTimeGrid 等视图，以行为单位展示不同资源的时间占用情况。
每个会议室作为一条独立资源，其当日的预约时段用彩色条块表示，不同会议室的颜色不同，便于视觉区分：
- A 厅（10人）：紫色标记
- B 厅（6人）：绿色标记
- C 厅（20人）：橙色标记
冲突检测
预约提交时需要进行冲突检测：在相同会议室、相同时间段内是否存在已有预约。如果存在重叠，则需要提示用户选择其他时间段或会议室。
冲突检测的逻辑可以表述为：新预约的时间段 [startA, endA] 与已有预约 [startB, endB] 存在重叠的条件是 startA < endB && endA > startB。
员工排班视图
员工排班属于资源调度类场景，展示不同员工在不同时间段的班次分配。
资源时间线
排班视图的核心是二维网格：行代表员工，列代表日期（通常为一周）。每个单元格中展示该员工在该日的班次信息。
常见的班次类型包括：
- 早班（08:00-16:00）：蓝色标记
- 午班（12:00-20:00）：橙色标记
- 晚班（20:00-04:00）：紫色标记
拖拽分配
排班系统的一个重要交互是拖拽分配——将某个员工的班次拖拽到另一个员工或另一个日期上，实现灵活的排班调整。
HTML5 原生拖拽 API（dragstart、dragover、drop）可以实现这一功能。拖拽的基本流程是：
- 源单元格记录拖拽的员工和日期
- 目标单元格接收放置事件
- 更新数据模型（交换班次或将班次移动到新位置）
- 重新渲染排班网格
快捷操作
除了拖拽，排班视图还应支持以下快捷操作：
- 点击空白单元格：快速为该员工分配班次
- 点击已有班次：清除该班次
- 右键菜单：显示班次类型选择列表
日历事件 CRUD 管理
日历事件作为核心数据实体，需要完善的增删改查操作支持。
创建事件
点击日历中的空白区域（日期格子或时间槽），弹出新建事件弹窗。弹窗中包含以下字段：
- 标题：必填，事件名称
- 日期：预填充为点击的日期
- 开始/结束时间：预填充为点击的时间段
- 会议室：下拉选择
- 参与人：文本输入，支持多人在内
编辑事件
点击已有事件可以弹出编辑弹窗或直接内联编辑。编辑时加载该事件的现有数据到表单中，用户修改后保存更新。
删除事件
删除操作通常需要二次确认，防止误删。确认后从数据源中移除该事件并刷新日历视图。
数据持久化
日历数据通常需要与后端 API 进行同步。常见的操作模式包括：
- 初始化加载：页面加载时请求当月/当周的 events 数据
- 变更同步：每次增删改操作后调用对应 API 同步到服务端
- 乐观更新：先更新本地 UI，再异步同步到服务端，提供流畅的用户体验
总结
日历与排班系统涉及视图切换、事件渲染、拖拽交互、资源管理和数据持久化等多个技术层面。通过合理封装 FullCalendar 的核心 API，结合业务场景进行定制化开发，可以构建出满足会议室预约和员工排班等复杂需求的企业级日历应用。