syncfusion-react-gantt-chart

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Syncfusion React Gantt Chart

The Syncfusion React Gantt Chart (

GanttComponent

) is a powerful project management component for visualizing, scheduling, and managing tasks over a timeline. It supports auto/manual scheduling, task dependencies, resource planning, interactive editing, Excel/PDF export, and rich customization.

Syncfusion React Gantt Chart（

GanttComponent

）是一个功能强大的项目管理组件，用于在时间轴上可视化、调度和管理任务。它支持自动/手动调度、任务依赖、资源规划、交互式编辑、Excel/PDF导出以及丰富的自定义功能。

When to Use This Skill

何时使用此技能

Implementing a Gantt chart or project timeline in a React app
Configuring task scheduling (auto, manual, custom modes)
Setting up task dependencies (FS, SS, FF, SF) and constraints (ASAP, MSO, FNET, etc.)
Binding local or remote data to the Gantt (local array, DataManager, UrlAdaptor, Ajax)
Customizing taskbars, labels, milestones, and baselines
Configuring resources and resource views (including multi-taskbar)
Enabling editing (dialog, cell, taskbar drag) with validation rules
Setting up column resize, reorder, freeze, or column menu
Configuring WBS codes, tree column icons, or serial number columns
Setting up filtering, sorting, or selection
Scrolling to specific dates or controlling scroll position programmatically
Exporting Gantt to Excel or PDF
Handling Gantt events and enabling advanced features (undo/redo, virtual scroll, critical path, etc.)
Globalization, localization, and RTL support

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

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

Installation and package dependencies
Vite / CRA project setup
CSS theme imports (all 14 required packages)
Basic
```
GanttComponent
```
with
```
taskFields
```
mapping
Module injection guide (all available services)

gridLines

prop (

'Both'

'Horizontal'

'Vertical'

'None'

)

First render walkthrough with minimal example and common gotchas

📄 阅读： references/getting-started.md

安装和包依赖
Vite / CRA项目设置
CSS主题导入（全部14个必需包）
带
```
taskFields
```
映射的基础
```
GanttComponent
```
模块注入指南（所有可用服务）

gridLines

属性（

'Both'

'Horizontal'

'Vertical'

'None'

）

带最小示例和常见问题的首次渲染指南

Data Binding

数据绑定

📄 Read: references/data-binding.md

Local array data binding
Remote / AJAX data binding with
```
DataManager
```
Self-referential flat data
```
taskFields
```
configuration (id, name, startDate, endDate, duration, progress, child)
Custom field mapping
UrlAdaptor for server-side CRUD (
```
url
```
+
```
batchUrl
```
)
RemoteSaveAdaptor for local rendering with server persistence
Sending additional parameters to server via
```
Query.addParams()
```
in
```
load
```
event
Binding with
```
Ajax
```
class (manual fetch)

Load child on demand (

loadChildOnDemand={false}

hasChildMapping

)

Handling HTTP errors with
```
actionFailure
```
event

📄 阅读： references/data-binding.md

本地数组数据绑定
使用
```
DataManager
```
进行远程/AJAX数据绑定
自引用扁平数据
```
taskFields
```
配置（id、name、startDate、endDate、duration、progress、child）
自定义字段映射
UrlAdaptor用于服务端CRUD（
```
url
```
+
```
batchUrl
```
）
RemoteSaveAdaptor用于本地渲染加服务端持久化
通过
```
load
```
事件中的
```
Query.addParams()
```
向服务端发送额外参数
使用
```
Ajax
```
类进行绑定（手动获取数据）

按需加载子任务（

loadChildOnDemand={false}

，

hasChildMapping

）

通过
```
actionFailure
```
事件处理HTTP错误

Task Scheduling

任务调度

📄 Read: references/task-scheduling.md

Auto, Manual, and Custom scheduling modes (
```
taskMode
```
)
Unscheduled tasks (duration-only, date-only, none)
Project start date and end date configuration
How scheduling mode affects parent task calculation
Switching between modes dynamically

📄 阅读： references/task-scheduling.md

自动、手动和自定义调度模式（
```
taskMode
```
）
未调度任务（仅持续时间、仅日期、无）
项目开始和结束日期配置
调度模式如何影响父任务计算
动态切换模式

Task Dependency

任务依赖

📄 Read: references/task-dependency.md

Dependency types: Finish-to-Start (FS), Start-to-Start (SS), Finish-to-Finish (FF), Start-to-Finish (SF)

Mapping

taskFields.dependency

in data source (string format:

"2FS"

"2FS+3d"

"2SS+2h"

)

Multiple predecessors per task (comma-separated:
```
"2FS,3FS"
```
)
Offset values with units: day, hour, minute (e.g.,
```
"2FS+3h"
```
,
```
"2FS-1d"
```
)
Drawing dependencies via UI (drag from taskbar connection points)

Programmatic dependency management (

addPredecessor

removePredecessor

updatePredecessor

)

Connector line customization (

connectorLineWidth

connectorLineBackground

)

