syncfusion-react-gantt-chart

Syncfusion React 甘特图

Syncfusion React 甘特图（GanttComponent）是一款功能强大的项目管理组件，可用于在时间轴上可视化、安排和管理任务。它支持自动／手动排程、任务依赖关系、资源规划、交互式编辑、Excel／PDF 导出和丰富的自定义功能。

何时使用此技能

• 在 React 应用中实现甘特图或项目时间线
• 配置任务排程（自动、手动、自定义模式）
• 设置任务依赖关系（FS、SS、FF、SF）和约束条件（ASAP、MSO、FNET 等）
• 配置项目日历、任务日历、节假日、工作时间和每日工时规则
• 将本地或远程数据绑定到甘特图（本地数组、DataManager、UrlAdaptor、Ajax）
• 自定义任务栏、标签、里程碑和基线
• 配置资源和资源视图（包括多任务栏）
• 启用编辑（对话框、单元格、拖动任务栏）并设置验证规则
• 设置列宽调整、重新排序、冻结或列菜单
• 配置 WBS 代码、树形列图标或序号列
• 设置筛选、排序或选择，包括层级复选框选择
• 滚动到指定日期或以编程方式控制滚动位置
• 将甘特图导出为 Excel 或 PDF
• 处理甘特图事件并启用高级功能（撤销／重做、虚拟滚动、关键路径等）
• 支持全球化、本地化和 RTL

---

文档与导航指南

入门

📄 阅读： references/getting-started.md

• 安装和软件包依赖项
• Vite／CRA 项目设置
• 通过 npm 主题软件包安装主题包并导入 CSS
• 基本的 GanttComponent 和 taskFields 映射
• 模块注入指南（所有可用服务）
• gridLines 属性（'Both'／'Horizontal'／'Vertical'／'None'）
• 首次渲染演练，包含最小示例、输出摘要和常见注意事项

数据绑定

📄 阅读： references/data-binding.md

• 本地数组数据绑定
• 使用 DataManager 进行远程／AJAX 数据绑定
• 自引用扁平数据
• taskFields 配置（id、name、startDate、endDate、duration、progress、child）
• 自定义字段映射
• 用于服务端 CRUD 的 UrlAdaptor（url + batchUrl）
• 用于本地渲染并由服务端持久化的 RemoteSaveAdaptor
• 通过 load 事件中的 Query.addParams() 向服务端发送附加参数
• 使用 Ajax 类进行绑定（手动获取数据）
• 按需加载子项（loadChildOnDemand={false}、hasChildMapping）
• 使用 actionFailure 事件处理 HTTP 错误

任务排程

📄 阅读： references/task-scheduling.md

• 自动、手动和自定义排程模式（taskMode）
• 支持的工期单位：Day、Hour、Minute、Week 和 Month
• 使用 taskFields.durationUnit 映射每个任务的工期单位
• 包含单位的工期值（例如，5 days、2 weeks、1 month）
• 用于周／月排程换算的 daysPerWeek 和 daysPerMonth 控制项
• 周／月工期与工作时间、周末、节假日和任务日历的交互方式
• 未排程任务（仅工期、仅日期、无）
• 配置项目开始日期和结束日期
• 排程模式对父任务计算的影响
• 动态切换模式

绘制任务栏

📄 阅读： references/taskbar-draw.md

• allowTaskbarDraw API 和必需的编辑设置
• 绘制任务栏以创建或排程未排程任务
• 绘制范围如何确定 StartDate、EndDate 和 Duration
• 完全未排程、部分排程、父任务、子任务、里程碑和手动任务的行为
• 与任务栏编辑、对话框编辑、单元格编辑、验证、日历、节假日、依赖关系、资源和任务日历的交互
• 实用示例、限制和最佳实践

任务依赖关系

📄 阅读： references/task-dependency.md

