用途
该技能针对在 MUI 应用中需要集成项目排期与任务管理能力的场景。它以资料形式说明：MUI X 目前并不提供原生甘特图组件（属于路线图项目，尚未可用），因此在需要时间线视图时应使用第三方甘特图库，而把时间线之外的一切交给 MUI。目标是为开发者提供一套可组合到 MUI 主题、布局与组件插槽中的甘特图、看板、日程与资源管理选型与集成参考。
主要能力与涵盖的库
甘特图库
- SVAR React Gantt（最佳免费选项，MIT）：安装命令
npm install wx-react-gantt。免费 MIT 核心包含时间线上的交互式拖拽任务编辑、任务依赖（FS、SS、EE、SE）、可折叠分组的分层/摘要任务、可自定义任务条、工具提示、网格列与时间刻度、多级缩放、键盘导航、明暗主题；完整 TypeScript、兼容 React 19、支持 Vite/Next.js；可处理 10,000+ 任务。SVAR PRO（约 $524/开发者 永久授权）增加：按项目/任务/资源的工作日日历、基线（原始计划与当前对比）、自动排期（依赖变化时任务自动移动）、拆分任务、撤销/重做、汇总、松弛时间可视化、导出 PDF/PNG/Excel、导入/导出 MS Project 文件。 - DHTMLX React Gantt（企业版，付费）：安装命令
npm install @dhx/react-gantt。可流畅渲染 30,000+ 任务；自动排期、关键路径计算；资源管理与直方图（PRO）；项目/任务/资源级别的工作时间日历；配合 Valtio 或 Redux 的撤销/重做；文档中有使用 MUI Button、Divider、ButtonGroup、图标 的官方 MUI 示例。Standard 免费（有限制）；PRO 约 $699/开发者；Team 约 $1,299。 - Bryntum Gantt（付费）：与 MS Project 功能对等的调度引擎（ChronoGraph）；带最早/最晚日期、自由松弛与总松弛的关键路径；基线支持任意数量快照；进度线可视化；带多选选择器的资源分配列；CSS 变量可对齐 MUI 主题令牌。约 $680–940/开发者 永久授权。SaaS/OEM 需要单独许可，需先联系确认。
- Syncfusion React Gantt（小团队免费）：面向营收 <$1M、开发者 ≤5 人、员工 ≤10 人的免费社区许可；通过
enableCriticalPath属性支持关键路径；资源视图、筛选、拆分任务、撤销/重做；属于 1,900+ 组件套件的一部分；支持导出 PDF/CSV/Excel。 - FullCalendar Premium（$480/开发者/年）：免费 MIT 版含日/周/月日历与拖拽；Premium 提供资源时间线（横向、类甘特）与垂直资源视图。最适合承包商可用性/预约视图，而非依赖关系甘特图。
文中给出功能对比矩阵，覆盖成本、React 原生支持、拖放、依赖、关键路径、基线、自动排期、资源管理、工作日历、MS Project 导入、导出 PDF/Excel、撤销/重做、MUI 主题、SaaS/OEM 许可、最大任务数等维度。
看板与拖拽库
- dnd-kit（现代标准，MIT 免费）：安装命令
npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities。是 react-beautiful-dnd 的后继者，React 拖拽的社区标准。资料给出使用 MUI Card、Paper、Chip、Avatar、Stack 构建可排序看板卡片与列的完整示例，并说明拦截onDragEnd调用 ASP.NET Core PATCH 端点处理列/顺序变更，使用 DragOverlay 配合 MUI 高度实现平滑动画幽灵。 - react-mui-scheduler（MUI 原生日历，MIT 免费）：安装命令
npm install react-mui-scheduler。基于@mui/material的月/周/日/时间线视图；按资源分组事件；工具栏含搜索栏、日期选择器、视图切换；支持 8 种语言本地化。最适合预约/可用性日历（承包商排期、活动预订）。 - Pragmatic Drag and Drop（Atlassian，MIT 免费）：安装命令
npm install @atlaskit/pragmatic-drag-and-drop。驱动 Jira 和 Trello 的拖放；API 比 dnd-kit 更底层，专为大规模生产级看板设计；自 2024 年起 MIT 开源。
按场景的推荐选型
承包商项目时间线（内部）→ SVAR Gantt Free（MIT）；SaaS 中完整的 MS Project 级甘特图 → Bryntum OEM 或 DHTMLX PRO（付费）；营收 <$1M 的早期 SaaS 免费甘特图 → Syncfusion Community（免费）；资源预订/可用性日历 → FullCalendar Premium + MUI（$480/年）；看板任务板（Jira 风格）→ dnd-kit + MUI Cards（MIT）；承包商预约排期 → react-mui-scheduler（MIT）；灵活时间线（预订、媒体）→ gantt-schedule-timeline-calendar（Freemium）。
架构：甘特图 + MUI DataGrid 侧边栏
资料给出将甘特时间线与配套 DataGrid 结合的实现方案：顶部 MUI AppBar 工具栏（缩放、视图切换 Gantt|Kanban|Calendar、DateRangePicker、导出）；左侧 MUI X DataGrid（状态标签、负责人头像、优先级条）；右侧甘特时间线，与 DataGrid 选择双向同步——点击 DataGrid 行滚动甘特定位到任务，点击甘特条选中 DataGrid 行；右侧 MUI Drawer 作为任务详情表单（RHF 表单、资源 Autocomplete、时间条目子 DataGrid）；工具栏使用 MUI GridToolbarContainer 承载缩放控件、视图切换、DateRangePicker。
示例代码展示了 handleGridRowClick 调用 ganttRef.current?.scrollToTask，以及 handleGanttTaskClick 调用 gridApiRef.current?.selectRow 与 scrollToIndexes 的双向同步逻辑。
使用方式
该技能以文档与代码示例的形式提供，开发者按需选择对应库，使用给出的 npm 安装命令安装，然后参考示例代码将其与 MUI 组件组合。核心模式为：甘特图库只负责时间线渲染与依赖逻辑，MUI 负责所有周边 UI——对话框、表单、通知、导航、主题与数据表格，从而获得与设计系统一致的统一体验。
适用场景
需要项目排期、看板任务管理、资源预订、预约排期的 MUI 应用前端开发。
限制
MUI X 无原生甘特图组件。各库的许可证、价格与功能范围如文中所述，部分高级功能需付费或满足特定条件（如 Syncfusion 社区许可的营收与人数限制）。SaaS/OEM 场景下部分库需额外授权。文中价格与授权条件为资料所述，实际使用前应核实。