Predecessor Offset Synchronization
- ```
autoUpdatePredecessorOffset={true}
```
  — recalculate offsets on load to account for calendar rules (weekends, holidays)
- ```
autoUpdatePredecessorOffset={false}
```
  — display original offsets even if not matching rendered lines (visual inconsistency possible)
Offset Updates During Editing
- ```
updateOffsetOnTaskbarEdit={true}
```
  — auto-recalculate offsets when dragging taskbars (default)
- ```
updateOffsetOnTaskbarEdit={false}
```
  — preserve offsets; manual update required via dependency dialog
Dependency Validation Modes (in
```
actionBegin
```
event with
```
requestType === 'validateLinkedTask'
```
)
- ```
respectLink={true}
```
  — revert invalid edits to maintain dependency integrity
- ```
removeLink={true}
```
  — remove conflicting dependencies to allow edits
- ```
preserveLinkWithEditing={true}
```
  — update offsets to maintain links (default mode)
Validation Dialog — disable all modes to show user-choice dialog (cancel edit, remove link, adjust offset)
Parent Dependencies —
```
allowParentDependency={true}
```
allows cross-parent dependencies;
```
false
```
restricts to siblings only
Show/Hide Dependencies Dynamically — toggle
```
.e-gantt-dependency-view-container
```
CSS visibility
Disable Validation —
```
enablePredecessorValidation={false}
```
disables auto-date validation based on predecessor links