• 依赖类型：完成到开始（FS）、开始到开始（SS）、完成到完成（FF）、开始到完成（SF）
• 在数据源中映射 taskFields.dependency（字符串格式："2FS"、"2FS+3d"、"2SS+2h"）
• 每个任务可有多个前置任务（以逗号分隔："2FS,3FS"）
• 偏移量及单位：天、小时、分钟（例如，"2FS+3h"、"2FS-1d"）
• 通过 UI 绘制依赖关系（从任务条连接点拖动）
• 以编程方式管理依赖关系（addPredecessor、removePredecessor、updatePredecessor）
• 自定义连接线（connectorLineWidth、connectorLineBackground）
• 前置任务偏移量同步
  • autoUpdatePredecessorOffset={true} — 加载时重新计算偏移量，以适应日历规则（周末、节假日）
  • autoUpdatePredecessorOffset={false} — 即使原始偏移量与绘制的连线不匹配，也显示原始偏移量（可能出现视觉不一致）
• 编辑期间更新偏移量
  • updateOffsetOnTaskbarEdit={true} — 拖动任务条时自动重新计算偏移量（默认）
  • updateOffsetOnTaskbarEdit={false} — 保留偏移量；需通过依赖关系对话框手动更新
• 依赖关系验证模式（在 actionBegin 事件中，requestType === 'validateLinkedTask' 时）
  • respectLink={true} — 撤销无效编辑，以保持依赖关系的完整性
  • removeLink={true} — 移除冲突的依赖关系，以允许编辑
  • preserveLinkWithEditing={true} — 更新偏移量以保持依赖关系（默认模式）
• 验证对话框 — 禁用所有模式以显示供用户选择的对话框（取消编辑、移除依赖关系、调整偏移量）
• 父任务依赖关系 — allowParentDependency={true} 允许跨父任务建立依赖关系；false 仅允许同级任务之间建立依赖关系
• 允许的依赖类型 — allowedDependencyTypes={['FS', 'SF']} 限制可加载、创建和编辑的依赖类型
• 动态显示/隐藏依赖关系 — 切换 .e-gantt-dependency-view-container CSS 可见性
• 禁用验证 — enablePredecessorValidation={false} 可禁用基于前置任务链接的自动日期验证

任务约束

📄 阅读： references/task-constraints.md

• 八种约束类型：ASAP、ALAP、MSO、MFO、SNET、SNLT、FNET、FNLT
• 映射 taskFields.constraintType 和 taskFields.constraintDate
• 约束与依赖关系及 taskMode 的交互方式
• 通过对话框编辑约束
• 验证和冲突处理

时间轴和缩放

📄 阅读： references/timeline.md

• timelineViewMode 快速预设（Hour、Day、Week、Month、Year）
• 独立配置顶层和底层（unit、format、count、formatter）
• 使用 count 合并时间轴单元格（每个单元格合并多个单位）
• 使用 formatter 自定义时间轴单元格格式（根据层级和模式）
• 使用 viewStartDate / viewEndDate 设置时间轴视图日期（锁定可见范围）
• weekStartDay — 控制每周列的起始日（0=周日，1=周一……）
• 使用 updateTimescaleView 自动更新时间刻度
• 在运行时动态更改时间轴模式（更新 timelineViewMode + refresh()）
• 使用 showTooltip 控制时间轴单元格工具提示的显示
• 使用 timelineTemplate 自定义时间轴模板（{ date, value, tier }）
• 使用 enableInfiniteTimelineScroll 无限滚动时间轴（通过水平滚动条或滚动箭头导航时扩展可见范围）
• 使用 previousTimeSpan() / nextTimeSpan() 导航时间轴
• 使用工具栏缩放（ZoomIn、ZoomOut、ZoomToFit）
• 使用 zoomingLevels（ZoomTimelineSettings）自定义缩放步长
• 以编程方式缩放：zoomIn()、zoomOut()、fitToProject()
• 使用 timelineUnitSize 设置时间轴单元格宽度
• 周末处理：
  • 使用 highlightWeekends={true} 高亮周末
  • 使用 timelineSettings.showWeekend 隐藏周末（存在已说明的限制）

