Bootstrap 5 不提供日历组件，FullCalendar 是实现车辆调度日历的最简路径；它支持资源分组（如按车辆分栏）、拖拽调度、多视图切换，配合 Bootstrap 5 CSS 可快速构建响应式调度界面。
用 Bootstrap 5 + FullCalendar 实现车辆调度日历最简路径
直接说结论：Bootstrap 本身不提供日历组件，FullCalendar 是当前最成熟、适配后台调度场景的开源日历库，配合 Bootstrap 5 的 CSS 可以快速实现响应式、可拖拽、带资源分组（如按车辆分栏）的调度视图。别硬套 Bootstrap 的 datepicker——它只支持单日期选择，没法做多车并行排班。
为什么不能只靠 Bootstrap Datepicker 做调度日历
bootstrap-datepicker（或 Bootstrap 5 内置的 date input）本质是表单控件，不是日程管理系统。常见误用现象包括：
- 试图用多个
datepicker拼出“一周七天+多辆车”的表格结构 → DOM 膨胀、事件绑定混乱、无法跨天拖拽 - 手动监听
change事件写逻辑处理车辆占用冲突 → 缺乏时间区间重叠检测、无视觉反馈、难以回滚 - 用
table+td手写格子 → 响应式崩坏、移动端无法滑动、不支持时隙缩放（如切换日/周/月视图）
真正需要的是一个能理解“事件（event）”、“资源（resource）”、“时段（slot）”概念的日历引擎——FullCalendar 正是为此设计。
集成 FullCalendar + Bootstrap 5 的关键三步
前提是项目已用 Bootstrap 5（v5.3+），不依赖 jQuery（FullCalendar v6+ 默认 ESM + 无 jQuery）：
- 安装依赖：
npm install @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/list @fullcalendar/resource-timegrid - 在 JS 中启用资源视图（按车辆分栏）：
plugins: [resourceTimeGridPlugin]，视图设为resourceTimeGridDay或resourceTimeGridWeek - 数据格式必须含
resources（车辆列表）和events（调度任务），且每个event必须有resourceId字段指向某辆车
示例片段（简化版）：
<div id="calendar"></div>
// JS
import { Calendar } from '@fullcalendar/core';
import { resourceTimeGridPlugin } from '@fullcalendar/resource-timegrid';
const calendar = new Calendar(document.getElementById('calendar'), {
plugins: [resourceTimeGridPlugin],
initialView: 'resourceTimeGridWeek',
resources: [
{ id: 'car-001', title: '京A12345（厢式货车）' },
{ id: 'car-002', title: '京B67890（冷链车）' }
],
events: [
{
id: 'evt-1',
resourceId: 'car-001',
title: '朝阳区配送',
start: '2024-06-10T09:00:00',
end: '2024-06-10T12:00:00'
}
]
});
calendar.render();
调度业务逻辑必须自己补的几个坑
FullCalendar 渲染很稳，但“车辆是否已被占用”“能否跨天拖拽”“冲突时弹窗提示”这些得你写。容易忽略的关键点：
-
eventOverlap默认允许重叠 → 必须设为false，再通过eventAllow钩子函数手动校验：查同resourceId下是否存在start/end交叉的 event - 拖拽到其他车辆栏？默认允许 → 用
eventReceive拦截，检查目标resource.id是否在白名单内（比如某些车只跑固定线路） - 时间粒度要对齐业务：调度通常按 30 分钟或 1 小时切片 → 设
slotDuration: '00:30:00'，否则会出现“09:17 开始”这种无法落地的排班 - 导出 PDF 或打印排班表？
FullCalendar不管这事 → 得用html2canvas+jsPDF截图渲染后的 DOM，别想直接导出数据
真实调度系统里，最耗时的永远不是日历怎么画，而是“当司机临时请假，自动把今天所有派单重分配给空闲车辆”这类规则引擎——日历只是它的可视化表层。