📄 阅读： 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
```
仅限制为同级任务
动态显示/隐藏依赖关系 — 切换
```
.e-gantt-dependency-view-container
```
的CSS可见性
禁用验证 —
```
enablePredecessorValidation={false}
```
禁用基于前置任务链接的自动日期验证

Task Constraints

任务约束

📄 Read: references/task-constraints.md

Eight constraint types: ASAP, ALAP, MSO, MFO, SNET, SNLT, FNET, FNLT

Mapping

taskFields.constraintType

and

taskFields.constraintDate

How constraints interact with dependencies and
```
taskMode
```
Editing constraints via dialog
Validation and conflict handling

📄 阅读： references/task-constraints.md

八种约束类型：ASAP、ALAP、MSO、MFO、SNET、SNLT、FNET、FNLT

映射

taskFields.constraintType

和

taskFields.constraintDate

约束如何与依赖关系和
```
taskMode
```
交互
通过对话框编辑约束
验证和冲突处理

Timeline and Zooming

时间轴与缩放

📄 Read: references/timeline.md

```
timelineViewMode
```
quick presets (
```
Hour
```
,
```
Day
```
,
```
Week
```
,
```
Month
```
,
```
Year
```
)
Top tier and bottom tier independent configuration (
```
unit
```
,
```
format
```
,
```
count
```
,
```
formatter
```
)
Custom timeline cell rendering via
```
formatter
```
function
```
timelineUnitSize
```
— pixel width per cell
```
weekStartDay
```
— controls which day starts a week column (0=Sun, 1=Mon…)
Weekend highlighting (
```
highlightWeekends={true}
```
)
Zoom in, zoom out, zoom to fit (toolbar + programmatic
```
zoomIn()
```
,
```
zoomOut()
```
,
```
fitToProject()
```
)

📄 阅读： references/timeline.md

```
timelineViewMode
```
快速预设（
```
Hour
```
、
```
Day
```
、
```
Week
```
、
```
Month
```
、
```
Year
```
）
顶层和底层独立配置（
```
unit
```
、
```
format
```
、
```
count
```
、
```
formatter
```
）
通过
```
formatter
```
函数自定义时间轴单元格渲染
```
timelineUnitSize
```
— 每个单元格的像素宽度
```
weekStartDay
```
— 控制周列从哪一天开始（0=周日，1=周一…）
周末高亮（
```
highlightWeekends={true}
```
）
放大、缩小、适合窗口（工具栏 + 程序化
```
zoomIn()
```
、
```
zoomOut()
```
、
```
fitToProject()
```
）

Columns

列

📄 Read: references/columns.md

Column types overview (tree column, WBS, custom columns)
Auto-generated columns (omit
```
ColumnsDirective
```
)
Column rendering with
```
valueAccessor
```
(custom display values, concatenation)
Expression columns (calculated values via
```
valueAccessor
```
)
Display serial numbers via
```
rowDataBound
```
Tree column configuration (
```
treeColumnIndex
```
)
- Customize expand/collapse icons (CSS override)
- Customize indentation via
```
queryCellInfo
```
- ```
collapseAllParentTasks
```
  — collapse all on load
- ```
taskFields.expandState
```
  — per-row initial expand/collapse
- Persist expand/collapse state in
```
localStorage
```
WBS (Work Breakdown Structure) column
- ```
enableWBS
```
  +
```
enableAutoWbsUpdate
```
  APIs
- Manual WBS with
```
taskFields.wbsPredecessor
```
Column headers, format, and alignment
- ```
headerTemplate
```
  for custom header rendering
- Header text wrapping (
```
treeGrid.textWrapSettings.wrapMode
```
  )
- Dynamic header text update (
```
getColumnByField
```
  +
```
refreshHeader
```
  )
Column templates (custom cell rendering) and
```
editTemplate
```
Column spanning and frozen columns (
```
frozenColumns
```
, inject
```
Freeze
```
)

📄 阅读： references/columns.md

列类型概述（树形列、WBS、自定义列）
自动生成列（省略
```
ColumnsDirective
```
）
使用
```
valueAccessor
```
渲染列（自定义显示值、拼接）
表达式列（通过
```
valueAccessor
```
计算值）
通过
```
rowDataBound
```
显示序列号
树形列配置（
```
treeColumnIndex
```
）
- 自定义展开/折叠图标（CSS覆盖）
- 通过
```
queryCellInfo
```
  自定义缩进
- ```
collapseAllParentTasks
```
  — 加载时全部折叠
- ```
taskFields.expandState
```
  — 每行初始展开/折叠状态
- 在
```
localStorage
```
  中持久化展开/折叠状态
WBS（工作分解结构）列
- ```
enableWBS
```
  +
```
enableAutoWbsUpdate
```
  API
- 使用
```
taskFields.wbsPredecessor
```
  手动设置WBS
列标题、格式和对齐
- ```
headerTemplate
```
  用于自定义标题渲染
- 标题文本换行（
```
treeGrid.textWrapSettings.wrapMode
```
  ）
- 动态更新标题文本（
```
getColumnByField
```
  +
```
refreshHeader
```
  ）
列模板（自定义单元格渲染）和
```
editTemplate
```
列合并和冻结列（
```
frozenColumns
```
，注入
```
Freeze
```
）

Column Interactions

列交互

📄 Read: references/column-interactions.md

Column resizing (
```
allowResizing
```
, inject
```
Resize
```
)
- Restrict with
```
minWidth
```
  /
```
maxWidth
```
  per column
- Prevent resize per column (
```
allowResizing={false}
```
  )
- Resize modes: Normal vs Auto (
```
resizeSettings.mode
```
  )
- Programmatic resize (
```
reorderColumns
```
  ,
```
refreshColumns
```
  )
- Resize events:
```
resizeStart
```
  ,
```
resizing
```
  ,
```
resizeStop
```

Column reorder (

allowReordering

, inject

Reorder

)

Disable reorder per column (
```
allowReordering={false}
```
)

Programmatic reorder:

reorderColumns

reorderColumnByIndex

reorderColumnByTargetIndex

Reorder drag events:
```
columnDragStart
```
,
```
columnDrag
```
,
```
columnDrop
```

Column menu (
```
showColumnMenu
```
, inject
```
ColumnMenu
```
)
- Built-in items: SortAscending, SortDescending, AutoFit, AutoFitAll, ColumnChooser, Filter
- Custom column menu items +
```
columnMenuClick
```
  event
- Disable per column (
```
showColumnMenu={false}
```
  )
Toggling column visibility (show/hide columns)

📄 阅读： references/column-interactions.md

列调整大小（
```
allowResizing
```
，注入
```
Resize
```
）
- 通过
```
minWidth
```
  /
```
maxWidth
```
  限制每列
- 禁止某列调整大小（
```
allowResizing={false}
```
  ）
- 调整大小模式：普通 vs 自动（
```
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}
```
  ）
切换列可见性（显示/隐藏列）

Rows

行

📄 Read: references/rows.md

Row drag-and-drop (reorder and reparent tasks)
Indent and outdent (change task hierarchy)

Row spanning via

queryCellInfo

event

QueryCellInfoEventArgs

with

rowSpan

colSpan

cell

data

column

Horizontal spanning (
```
colSpan
```
) and vertical spanning (
```
rowSpan
```
)

Row height configuration
Row styling via
```
rowDataBound
```
Expand and collapse rows programmatically

📄 阅读： references/rows.md

行拖拽（重新排序和重排任务层级）
缩进和取消缩进（更改任务层级）
通过
```
queryCellInfo
```
事件实现行合并
- ```
QueryCellInfoEventArgs
```
  包含
```
rowSpan
```
  、
```
colSpan
```
  、
```
cell
```
  、
```
data
```
  、
```
column
```
- 水平合并（
```
colSpan
```
  ）和垂直合并（
```
rowSpan
```
  ）
行高配置
通过
```
rowDataBound
```
设置行样式
程序化展开和折叠行

Managing Tasks

任务管理

📄 Read: references/managing-tasks.md

Adding new tasks (toolbar, context menu, programmatic
```
addRecord()
```
)
Editing tasks — dialog edit (
```
mode: 'Dialog'
```
), cell edit (
```
mode: 'Auto'
```
), taskbar drag
Deleting tasks (toolbar,
```
deleteRow()
```
,
```
showDeleteConfirmDialog
```
)
Taskbar drag editing: move, resize right edge, progress handle, dependency drawing

Splitting and merging tasks (

taskFields.segments

splitTask()

mergeTask()

)

Cell edit types (

editType

stringedit

numericedit

datepickeredit

datetimepickeredit

dropdownedit

booleanedit

```
edit.params
```
for min/max/step/format/dataSource per column

Customizing add/edit dialog fields (
```
addDialogFields
```
,
```
editDialogFields
```
)
Server-side CRUD with
```
UrlAdaptor
```
(
```
url
```
+
```
batchUrl
```
)
- Server receives
```
added
```
  ,
```
changed
```
  ,
```
deleted
```
  arrays in the batch request body
Column-level validation rules (
```
validationRules
```
on
```
ColumnDirective
```
)
- Built-in rules:
```
required
```
  ,
```
min
```
  ,
```
max
```
  ,
```
minLength
```
  ,
```
date
```
  ,
```
regex
```
- Custom validator functions (
```
[fn, 'message']
```
  callback pattern)

📄 阅读： references/managing-tasks.md

添加新任务（工具栏、上下文菜单、程序化
```
addRecord()
```
）
编辑任务 — 对话框编辑（
```
mode: 'Dialog'
```
）、单元格编辑（
```
mode: 'Auto'
```
）、任务栏拖拽
删除任务（工具栏、
```
deleteRow()
```
、
```
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']
```
  回调模式）

Filtering and Searching

筛选与搜索

📄 Read: references/filtering-searching.md

Basic column filtering (
```
allowFiltering={true}
```
, inject
```
Filter
```
)
Filter hierarchy modes:
```
Parent
```
,
```
Child
```
,
```
Both
```
,
```
None
```
Filter menu (string, number, date operators) and Excel-like checklist filter
Toolbar search box (
```
searchSettings
```
:
```
fields
```
,
```
operator
```
,
```
ignoreCase
```
)
Initial filter state on load (
```
filterSettings.columns
```
array)
Programmatic filter API:
```
filterByColumn()
```
,
```
clearFiltering()
```
Custom multi-column filter predicates

📄 阅读： references/filtering-searching.md

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

Sorting

排序

📄 Read: references/sorting.md

Single-column and multi-column sorting
Initial sort state (
```
sortSettings
```
)
Custom sort comparers
Programmatic sorting API

📄 阅读： references/sorting.md

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

Selection

选择

📄 Read: references/selection.md

Row selection modes (single, multiple)
Cell selection
Keyboard-based selection
Programmatic selection API (
```
selectRow
```
,
```
selectCell
```
)

📄 阅读： references/selection.md

行选择模式（单选、多选）
单元格选择
基于键盘的选择
程序化选择API（
```
selectRow
```
、
```
selectCell
```
）

Taskbar, Labels, and Markers

任务栏、标签与标记

📄 Read: references/taskbar-labels-markers.md

Taskbar template (custom rendering)
Parent taskbar and milestone customization
Left, right, and task label configuration
Data markers / indicators
Event markers (deadlines, holidays on timeline)
Baseline rendering
Critical path highlighting

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

任务栏模板（自定义渲染）
父任务栏和里程碑自定义
左侧、右侧和任务标签配置
数据标记/指示器
事件标记（时间轴上的截止日期、节假日）
基线渲染
关键路径高亮

Resources

资源

📄 Read: references/resources.md

Defining resource collection (
```
resources
```
property)
Assigning resources to tasks (
```
taskFields.resourceInfo
```
) — single or multiple with custom units
Resource view layout (
```
viewType='ResourceView'
```
, resource groups)
Multi-taskbar (
```
enableMultiTaskbar={true}
```
) — multiple taskbars per collapsed resource row
Over-allocation highlighting (
```
showOverAllocatedTasks={true}
```
)
Resource unit and work fields (
```
resourceFields.unit
```
,
```
resourceFields.group
```
)
Custom resource taskbar styling via
```
queryTaskbarInfo
```

📄 阅读： references/resources.md

定义资源集合（
```
resources
```
属性）
为任务分配资源（
```
taskFields.resourceInfo
```
）— 单个或多个带自定义单位
资源视图布局（
```
viewType='ResourceView'
```
，资源组）
多任务栏（
```
enableMultiTaskbar={true}
```
）— 折叠资源行显示多个任务栏
过度分配高亮（
```
showOverAllocatedTasks={true}
```
）
资源单位和工作字段（
```
resourceFields.unit
```
、
```
resourceFields.group
```
）
通过
```
queryTaskbarInfo
```
自定义资源任务栏样式

Toolbar and Context Menu

工具栏与上下文菜单

📄 Read: references/toolbar-context-menu.md

Built-in toolbar items:

Add

Edit

Delete

Update

Cancel

Search

ExpandAll

CollapseAll

Indent

Outdent

ZoomIn

ZoomOut

ZoomToFit

CriticalPath

ExcelExport

CsvExport

PdfExport

ColumnChooser

Undo

Redo

SplitTask

MergeTask

Required services per toolbar item (e.g.
```
Undo
```
/
```
Redo
```
→
```
UndoRedo
```
,
```
SplitTask
```
→
```
Edit
```
)
Custom toolbar buttons (
```
ItemModel
```
) and
```
toolbarClick
```
handler

Default context menu items including

SplitTask

MergeTask

Convert

DeleteDependency

Custom context menu items,

contextMenuClick

contextMenuOpen

(

args.hideItems

)

Enabling/disabling toolbar items dynamically

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

内置工具栏项：

Add

、

Edit

、

Delete

、

Update

、

Cancel

、

Search

、

ExpandAll

、

CollapseAll

、

Indent

、

Outdent

、

ZoomIn

、

ZoomOut

、

ZoomToFit

、

CriticalPath

、

ExcelExport

、

CsvExport

、

PdfExport

、

ColumnChooser

、

Undo

、

Redo

、

SplitTask

、

MergeTask

每个工具栏项所需的服务（例如
```
Undo
```
/
```
Redo
```
→
```
UndoRedo
```
，
```
SplitTask
```
→
```
Edit
```
）
自定义工具栏按钮（
```
ItemModel
```
）和
```
toolbarClick
```
处理程序

默认上下文菜单项包括

SplitTask

、

MergeTask

、

Convert

、

DeleteDependency

自定义上下文菜单项、

contextMenuClick

、

contextMenuOpen

（

args.hideItems

）

动态启用/禁用工具栏项

Excel Export

Excel导出

📄 Read: references/excel-export.md

Basic Excel export
Export properties and customization
Exporting multiple Gantt charts to a single Excel workbook
Custom data source export

📄 阅读： references/excel-export.md

基础Excel导出
导出属性和自定义
将多个甘特图导出到单个Excel工作簿
自定义数据源导出

PDF Export

PDF导出

📄 Read: references/pdf-export.md

Basic PDF export
Customizing PDF (fonts, columns, styles)
Header and footer configuration
Page settings (orientation, size)

📄 阅读： references/pdf-export.md

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

Holidays, Working Time & Timezone

节假日、工作时间与时区

📄 Read: references/holidays-working-time.md

Defining holidays (
```
holidays
```
prop,
```
HolidayModel
```
,
```
DayMarkers
```
service)
Work week configuration (
```
workWeek
```
,
```
includeWeekend
```
)
Daily working time (
```
dayWorkingTime
```
)
Effort-based scheduling (
```
taskFields.work
```
,
```
workUnit
```
, task types: FixedWork / FixedDuration / FixedUnit)
Timezone support (
```
timezone
```
prop, IANA timezone strings)

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

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

Splitter

拆分器

📄 Read: references/splitter.md

Position-based split (
```
splitterSettings.position
```
— percentage or pixels)
Column-based split (
```
splitterSettings.columnIndex
```
)
View mode (
```
splitterSettings.view
```
— Default / Grid / Chart)
Programmatic resize (
```
setSplitterPosition()
```
)

Splitter events (

splitterResizeStart

splitterResizing

splitterResized

)

📄 阅读： references/splitter.md

基于位置的拆分（
```
splitterSettings.position
```
— 百分比或像素）
基于列的拆分（
```
splitterSettings.columnIndex
```
）
视图模式（
```
splitterSettings.view
```
— Default / Grid / Chart）
程序化调整大小（
```
setSplitterPosition()
```
）

拆分器事件（

splitterResizeStart

、

splitterResizing

、

splitterResized

）

Scrolling

滚动

📄 Read: references/scrolling.md

Setting
```
width
```
and
```
height
```
for scrollbar control
Responsive container (
```
width='100%'
```
,
```
height='100%'
```
with CSS parent height)
Scroll to a date (
```
scrollToDate('MM/dd/yyyy')
```
)

Set vertical scroll position (

ganttChartModule.scrollObject.setScrollTop(px)

)

📄 阅读： references/scrolling.md

设置
```
width
```
和
```
height
```
以控制滚动条
响应式容器（
```
width='100%'
```
、
```
height='100%'
```
配合CSS父元素高度）
滚动到指定日期（
```
scrollToDate('MM/dd/yyyy')
```
）

设置垂直滚动位置（

ganttChartModule.scrollObject.setScrollTop(px)

）

Virtual Scroll

虚拟滚动

📄 Read: references/virtual-scroll.md

Row virtualization (

enableVirtualization={true}

VirtualScroll

service)

Timeline virtualization (

enableTimelineVirtualization={true}

, requires

projectStartDate

projectEndDate

)

Combining row + timeline virtualization
Accessing filtered record count with virtual scroll (
```
treeGrid.filterModule.filteredResult
```
)
Virtual scroll limitations (browser memory, cell selection, pixel height, expand state)

📄 阅读： references/virtual-scroll.md

行虚拟化（

enableVirtualization={true}

，

VirtualScroll

服务）

时间轴虚拟化（

enableTimelineVirtualization={true}

，需要

projectStartDate

projectEndDate

）

行 + 时间轴虚拟化结合
虚拟滚动下获取筛选记录数（
```
treeGrid.filterModule.filteredResult
```
）
虚拟滚动限制（浏览器内存、单元格选择、像素高度、展开状态）

Undo / Redo

撤销/重做

📄 Read: references/undo-redo.md

Enable undo/redo (
```
enableUndoRedo
```
,
```
UndoRedo
```
service)
```
undoRedoActions
```
— full list of trackable actions and required services
```
undoRedoStepsCount
```
— history stack size
Toolbar
```
'Undo'
```
/
```
'Redo'
```
buttons and
```
Ctrl+Z
```
/
```
Ctrl+Y
```
keyboard shortcuts
Programmatic
```
undo()
```
/
```
redo()
```
via component ref

📄 阅读： references/undo-redo.md

启用撤销/重做（
```
enableUndoRedo
```
，
```
UndoRedo
```
服务）
```
undoRedoActions
```
— 可跟踪操作的完整列表和所需服务
```
undoRedoStepsCount
```
— 历史栈大小
工具栏
```
'Undo'
```
/
```
'Redo'
```
按钮和
```
Ctrl+Z
```
/
```
Ctrl+Y
```
键盘快捷键
通过组件引用程序化执行
```
undo()
```
/
```
redo()
```

State Persistence, Immutable Mode & Loading

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

📄 Read: references/state-persistence.md

State persistence (
```
enablePersistence={true}
```
, unique
```
id
```
prop, localStorage)
Resetting persisted state (change
```
id
```
or clear localStorage entry)

Immutable mode (

enableImmutableMode={true}

, requires

isPrimaryKey={true}

)

Loading animation (

loadingIndicator.indicatorType

'Spinner'

'Shimmer'

)

Manual spinner control (
```
showSpinner()
```
/
```
hideSpinner()
```
)

📄 阅读： references/state-persistence.md

状态持久化（
```
enablePersistence={true}
```
，唯一
```
id
```
属性，localStorage）
重置持久化状态（更改
```
id
```
或清除localStorage条目）

不可变模式（

enableImmutableMode={true}

，需要

isPrimaryKey={true}

）

加载动画（

loadingIndicator.indicatorType

：

'Spinner'

或

'Shimmer'

）

手动控制加载指示器（
```
showSpinner()
```
/
```
hideSpinner()
```
）

Localization and RTL

本地化与RTL

📄 Read: references/localization-rtl.md

Setting locale (
```
locale
```
prop)
Loading custom translations (
```
L10n.load()
```
with
```
'gantt'
```
namespace keys)
Gantt locale key reference (all translatable UI strings)
RTL support (
```
enableRtl={true}
```
)
Column date formatting (
```
format='yMd'
```
,
```
format='dd/MM/yyyy'
```
)
Column number formatting (
```
format='C2'
```
,
```
format='N2'
```
,
```
format='P0'
```
)

📄 阅读： references/localization-rtl.md

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

Programmatic Methods

程序化方法

📄 Read: references/gantt-methods.md

Column utilities:
```
autoFitColumns()
```

Edit control:

cancelEdit()

openAddDialog()

openEditDialog()

Task management:

deleteRecord()

convertToMilestone()

changeTaskMode()

updateRecordByID()

updateRecordByIndex()

updateTaskId()

updateDataSource()

updateProjectDates()

Toolbar control:
```
enableItems()
```
Expand/Collapse:
```
expandByIndex()
```
,
```
collapseByIndex()
```

Undo/Redo stacks:

clearUndoCollection()

clearRedoCollection()

getUndoActions()

getRedoActions()

Data retrieval:

getCurrentViewData()

getRecordByID()

getTaskByUniqueID()

getTaskInfo()

getTaskbarHeight()

getExpandedRecords()

getGanttColumns()

getGridColumns()

Formatting helpers:
```
getDurationString()
```
,
```
getWorkString()
```
DOM access:
```
getRowByID()
```
,
```
getRowByIndex()
```
Sorting:
```
removeSortColumn()
```
Selection:
```
selectCells()
```
Row reorder:
```
reorderRows()
```
Scrolling:
```
scrollToTask()
```
,
```
updateChartScrollOffset()
```

📄 阅读： references/gantt-methods.md

列工具：
```
autoFitColumns()
```

编辑控制：

cancelEdit()

、

openAddDialog()

、

openEditDialog()

任务管理：

deleteRecord()

、

convertToMilestone()

、

changeTaskMode()

、

updateRecordByID()

、

updateRecordByIndex()

、

updateTaskId()

、

updateDataSource()

、

updateProjectDates()

工具栏控制：
```
enableItems()
```
展开/折叠：
```
expandByIndex()
```
、
```
collapseByIndex()
```

撤销/重做栈：

clearUndoCollection()

、

clearRedoCollection()

、

getUndoActions()

、

getRedoActions()

数据检索：

getCurrentViewData()

、

getRecordByID()

、

getTaskByUniqueID()

、

getTaskInfo()

、

getTaskbarHeight()

、

getExpandedRecords()

、

getGanttColumns()

、

getGridColumns()

格式化助手：
```
getDurationString()
```
、
```
getWorkString()
```
DOM访问：
```
getRowByID()
```
、
```
getRowByIndex()
```
排序：
```
removeSortColumn()
```
选择：
```
selectCells()
```
行重排：
```
reorderRows()
```
滚动：
```
scrollToTask()
```
、
```
updateChartScrollOffset()
```

Events

事件

📄 Read: references/events.md

Lifecycle events (
```
load
```
,
```
created
```
,
```
dataBound
```
)
Task editing events (
```
actionBegin
```
,
```
actionComplete
```
) with
```
requestType
```
reference table
Taskbar events:
```
taskbarEditing
```
,
```
taskbarEdited
```
,
```
taskbarClick
```
Row expand/collapse events:
```
expanding
```
,
```
collapsing
```
,
```
expanded
```
,
```
collapsed
```

Selection events:

rowSelected

rowDeselected

cellSelected

cellDeselected

Export events:
```
excelExportComplete
```
,
```
pdfExportComplete
```

Column interaction events:

resizeStart

resizing

resizeStop

columnDragStart

columnDrag

columnDrop

Event cancellation patterns (
```
args.cancel = true
```
)
Complete all-events quick reference table (30+ events)

📄 阅读： 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+事件）

Quick Start Example

快速入门示例

tsx

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';

// In App.css:
// @import "../node_modules/@syncfusion/ej2-gantt/styles/tailwind3.css";
// (plus base, buttons, calendars, dropdowns, grids, inputs, layouts,
//  lists, navigations, notifications, popups, richtexteditor, treegrid)

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;

tsx

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';

// 在App.css中：
// @import "../node_modules/@syncfusion/ej2-gantt/styles/tailwind3.css";
// （加上base、buttons、calendars、dropdowns、grids、inputs、layouts,
//  lists、navigations、notifications、popups、richtexteditor、treegrid）

const data = [
  {
    TaskID: 1, TaskName: '项目启动',
    StartDate: new Date('04/02/2024'), EndDate: new Date('04/21/2024'),
    subtasks: [
      { TaskID: 2, TaskName: '确定场地位置', StartDate: new Date('04/02/2024'), Duration: 4, Progress: 50 },
      { TaskID: 3, TaskName: '进行土壤测试', StartDate: new Date('04/02/2024'), Duration: 4, Progress: 50, Predecessor: '2' },
      { TaskID: 4, TaskName: '土壤测试审批', 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="任务名称" width="250" />
        <ColumnDirective field="StartDate" />
        <ColumnDirective field="Duration" />
        <ColumnDirective field="Progress" />
      </ColumnsDirective>
      <Inject services={[Edit, Toolbar, Selection]} />
    </GanttComponent>
  );
}

export default App;

Common Patterns

常见模式

Enable Editing with Dialog

启用对话框编辑

tsx

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

tsx

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

Enable Cell Editing

启用单元格编辑

tsx

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

tsx

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

Programmatically Add a Task

程序化添加任务

tsx

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

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

tsx

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

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

Export to Excel

导出为Excel

tsx

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

tsx

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

Export to PDF

导出为PDF

tsx

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

tsx

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

Column-Level Validation Rules

列级验证规则

tsx

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

tsx

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

Scroll to Date Programmatically

程序化滚动到指定日期

tsx

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

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

tsx

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

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

Column Resize with Min/Max Width

带最小/最大宽度的列调整

tsx

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

tsx

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

Reorder Columns Programmatically

程序化重排列

tsx

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);

tsx

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

// 通过字段名称：
(ganttRef.current as any).treeGrid.reorderColumns(['Duration', 'Progress'], 'TaskName');

// 通过索引：
(ganttRef.current as any).treeGrid.reorderColumnByIndex(2, 0);

Persist Tree Expand/Collapse State

持久化树形展开/折叠状态

tsx

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

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

tsx

// 在taskFields中 — 映射一个控制初始展开状态的布尔字段：
const taskFields = { ..., expandState: 'isExpand' };

// 或加载时全部折叠：
<GanttComponent collapseAllParentTasks={true} .../>

Key Module Injections

关键模块注入

Feature	Service to Inject
Editing (add/edit/delete/taskbar drag)	`Edit`
Filtering	`Filter`
Sorting	`Sort`
Toolbar	`Toolbar`
Selection	`Selection`
Day Markers / Holidays / Event Markers	`DayMarkers`
Critical Path	`CriticalPath`
Excel / CSV Export	`ExcelExport`
PDF Export	`PdfExport`
Undo / Redo	`UndoRedo`
Column Menu	`ColumnMenu`
Context Menu	`ContextMenu`
Virtual Scrolling	`VirtualScroll`
Row Drag and Drop	`RowDD`
Column Reordering	`Reorder`
Frozen Columns	`Freeze`
Column Resizing	`Resize`

Usage pattern:

tsx

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

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

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

使用模式：

tsx

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

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

Key Props Reference

关键属性参考

Prop	Type	Purpose
`dataSource`	object[] / DataManager	Task data (local or remote via DataManager)
`taskFields`	TaskFieldsModel	Field mapping for task properties
`editSettings`	EditSettingsModel	Enable add/edit/delete/taskbar editing
`toolbar`	string[]	Toolbar items to render
`taskMode`	Auto / Manual / Custom	Scheduling mode
`resources`	object[]	Resource data collection
`resourceFields`	ResourceFieldsModel	Resource field mapping
`allowSorting`	boolean	Enable sorting
`allowFiltering`	boolean	Enable filtering
`allowReordering`	boolean	Enable column reorder
`allowResizing`	boolean	Enable column resize
`allowExcelExport`	boolean	Enable Excel export
`allowPdfExport`	boolean	Enable PDF export
`undoRedoActions`	string[]	Actions tracked by undo/redo
`timelineSettings`	TimelineSettingsModel	Timeline tiers and unit config
`splitterSettings`	SplitterSettingsModel	Grid/chart panel ratio
`highlightWeekends`	boolean	Shade weekend columns
`holidays`	HolidayModel[]	Mark holiday dates
`eventMarkers`	EventMarkerModel[]	Vertical markers on timeline
`treeColumnIndex`	number	Column index showing expand/collapse icons
`collapseAllParentTasks`	boolean	Collapse all parent rows on initial load
`enableWBS`	boolean	Auto-generate WBS codes from task hierarchy
`enableAutoWbsUpdate`	boolean	Recalculate WBS codes after CRUD/sort/DnD
`frozenColumns`	number	Number of left-pinned (frozen) columns
`enableMultiTaskbar`	boolean	Show multiple taskbars per resource row
`viewType`	string	`'ProjectView'` or `'ResourceView'`
`showColumnMenu`	boolean	Show column-level menu (sort, filter, autofit)
`columnMenuItems`	string[]	Restrict which column menu items are shown
`showColumnChooser`	boolean	Enable column chooser dialog via toolbar `ColumnChooser` item
`allowSelection`	boolean	Enable row/cell selection
`selectionSettings`	SelectionSettingsModel	Selection mode ( `Row` / `Cell` ), type ( `Single` / `Multiple` )
`gridLines`	string	Grid lines style: `'Both'` \| `'Horizontal'` \| `'Vertical'` \| `'None'`
`renderBaseline`	boolean	Show baseline bars alongside actual taskbars
`baselineColor`	string	CSS color for baseline bars
`enableCriticalPath`	boolean	Highlight critical path tasks and connectors
`enableRtl`	boolean	Enable right-to-left layout
`locale`	string	Locale code (e.g. `'fr'` , `'de'` , `'ar'` )
`allowRowDragAndDrop`	boolean	Enable row drag-and-drop reordering/reparenting
`enableImmutableMode`	boolean	Only re-render changed rows on data updates (requires `isPrimaryKey` )
`enablePersistence`	boolean	Persist UI state (sort, filter, column widths) to localStorage
`loadingIndicator`	object	Loading animation type: `{ indicatorType: 'Spinner' \| 'Shimmer' }`
`workWeek`	string[]	Working days, e.g. `['Monday','Tuesday','Wednesday','Thursday','Friday']`
`includeWeekend`	boolean	Count weekends as working days for duration calculation
`timezone`	string	IANA timezone for the Gantt (e.g. `'America/New_York'` )
`showOverAllocatedTasks`	boolean	Highlight over-allocated resources in ResourceView
`enableUndoRedo`	boolean	Enable undo/redo tracking (inject `UndoRedo` service)
`undoRedoStepsCount`	number	Maximum undo/redo history steps (default: 10)
`enableVirtualization`	boolean	Row virtualization for large data sets
`enableTimelineVirtualization`	boolean	Timeline (horizontal) virtualization
`rowHeight`	number	Uniform row height in pixels
`taskbarHeight`	number	Height of taskbars in pixels (must be ≤ `rowHeight` )
`connectorLineWidth`	number	Width of dependency connector lines
`connectorLineBackground`	string	Color of dependency connector lines

属性	类型	用途
`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	每个资源行显示多个任务栏
`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颜色
`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	甘特图的IANA时区（例如 `'America/New_York'` ）
`showOverAllocatedTasks`	boolean	在资源视图中高亮过度分配的资源
`enableUndoRedo`	boolean	启用撤销/重做跟踪（需注入 `UndoRedo` 服务）
`undoRedoStepsCount`	number	最大撤销/重做历史步数（默认：10）
`enableVirtualization`	boolean	大数据集的行虚拟化
`enableTimelineVirtualization`	boolean	时间轴（水平）虚拟化
`rowHeight`	number	统一行高（像素）
`taskbarHeight`	number	任务栏高度（像素，必须≤ `rowHeight` ）
`connectorLineWidth`	number	依赖连接线宽度
`connectorLineBackground`	string	依赖连接线颜色