列

📄 阅读： references/columns.md

• 列类型概览（树列、WBS、自定义列）
• 自动生成列（省略 ColumnsDirective）
• 使用 valueAccessor 渲染列（自定义显示值、拼接）
• 表达式列（通过 valueAccessor 计算值）
• 序号列配置（enableSerialNumber + field: 'SerialNumber'）
• 排序、筛选、搜索、展开/折叠、添加/编辑/删除、拖放、刷新和虚拟化期间的序号行为
• 树列配置（treeColumnIndex）
  • 自定义展开/折叠图标（覆盖 CSS）
  • 通过 queryCellInfo 自定义缩进
  • collapseAllParentTasks — 加载时全部折叠
  • taskFields.expandState — 设置每行的初始展开/折叠状态
  • 在 localStorage 中保留展开/折叠状态
• WBS（工作分解结构）列
  • enableWBS + enableAutoWbsUpdate API
  • 通过 taskFields.wbsPredecessor 手动设置 WBS
• 列标题、格式和对齐方式
  • 使用 headerTemplate 自定义标题渲染
  • 标题文本换行（treeGrid.textWrapSettings.wrapMode）
  • 动态更新标题文本（getColumnByField + refreshHeader）
• 列模板（自定义单元格渲染）和 editTemplate
• 列跨越和冻结列（frozenColumns，注入 Freeze）

列交互

📄 阅读： references/column-interactions.md

• 列调整大小（allowResizing，注入 Resize）
  • 使用每列的 minWidth / maxWidth 限制大小
  • 禁止调整单列大小（allowResizing={false}）
  • 调整大小模式：Normal 与 Auto（resizeSettings.mode）
  • 以编程方式调整大小（reorderColumns、refreshColumns）
  • 调整大小事件：resizeStart、resizing、resizeStop
• 列重新排序（allowReordering，注入 Reorder）
  • 禁止重新排序单列（allowReordering={false}）
  • 以编程方式重新排序：reorderColumns、reorderColumnByIndex、reorderColumnByTargetIndex
  • 重新排序拖动事件：columnDragStart、columnDrag、columnDrop
• 列菜单（showColumnMenu，注入 ColumnMenu）
  • 内置项目：SortAscending、SortDescending、AutoFit、AutoFitAll、ColumnChooser、Filter
  • 自定义列菜单项目 + columnMenuClick 事件
  • 禁用单列的菜单（showColumnMenu={false}）
• 切换列的可见性（显示/隐藏列）

行

📄 阅读： references/rows.md

• 行拖放（重新排序和更改任务的父级）
• 缩进和取消缩进（更改任务层级）
• 通过 queryCellInfo 事件跨行列合并
  • QueryCellInfoEventArgs，包含 rowSpan、colSpan、cell、data、column
  • 水平合并（colSpan）和垂直合并（rowSpan）
• 行高配置
• 通过 rowDataBound 设置行样式
• 以编程方式展开和折叠行

管理任务

📄 阅读： references/managing-tasks.md

• 添加新任务（工具栏、上下文菜单、编程式 addRecord()）
• 编辑任务——对话框编辑（mode: 'Dialog'）、单元格编辑（mode: 'Auto'）、拖动任务栏
• 为未排期任务绘制任务栏（allowTaskbarDraw）
• 绘制的任务栏如何生成或更新 StartDate、EndDate 和 Duration
• 完全未排期、部分排期、父任务、子任务、里程碑和手动任务的行为
• 与任务栏编辑、对话框编辑、单元格编辑、验证、日历、节假日、依赖关系和资源的交互
• 删除任务（工具栏、deleteRecord()、showDeleteConfirmDialog）
• 拖动任务栏进行编辑：移动、调整右侧边缘大小、拖动进度手柄、绘制依赖关系
• 拆分和合并任务（taskFields.segments、splitTask()、mergeTask()）
• 单元格编辑类型（editType）：stringedit、numericedit、datepickeredit、datetimepickeredit、dropdownedit、booleanedit
  • 每列的 edit.params，用于设置最小值/最大值/步长/格式/数据源
