syncfusion-react-gantt-chart

Syncfusion React Gantt Chart

Syncfusion React Gantt Chart（GanttComponent）は、タイムライン上でタスクを可視化、スケジュール設定、管理するための強力なプロジェクト管理コンポーネントです。自動／手動スケジューリング、タスクの依存関係、リソース計画、対話的な編集、Excel／PDF へのエクスポート、柔軟なカスタマイズに対応しています。

このスキルを使う場面

• React アプリでガントチャートやプロジェクトのタイムラインを実装する
• タスクのスケジューリング（自動、手動、カスタムモード）を設定する
• タスクの依存関係（FS、SS、FF、SF）と制約（ASAP、MSO、FNET など）を設定する
• プロジェクトカレンダー、タスクカレンダー、休日、勤務時間、1 日あたりの時間に関するルールを設定する
• ローカルまたはリモートのデータを Gantt にバインドする（ローカル配列、DataManager、UrlAdaptor、Ajax）
• タスクバー、ラベル、マイルストーン、ベースラインをカスタマイズする
• リソースとリソースビュー（複数タスクバーを含む）を設定する
• 検証ルールを適用して編集（ダイアログ、セル、タスクバーのドラッグ）を有効にする
• 列のサイズ変更、並べ替え、固定、または列メニューを設定する
• WBS コード、ツリー列のアイコン、または連番列を設定する
• フィルタリング、並べ替え、選択（階層のチェックボックスによる選択を含む）を設定する
• 特定の日付までスクロールする、またはスクロール位置をプログラムで制御する
• Gantt を Excel または PDF にエクスポートする
• Gantt のイベントを処理し、高度な機能（元に戻す／やり直し、仮想スクロール、クリティカルパスなど）を有効にする
• グローバル化、ローカライズ、RTL に対応する

---

ドキュメントとナビゲーションガイド

はじめに

📄 参照: references/getting-started.md

• インストールとパッケージの依存関係
• Vite／CRA プロジェクトのセットアップ
• npm のテーマパッケージを使ったテーマパッケージのインストールと CSS のインポート
• taskFields マッピングを使った基本的な GanttComponent
• モジュールの注入ガイド（利用可能なすべてのサービス）
• 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 クラスを使ったバインディング（手動での fetch）
• 子をオンデマンドで読み込む（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

• 依存関係の種類：Finish-to-Start（FS）、Start-to-Start（SS）、Finish-to-Finish（FF）、Start-to-Finish（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} — オフセットを維持します。更新するには依存関係ダイアログで手動操作が必要です
• 依存関係の検証モード（requestType === 'validateLinkedTask' の actionBegin イベント内）
  • respectLink={true} — 依存関係の整合性を保つため、無効な編集を取り消します
  • removeLink={true} — 編集を可能にするため、競合する依存関係を削除します
  • preserveLinkWithEditing={true} — リンクを維持するため、オフセットを更新します（デフォルトのモード）
• 検証ダイアログ — すべてのモードを無効にすると、ユーザーが選択できるダイアログが表示されます（編集のキャンセル、リンクの削除、オフセットの調整）
• 親タスクとの依存関係 — allowParentDependency={true} は親をまたぐ依存関係を許可します。false の場合は同じ親を持つタスク間のみに制限されます
• 許可する依存関係の種類 — allowedDependencyTypes={['FS', 'SF']} は読み込み、作成、編集が可能な依存関係の種類を制限します
• 依存関係の動的な表示／非表示 — .e-gantt-dependency-view-container の CSS 表示を切り替えます
• 検証の無効化 — enablePredecessorValidation={false} は、先行タスクのリンクに基づく日付の自動検証を無効にします

タスクの制約

📄 参照： references/task-constraints.md

• 8 種類の制約：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 を使用したタイムラインセルの結合（1つのセルに複数の単位をまとめる）
• 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}）
  • サイズ変更モード：標準と自動（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 イベントによる行のスパン設定
  • rowSpan、colSpan、cell、data、column を持つ QueryCellInfoEventArgs
  • 水平方向のスパン（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
  • 列ごとの最小値／最大値／ステップ／形式／dataSource 用の 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 エクスポート
• エクスポートのプロパティとカスタマイズ
• 複数のガントチャートを 1 つの Excel ブックにエクスポート
• カスタムデータソースのエクスポート

PDF エクスポート

📄 参照: references/pdf-export.md

• 基本的な PDF エクスポート
• PDF のカスタマイズ（フォント、列、スタイル）
• ヘッダーとフッターの設定
• ページ設定（向き、サイズ）

休日、勤務時間、タイムゾーン

📄 参照: references/holidays-working-time.md

• 休日の定義（holidays プロパティ、HolidayModel、DayMarkers サービス）
• 勤務週の設定（workWeek、includeWeekend）
• 1 日の勤務時間（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 の設定
• レスポンシブコンテナー（CSS の親要素の高さを設定し、width='100%'、height='100%' を指定）
• 日付へのスクロール（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 prop、localStorage）
• 永続化された状態のリセット（id を変更するか、localStorage のエントリーを消去）
• イミュータブルモード（enableImmutableMode={true}、isPrimaryKey={true} が必要）
• 読み込みアニメーション（loadingIndicator.indicatorType：'Spinner' または 'Shimmer'）
• スピナーの手動制御（showSpinner() / hideSpinner()）

ローカライズと RTL

📄 参照： references/localization-rtl.md

• ロケールの設定（locale prop）
• カスタム翻訳の読み込み（'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	ガントの 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	依存関係コネクタ線の色