• 自定义添加/编辑对话框字段（addDialogFields、editDialogFields）
• 使用 UrlAdaptor 执行服务端 CRUD（url + batchUrl）
  • 服务端会在批处理请求正文中接收 added、changed、deleted 数组
• 列级验证规则（ColumnDirective 上的 validationRules）
  • 内置规则：required、min、max、minLength、date、regex
  • 自定义验证函数（[fn, 'message'] 回调模式）

筛选和搜索

📄 阅读： references/filtering-searching.md

• 基本列筛选（allowFiltering={true}，注入 Filter）
• 筛选层级模式：Parent、Child、Both、None
• 筛选菜单（字符串、数字、日期运算符）和类似 Excel 的清单筛选
• 工具栏搜索框（searchSettings：fields、operator、ignoreCase）
• 加载时的初始筛选状态（filterSettings.columns 数组）
• 编程式筛选 API：filterByColumn()、clearFiltering()
• 自定义多列筛选谓词

排序

📄 阅读： references/sorting.md

• 单列和多列排序
• 初始排序状态（sortSettings）
• 自定义排序比较器
• 编程式排序 API

选择

📄 阅读： references/selection.md

• 行选择模式（单选、多选）
• 单元格选择
• 带层级传播模式的复选框选择（Self、Hierarchy、FilteredHierarchy）
• 基于键盘的选择
• 编程式选择 API（selectRow、selectCell）

任务栏、标签和标记

📄 阅读： references/taskbar-labels-markers.md

• 任务栏模板（自定义渲染）
• 自定义父任务栏和里程碑
• 工具提示设置和模板（用于任务栏、连接线、基线和时间线的 tooltipSettings）
• 使用 beforeTooltipRender 禁用/隐藏特定 UI 目标的工具提示
• 左侧、右侧和任务标签配置
• 数据标记/指示器
• 事件标记（时间线上的截止日期、节假日）
• 基线渲染
• 使用 baselineTemplate 自定义基线模板
• 关键路径高亮

资源

📄 阅读： references/resources.md

• 定义资源集合（resources 属性）
• 为任务分配资源（taskFields.resourceInfo）——单个或多个资源，并可设置自定义单位
• 资源视图布局（viewType='ResourceView'、资源组）
• 多任务条（enableMultiTaskbar={true}）——每个折叠的资源行显示多个任务条
• 高亮显示资源分配超额的任务（showOverAllocatedTasks={true}）
• 资源单位和工时字段（resourceFields.unit、resourceFields.group）
• 通过 queryTaskbarInfo 自定义资源任务条样式

工具栏

📄 阅读： references/toolbar-context-menu.md

• 内置工具栏项：Add、Edit、Delete、Update、Cancel、Search、ExpandAll、CollapseAll、Indent、Outdent、PrevTimeSpan、NextTimeSpan、ZoomIn、ZoomOut、ZoomToFit、CriticalPath、ExcelExport、CsvExport、PdfExport、ColumnChooser、Undo、Redo、SplitTask、MergeTask
• 所需服务：Undo/Redo → UndoRedo；SplitTask/MergeTask → Edit；CriticalPath → CriticalPath；ExcelExport/CsvExport → ExcelExport；PdfExport → PdfExport；ColumnChooser → ColumnMenu
• 使用 ItemModel 添加自定义工具栏按钮；通过 toolbarClick 事件处理点击（args.item.id）
• 通过 enableItems() 以编程方式启用或禁用工具栏项

上下文菜单

📄 阅读： references/toolbar-context-menu.md

• 使用 enableContextMenu={true} 启用；注入 ContextMenu 服务
• 默认上下文菜单项：AutoFit、AutoFitAll、SortAscending、SortDescending、TaskInformation、Add、Indent、Outdent、DeleteTask、Save、Cancel、DeleteDependency、Convert、SplitTask、MergeTask
• 使用包含 target（.e-content 或 .e-gridheader）的 contextMenuItems 数组添加自定义上下文菜单项
• 通过 contextMenuClick 事件处理点击；通过 contextMenuOpen 控制可见性（args.hideItems）

Excel 导出

📄 阅读： references/excel-export.md

• 基本 Excel 导出
• 导出属性和自定义
• 将多个甘特图导出到同一个 Excel 工作簿
• 自定义数据源导出

PDF 导出

📄 阅读： references/pdf-export.md

• 基本 PDF 导出
• 自定义 PDF（字体、列、样式）
• 页眉和页脚配置
• 页面设置（方向、大小）

节假日、工作时间和时区

📄 阅读： references/holidays-working-time.md

• 定义节假日（holidays 属性、HolidayModel、DayMarkers 服务）
• 配置工作周（workWeek、includeWeekend）
• 每日工作时间（dayWorkingTime）
• 基于工作量的排程（taskFields.work、workUnit、任务类型：FixedWork / FixedDuration / FixedUnit）
• 时区支持（timezone 属性、IANA 时区字符串）

日历设置

📄 阅读： references/calendar-settings.md

• 通过 calendarSettings.projectCalendar 配置项目日历
• 通过 calendarSettings.taskCalendar 配置任务日历
• 使用 taskFields.calendarId 分配特定任务的日历
• 为特殊工作日、节假日和分段班次设置日历例外
• hoursPerDay 转换和基于天数的工期重新计算
• 对已分配任务，任务日历优先于项目日历
• 日历与依赖关系、周末、节假日和工作时间的交互

分隔条

📄 阅读： references/splitter.md

• 基于位置的分割（splitterSettings.position——百分比或像素）
• 基于列的分割（splitterSettings.columnIndex）
• 视图模式（splitterSettings.view——Default / Grid / Chart）
• 以编程方式调整大小（setSplitterPosition()）
• 分隔条事件（splitterResizeStart、splitterResizing、splitterResized）

滚动

📄 阅读： references/scrolling.md

• 设置 width 和 height 来控制滚动条
• 自适应容器（width='100%'、height='100%'，并设置 CSS 父元素高度）
• 滚动到指定日期（scrollToDate('MM/dd/yyyy')）
• 设置垂直滚动位置（ganttChartModule.scrollObject.setScrollTop(px)）

虚拟滚动

📄 阅读： references/virtual-scroll.md

• 行虚拟化（enableVirtualization={true}、VirtualScroll 服务）
• 时间线虚拟化（enableTimelineVirtualization={true}，需要 projectStartDate / projectEndDate）
• 组合使用行虚拟化和时间线虚拟化
• 使用虚拟滚动时获取筛选后的记录数（treeGrid.filterModule.filteredResult）
• 虚拟滚动限制（浏览器内存、单元格选择、像素高度、展开状态）

撤销 / 重做

📄 阅读： references/undo-redo.md

• 启用撤销 / 重做（enableUndoRedo、UndoRedo 服务）
• undoRedoActions — 可跟踪操作的完整列表及其所需服务
• undoRedoStepsCount — 历史记录栈大小
• 工具栏中的 'Undo' / 'Redo' 按钮和 Ctrl+Z / Ctrl+Y 键盘快捷键
• 通过组件 ref 以编程方式调用 undo() / redo()

状态持久化、不可变模式与加载

📄 阅读： references/state-persistence.md

• 状态持久化（enablePersistence={true}、唯一的 id 属性、localStorage）
• 重置持久化状态（更改 id 或清除 localStorage 条目）
• 不可变模式（enableImmutableMode={true}，需要 isPrimaryKey={true}）
• 加载动画（loadingIndicator.indicatorType：'Spinner' 或 'Shimmer'）
• 手动控制加载指示器（showSpinner() / hideSpinner()）

本地化与 RTL

📄 阅读： references/localization-rtl.md

• 设置区域设置（locale 属性）
• 加载自定义翻译（使用 'gantt' 命名空间键调用 L10n.load()）
• Gantt 区域设置键参考（所有可翻译的 UI 字符串）
• RTL 支持（enableRtl={true}）
• 列日期格式（format='yMd'、format='dd/MM/yyyy'）
• 列数字格式（format='C2'、format='N2'、format='P0'）

编程方法

📄 阅读： references/gantt-methods.md

• 列工具：autoFitColumns()
• 编辑控制：cancelEdit()、openAddDialog()、openEditDialog()
• 任务管理：deleteRecord()、convertToMilestone()、changeTaskMode()、updateRecordByID()、updateRecordByIndex()、updateTaskId()、updateDataSource()、updateProjectDates()
• 工具栏控制：enableItems()
• 展开 / 折叠：expandByID()、expandByIndex()、collapseByID()、collapseByIndex()
• 撤销 / 重做栈：clearUndoCollection()、clearRedoCollection()、getUndoActions()、getRedoActions()
• 数据检索：getCurrentViewData()、getRecordByID()、getTaskByUniqueID()、getTaskInfo()、getTaskbarHeight()、getExpandedRecords()、getGanttColumns()、getGridColumns()
• 格式化辅助方法：getDurationString()、getWorkString()
• DOM 访问：getRowByID()、getRowByIndex()
• 排序：removeSortColumn()
• 选择：selectCells()
• 行重新排序：reorderRows()
• 滚动：scrollToTask()、updateChartScrollOffset()

日历与排程方法

📄 阅读： references/calendar-settings.md

• 使用 hoursPerDay 将工作小时数转换为按天计的持续时间值
• 使用 calendarSettings.projectCalendar 设置项目范围的工作规则
• 使用 calendarSettings.taskCalendar 设置任务专属的工作规则
• 使用 taskFields.calendarId 将任务绑定到具名日历
• 未分配任务日历时的回退行为

事件

📄 阅读： references/events.md

• 生命周期事件（load、created、dataBound）
• 任务编辑事件（actionBegin、actionComplete）及 requestType 参考表
• 任务栏事件：taskbarEditing、taskbarEdited、taskbarClick
• 行展开/折叠事件：expanding、collapsing、expanded、collapsed
• 选择事件：rowSelected、rowDeselected、cellSelected、cellDeselected
• 导出事件：excelExportComplete、pdfExportComplete
• 列交互事件：resizeStart、resizing、resizeStop、columnDragStart、columnDrag、columnDrop
• 事件取消模式（args.cancel = true）
• 所有事件完整速查表（30 多个事件）

---

快速入门示例

import * as React from 'react';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Edit, Toolbar, Selection } from '@syncfusion/ej2-react-gantt';
import { TaskFieldsModel, EditSettingsModel } from '@syncfusion/ej2-gantt';
import './App.css';

// In App.css:
// @import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/gantt/index.css";

const data = [
  {
    TaskID: 1, TaskName: 'Project Initiation',
    StartDate: new Date('04/02/2024'), EndDate: new Date('04/21/2024'),
    subtasks: [
      { TaskID: 2, TaskName: 'Identify Site Location', StartDate: new Date('04/02/2024'), Duration: 4, Progress: 50 },
      { TaskID: 3, TaskName: 'Perform Soil Test', StartDate: new Date('04/02/2024'), Duration: 4, Progress: 50, Predecessor: '2' },
      { TaskID: 4, TaskName: 'Soil Test Approval', StartDate: new Date('04/08/2024'), Duration: 0, Predecessor: '3FS', Progress: 50 },
    ]
  }
];

const taskFields: TaskFieldsModel = {
  id: 'TaskID',
  name: 'TaskName',
  startDate: 'StartDate',
  endDate: 'EndDate',
  duration: 'Duration',
  progress: 'Progress',
  dependency: 'Predecessor',
  child: 'subtasks',
};

const editSettings: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true, allowTaskbarEditing: true };

function App() {
  return (
    <GanttComponent
      dataSource={data}
      taskFields={taskFields}
      editSettings={editSettings}
      toolbar={['Add', 'Edit', 'Delete', 'Cancel', 'Update', 'Search', 'ZoomIn', 'ZoomOut', 'ZoomToFit']}
      height="450px"
    >
      <ColumnsDirective>
        <ColumnDirective field="TaskID" width="80" />
        <ColumnDirective field="TaskName" headerText="Task Name" width="250" />
        <ColumnDirective field="StartDate" />
        <ColumnDirective field="Duration" />
        <ColumnDirective field="Progress" />
      </ColumnsDirective>
      <Inject services={[Edit, Toolbar, Selection]} />
    </GanttComponent>
  );
}

export default App;

---

常见模式

使用对话框启用编辑

<GanttComponent
  editSettings={{ allowEditing: true, mode: 'Dialog' }}
>
  <Inject services={[Edit]} />
</GanttComponent>

启用单元格编辑

<GanttComponent
  editSettings={{ allowEditing: true, mode: 'Auto' }}
>
  <Inject services={[Edit]} />
</GanttComponent>

以编程方式添加任务

const ganttRef = React.useRef<GanttComponent>(null);

const addTask = () => {
  ganttRef.current?.addRecord({ TaskID: 10, TaskName: 'New Task', Duration: 3 }, 'Below', 1);
};

导出为 Excel

<GanttComponent toolbar={['ExcelExport']} allowExcelExport={true}>
  <Inject services={[ExcelExport, Toolbar]} />
</GanttComponent>

导出为 PDF

<GanttComponent toolbar={['PdfExport']} allowPdfExport={true}>
  <Inject services={[PdfExport, Toolbar]} />
</GanttComponent>

列级验证规则

<ColumnsDirective>
  <ColumnDirective field="TaskName" validationRules={{ required: true }} />
  <ColumnDirective field="Duration"  validationRules={{ min: 1, max: 100 }} />
</ColumnsDirective>

以编程方式滚动到日期

const ganttRef = React.useRef<GanttComponent>(null);

ganttRef.current?.scrollToDate('04/28/2024');

设置最小/最大宽度的列调整

<ColumnDirective field="TaskName" minWidth="100" maxWidth="400" allowResizing={true} />

以编程方式重新排列列

const ganttRef = React.useRef<GanttComponent>(null);

// By field names:
(ganttRef.current as any).treeGrid.reorderColumns(['Duration', 'Progress'], 'TaskName');

// By index:
(ganttRef.current as any).treeGrid.reorderColumnByIndex(2, 0);

保留树形结构的展开/折叠状态

// In taskFields — map a boolean field that controls initial expand state:
const taskFields = { ..., expandState: 'isExpand' };

// Or collapse all on load:
<GanttComponent collapseAllParentTasks={true} .../>

---

关键模块注入

功能	要注入的服务
编辑（添加/编辑/删除/拖动任务栏）	Edit
筛选	Filter
排序	Sort
工具栏	Toolbar
选择	Selection
日期标记 / 节假日 / 事件标记	DayMarkers
关键路径	CriticalPath
Excel / CSV 导出	ExcelExport
PDF 导出	PdfExport
撤销 / 重做	UndoRedo
列菜单	ColumnMenu
上下文菜单	ContextMenu
虚拟滚动	VirtualScroll
行拖放	RowDD
列重新排序	Reorder
冻结列	Freeze
列宽调整	Resize

用法模式：

import { GanttComponent, Inject, Edit, Filter, Sort, Toolbar, Selection } from '@syncfusion/ej2-react-gantt';

<GanttComponent ...>
  <Inject services={[Edit, Filter, Sort, Toolbar, Selection]} />
</GanttComponent>

---

关键属性参考

属性	类型	用途
dataSource	object[] / DataManager	任务数据（本地数据或通过 DataManager 获取的远程数据）
taskFields	TaskFieldsModel	任务属性的字段映射
editSettings	EditSettingsModel	启用添加、编辑、删除和任务条编辑
toolbar	string[]	要显示的工具栏项
taskMode	Auto / Manual / Custom	排程模式
resources	object[]	资源数据集合
resourceFields	ResourceFieldsModel	资源字段映射
allowSorting	boolean	启用排序
allowFiltering	boolean	启用筛选
allowReordering	boolean	启用列重新排序
allowResizing	boolean	启用列大小调整
allowExcelExport	boolean	启用 Excel 导出
allowPdfExport	boolean	启用 PDF 导出
undoRedoActions	string[]	撤销/重做跟踪的操作
timelineSettings	TimelineSettingsModel	时间线层级和单位配置
splitterSettings	SplitterSettingsModel	网格/图表面板比例
highlightWeekends	boolean	为周末列着色
holidays	HolidayModel[]	标记节假日日期
eventMarkers	EventMarkerModel[]	时间线上的垂直标记
treeColumnIndex	number	显示展开/折叠图标的列索引
collapseAllParentTasks	boolean	初始加载时折叠所有父任务行
enableWBS	boolean	根据任务层级自动生成 WBS 代码
enableAutoWbsUpdate	boolean	在 CRUD/排序/拖放操作后重新计算 WBS 代码
frozenColumns	number	左侧固定列的数量
enableMultiTaskbar	boolean	每个资源行显示多个任务条
allowTaskbarOverlap	boolean	控制多个任务条是否重叠（true，默认值），或是否堆叠并增加行高（false）
viewType	string	'ProjectView' 或 'ResourceView'
showColumnMenu	boolean	显示列级菜单（排序、筛选、自适应列宽）
columnMenuItems	string[]	限定要显示的列菜单项
showColumnChooser	boolean	通过工具栏 ColumnChooser 项启用列选择器对话框
allowSelection	boolean	启用行/单元格选择
selectionSettings	SelectionSettingsModel	选择模式（Row/Cell）、类型（Single/Multiple）
gridLines	string	网格线样式：'Both' | 'Horizontal' | 'Vertical' | 'None'
renderBaseline	boolean	显示基线条以及实际任务条
baselineColor	string	基线条的 CSS 颜色
baselineTemplate	function/string	为计划排程和高级基线布局自定义基线渲染
enableInfiniteTimelineScroll	boolean	启用无限水平时间线滚动，随用户浏览扩展可见范围
enableCriticalPath	boolean	高亮关键路径上的任务和连接线
enableRtl	boolean	启用从右向左的布局
locale	string	区域设置代码（例如 'fr'、'de'、'ar'）
allowRowDragAndDrop	boolean	启用行拖放，以重新排序或更改父级
enableImmutableMode	boolean	数据更新时仅重新渲染发生变化的行（需要 isPrimaryKey）
enablePersistence	boolean	将 UI 状态（排序、筛选、列宽）持久化到 localStorage
loadingIndicator	object	加载动画类型：{ indicatorType: 'Spinner' | 'Shimmer' }
workWeek	string[]	工作日，例如 ['Monday','Tuesday','Wednesday','Thursday','Friday']
includeWeekend	boolean	计算工期时将周末计为工作日
timezone	string	Gantt 使用的 IANA 时区（例如 'America/New_York'）
showOverAllocatedTasks	boolean	在 ResourceView 中高亮资源分配超额的任务
enableUndoRedo	boolean	启用撤销/重做跟踪（注入 UndoRedo 服务）
undoRedoStepsCount	number	撤销/重做历史记录的最大步数（默认值：10）
enableVirtualization	boolean	为大型数据集启用行虚拟化
enableTimelineVirtualization	boolean	启用时间线（水平）虚拟化
rowHeight	number	统一的行高（像素）
taskbarHeight	number	任务条高度（像素）（必须 ≤ rowHeight）
connectorLineWidth	number	依赖关系连接线的宽度
connectorLineBackground	string	依赖关系连接线的颜色