syncfusion-vue-gantt-chart

Syncfusion Vue Gantt Chart の実装

Vue 2 および Vue 3 アプリケーションで、タスク、依存関係、リソースのスケジュール設定と管理に使用する、Microsoft Project のようなインターフェイスを表示するプロジェクト管理コンポーネントです。

このスキルを使用するタイミング

以下の用途でユーザーが必要とする場合に、このスキルを使用してください。

• Gantt Chart をセットアップする：Vue 2（Vue CLI）または Vue 3（Vite）プロジェクト
• データをバインドする：ローカル配列、自己参照データ、リモート DataManager ソース
• タスクをスケジュールする：自動／手動モード、期間の単位（日、時間、分、週、月）、ベースライン、未スケジュールのタスク、作業カレンダー
• タスクの依存関係を管理する：制限の制御やコネクタラインを使用した FS、FF、SS、SF の先行タスクタイプ
• タスクを編集する：セル編集、ダイアログ編集、タスクバーのドラッグ／サイズ変更、未スケジュールのタスク用タスクバー描画、行の追加／削除、インデント／インデント解除
• リソースを操作する：リソースの割り当て、リソースビュー、複数タスクバービュー
• 列を設定する：並べ替え、サイズ変更、固定、スパン、テンプレート、WBS、通し番号、チェックボックス
• タイムラインをカスタマイズする：上段／下段のティア、ズーム、時間単位（時間から10年単位まで）、無限スクロール
• フィルタリングと並べ替えを行う：列メニューフィルター、Excel 風フィルター、ツールバー検索、並べ替え
• 行またはセルを選択する：階層チェックボックスモードでの行／セル選択、選択イベント
• ツールバーを使用する：組み込み項目（追加、編集、削除、検索、すべて展開…）およびカスタム項目
• タスクバーとラベルをカスタマイズする：テンプレート、データマーカー／インジケーター、ツールチップ（タスクバー／コネクタライン／ベースライン／タイムライン）、ラベル設定
• イベントマーカーと休日を追加する：プロジェクトのマイルストーンライン、非稼働日
• カレンダーを管理する：作業時間／休日を含むプロジェクトカレンダー、カスタムスケジュール用のタスク別カレンダー
• エクスポートする：Excel（単一／複数の Gantt、カスタムデータ）および PDF（ヘッダー、フッター、カスタム）
• レイアウトを制御する：スプリッターの位置、読み込みアニメーション、状態の永続化
• Gantt で操作を元に戻す／やり直す
• 大規模なデータセットで仮想スクロールを有効にする
• タイムゾーンとグローバル化を設定する：ロケール、RTL、タイムゾーンオフセット
• コンテキストメニュー：行と列ヘッダーの右クリック操作
• クリティカルパス：プロジェクトの終了日を決定するタスクを強調表示する

コンポーネントの概要

機能	インジェクトするモジュール	主なプロパティ／API
編集	Edit	editSettings
フィルタリング	Filter	allowFiltering
並べ替え	Sort	allowSorting
選択	Selection	selectionSettings
ツールバー	Toolbar	toolbar
日付マーカー	DayMarkers	eventMarkers, holidays
Excel エクスポート	ExcelExport	excelExport()
PDF エクスポート	PdfExport	pdfExport()
仮想スクロール	VirtualScroll	enableVirtualization
クリティカルパス	CriticalPath	enableCriticalPath
元に戻す／やり直す	UndoRedo	enableUndoRedo, undoRedoStepsCount, undoRedoActions
列メニュー	ColumnMenu	showColumnMenu
コンテキストメニュー	ContextMenu	contextMenuItems

パッケージ： @syncfusion/ej2-vue-gantt
コンポーネントタグ： <ejs-gantt>
Composition API のインポート： GanttComponent as EjsGantt
Options API のコンポーネントキー： 'ejs-gantt': GanttComponent

ナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• Vite（Vue 3）および Vue CLI（Vue 2）のプロジェクトセットアップ
• @syncfusion/ej2-vue-gantt とテーマパッケージのインストール
• Syncfusion のテーマパッケージを使用した CSS の参照
• Composition API と Options API の登録
• taskFields を使用した最小限の動作例
• モジュールのインジェクションパターン（provide）
• Quasar フレームワークのセットアップ
• actionFailure によるエラー処理

データバインディング

📄 参照: references/data-binding.md

• ローカル配列データ（階層型、および parentID を使用した自己参照型／フラット型）
• DataManager を使用したリモートデータ（ODataV4、WebAPI）
• RemoteSaveAdaptor（batchUrl）を使用したリモート保存の永続化
• load と Query.addParams() を使用したサーバーへの追加パラメーターの送信
• actionFailure を使用したサーバー例外の処理
• 外部 Ajax リクエストからのデータバインディング（ローカルバインディング）
• オンデマンド読み込み（子行の遅延読み込み）
• イミュータブルデータモード
• 大規模データの仮想スクロール

タスクのスケジューリング

📄 参照: references/task-scheduling.md

• 自動、手動、カスタムのスケジューリングモード（taskMode）
• Auto（デフォルト）：日付は稼働時間、休日、週末、先行タスクに基づいて検証されます
• Manual：すべての日付がデータソースの値のまま使用され、自動調整は行われません
• validateManualTasksOnLinking: true — 手動モードでも先行タスクの日付を適用します
• カスタムモード：taskFields.manual のブール値フィールドを使用してタスクごとにスケジューリングします（true = 手動）
• taskFields のマッピング（id、name、startDate、endDate、duration、durationUnit、progress、parentID、dependency、work、type、notes など）
• グローバルな期間の単位（durationUnit — day、hour、minute、week、month。デフォルトは day）
• taskFields.durationUnit のデータフィールドを使用した、タスクごとの期間の単位のマッピング
• 期間文字列内での期間の単位の指定：'3days'、'12hours'、'1800minutes'、'2weeks'、'3months'
• 週あたり／月あたりの日数を設定できる週および月の期間単位（daysPerWeek、daysPerMonth）
• 未スケジュールのタスク種別：開始日のみ、終了日のみ、期間のみ、マイルストーン（duration: 0）
• allowUnscheduledTasks: false は、欠落している日付を期間=1とプロジェクト開始日で自動的に補完します
• 稼働時間範囲（from／to を指定した dayWorkingTime — DayMarkers をインジェクトします）
• 日ごとの稼働時間（weekWorkingTime — 指定した曜日では dayWorkingTime を上書きし、指定されていない曜日では dayWorkingTime にフォールバックします）
• 非稼働日：workWeek 配列と highlightWeekends
• 期間の計算に週末を含めるには includeWeekend: true を指定します

カレンダー設定

📄 参照: references/calendar-settings.md

• プロジェクトカレンダー（calendarSettings.projectCalendar）— すべてのタスクに適用されるデフォルトの稼働時間と休日
• タスクカレンダー（calendarSettings.taskCalendar）— taskFields.calendarId を介して特定のタスクにカスタムカレンダーを適用します
• 稼働時間の設定（曜日ごとの開始／終了時刻）とカレンダーの例外
• 休日の定義と非稼働日の管理
• グローバルな稼働時間設定（dayWorkingTime、weekWorkingTime）との連携
• 期間の計算、スケジューリング、依存関係への影響
• チームまたは地域ごとのスケジューリングのための、タスクへのタスクカレンダーの割り当て

ベースライン

📄 参照: references/baseline.md

• ベースラインの可視化を有効化する（renderBaseline: true）
• ベースラインのフィールドマッピング（baselineStartDate、baselineEndDate、baselineDuration）
• ベースラインマイルストーンの作成（baselineDuration: 0）
• baselineColor プロパティまたは .e-baseline-bar CSS クラスによる色のカスタマイズ
• ベースラインテンプレート — カスタム描画に使用する baselineTemplate、タスクごとの複数のベースライン（当初と改訂版）
• テンプレート API から内部指標にアクセス（baselineTop、baselineHeight、taskBarHeight、getTaskLeft()）
• 複数のベースラインの描画（当初／改訂版／ドラフトのスケジュールを比較）
• 最適な用途：スケジュールの差異の追跡、マイルストーンの計画、フェーズの比較

タスクの制約

📄 参照： references/task-constraints.md

• 8 種類の制約タイプの表：ASAP（0）、ALAP（1）、MSO（2）、MFO（3）、SNET（4）、SNLT（5）、FNET（6）、FNLT（7）
• taskFields.constraintType — データの数値制約タイプフィールドをマッピングします
• taskFields.constraintDate — データの制約日フィールドをマッピングします
• 違反ポップアップを表示する厳格な制約タイプ：MSO、MFO、SNLT、FNLT
• actionBegin の requestType === 'validateTaskViolation' — 違反を捕捉します
• args.validateMode.respectMustStartOn/Off フラグ — ポップアップを抑制して適用します
• 4 つのフラグすべて：respectMustStartOn、respectMustFinishOn、respectStartNoLaterThan、respectFinishNoLaterThan
• 名前付きスロットと data.ganttProperties.constraintType を使用して、制約名を右側のラベルとして表示します
• 必須モジュール：Selection、Toolbar、DayMarkers、Edit、Filter、Sort、ContextMenu

タスクの依存関係

📄 参照： references/task-dependencies.md

• 先行タスクのタイプ：FS、SS、FF、SF — 形式は "{ID}{Type}"（例："2FS"、"3SS"）
• allowedDependencyTypes プロパティ（許可するタイプの配列）を使用して、許可する依存関係タイプを制限します
• 解析時、ダイアログでの編集時、タスクバーの編集時に依存関係タイプを検証します
• 単位の接尾辞を付けたラグ／リード："2FS+2days"、"4FF+960m"、"7SS+16h"、"3FS-1days"
• 複数の先行タスクはコンマ区切りで指定します："2FS,3FF"
• taskFields.dependency — 先行タスク文字列フィールドをマッピングします
• allowParentDependency: true（デフォルト）— 親タスク間／親タスクと子タスク間のリンクを許可します
• dependency をマッピングすると、コネクター線が自動的に描画されます
• インタラクティブな描画：タスクバーのハンドルをドラッグします — Edit モジュールと allowTaskbarEditing: true が必要です
• autoUpdatePredecessorOffset: true — 初回読み込み時にオフセットを再計算し、カレンダー調整後の位置と一致させます
• 実行時の切り替え：this.$refs.gantt.ej2Instances.autoUpdatePredecessorOffset = value
• updateOffsetOnTaskbarEdit: false — タスクバーのドラッグ時にオフセットを自動更新しないようにします
• actionBegin の requestType === 'validateLinkedTask' — 依存関係の検証を処理します
• args.validateMode.respectLink — リンクに違反する場合、編集を元に戻します
• args.validateMode.removeLink — リンクを削除して編集内容を保持します
• args.validateMode.preserveLinkWithEditing — オフセットを更新し、両方を保持します（デフォルトは true）
• 検証ダイアログ：すべてのモードが無効の場合に表示されます。方向に応じて 2 つまたは 3 つのオプションが表示されます
• 線の表示／非表示：.e-gantt-dependency-view-container の visibility CSS を切り替えます

タスクの管理（編集）

📄 参照: references/managing-tasks.md

• 編集を有効にする（editSettings）— Edit モジュールを注入します
• セル編集（自動モード）、ダイアログ編集、タスクバー編集
• セル編集の種類：numericedit、dropdownedit、booleanedit、datepickeredit、datetimepickeredit
• セル編集テンプレート（create／write／read／destroy フック）
• 特定の列の編集を無効にする（columns.allowEditing: false）
• 読み取り専用の Gantt（readOnly: true）
• ツールバー、コンテキストメニュー、または editModule.addRecord() でタスクを追加する
• デフォルト値を指定して新しいタスクのダイアログを開く（actionBegin + beforeOpenAddDialog）
• ダイアログのタブをカスタマイズする（fields と additionalParams を指定した addDialogFields／editDialogFields）
• additionalParams を使い、RTE inlineMode で Notes タブをカスタマイズする
• ツールバーまたは editModule.deleteRow() でタスクを削除する。確認ダイアログには showDeleteConfirmDialog を使用します
• インデントとインデント解除 — ツールバー項目または indent()／outdent() メソッド
• 読み込み時にタスクを分割する — 階層型（埋め込みの Segments 配列を使う taskFields.segments）または自己参照型（フラットなコレクションを使う taskFields.segmentId + segmentData）。コンテキストメニュー、ダイアログ、または splitTask() で動的に分割することもできます
• コンテキストメニューまたはドラッグでセグメントを結合する。制限事項（親タスクやマイルストーンは分割できません）
• タスクバー編集：ドラッグ、サイズ変更、進捗ハンドル、コネクターポイント
• 特定のタスクのタスクバー編集を防止する（taskbarEditing イベント + args.cancel）
• queryTaskbarInfo + CSS .e-preventEdit でタスクバー編集ハンドルを非表示にする
• タスクバー編集のツールチップ（tooltipSettings.editing テンプレート）
• タッチ操作：ダブルタップ、タップしてドラッグ、コネクターポイントのタップ
• 列の検証ルール（columns.validationRules）
• カスタム検証（validationRules 内のコールバック関数）
• actionBegin（beforeOpenEditDialog）による依存関係／リソースグリッドの検証
• UrlAdaptor + batchUrl によるサーバー側 CRUD（added／changed／deleted コレクション）
• updateRecordByID()、addRecord()、deleteRecord()、indent()、outdent()

タスクバーの描画

📄 参照: references/taskbar-draw.md

• タスクバーの描画を有効にする（editSettings の allowTaskbarDraw: true）— タイムライン上のドラッグで未スケジュールのタスクを作成／スケジュールします
• 描画したタスクバーから開始日、終了日、期間を自動計算します
• 描画操作は、勤務時間、休日、週末、およびタスクカレンダーを考慮します
• 生成されたフィールド（StartDate、EndDate、Duration）を含むスケジュール出力
• タスクを適切にスケジュールするための前提条件と関連設定
• 部分的なデータの処理（完全に未スケジュール、一部スケジュール済み、スケジュール済み）
• 依存関係およびタスクの種類（親、マイルストーン、分割タスク）との連携
• 編集およびカレンダー連携と組み合わせる際のベストプラクティス

リソース

📄 参照: references/resources.md

• リソースコレクションと resourceFields の定義
• タスクへのリソースの割り当て（resourceInfo）
• リソースビューのレイアウト
• 複数タスクバー表示
• リソースの割り当て単位と作業配分

列

📄 参照: references/columns.md

• 列の定義（field、headerText、width、format）
• ColumnsDirective／e-columns + e-column ディレクティブ
• 列の並べ替え、サイズ変更、列結合
• 固定列
• 列メニュー
• 列テンプレート
• WBS（作業分解構成）列
• 連番列 — 並べ替え、フィルタリング、仮想化、ページング時の動作を含む、自動採番される表示列
• レスポンシブ列
• チェックボックス選択列

タイムライン

📄 参照: references/timeline.md

• timelineSettings — 上段と下段の単位
• 時間単位：Hour、Day、Week、Month、Year、Decade
• カスタムのタイムラインラベル／フォーマッター
• ズーム（拡大、縮小、全体表示）
• timelineUnitSize
• timelineViewMode ショートカット（両方の段を一度に設定）
• viewStartDate / viewEndDate — 表示範囲の日付を固定
• weekStartDay — 週の開始曜日をカスタマイズ（0–6）
• updateTimescaleView — タスクの変更時にタイムスケールを自動更新
• showTooltip — ホバー時にタイムラインセルのツールチップを表示
• showWeekend — 週末の列を表示または非表示
• timelineTemplate — タイムラインの段に表示するセルコンテンツをカスタマイズ
• enableInfiniteTimelineScroll — 水平方向の無限スクロールを有効化（ユーザーの移動に合わせてタイムラインを動的に拡張）

フィルタリングと並べ替え

📄 参照: references/filtering-and-sorting.md

• 列メニューによるフィルタリング（allowFiltering）
• Excel のようなフィルター
• ツールバーの検索ボックス
• filterSettings の設定
• 列の並べ替え（allowSorting）
• 複数列の並べ替え
• sortSettings
• プログラムによる gantt.search(key) メソッド
• searchSettings — フィールド、演算子、大文字と小文字の区別
• 並べ替えの追加／削除に関するキーボードショートカット
• actionBegin / actionComplete による並べ替えイベント（args.requestType === 'sorting'）
• タッチ操作での並べ替え：列ヘッダーをタップします。複数列の並べ替えにはポップアップを使用します

選択

📄 参照: references/selection.md

• allowSelection: false — 選択を無効化
• 選択モード：'Row' / 'Cell' / 'Both'
• 選択タイプ：'Single' / 'Multiple'
• selectedRowIndex — 初期読み込み時に行をあらかじめ選択
• 行を動的に選択（selectRow、selectRows）
• dataBound を使い、条件に基づいて行を選択
• セル選択 — getSelectedRowCellIndexes()
• Ctrl+クリックによる複数セル選択
• セルを動的に選択（selectCell）
• 選択の切り替え（enableToggle）
• ホバー時のハイライト（enableHover）
• selectionSettings の完全なリファレンステーブル
• プログラム用 API（clearSelection、getSelectedRecords、getSelectedRowIndexes）
• イベントの全一覧（rowSelecting、rowSelected、rowDeselecting、rowDeselected、cellSelecting、cellSelected、cellDeselected）
• rowSelecting による行選択の防止（args.cancel = true）
• cellSelecting によるセル選択の防止（args.cancel = true）
• checkboxMode のオプションと階層モードによるチェックボックス選択
• 階層チェックボックスモード：'Self'（独立）、'Hierarchy'（ツリー内に伝播）、'FilteredHierarchy'（フィルタリングされたビュー内に伝播）
• 親子関係を通じた選択状態の伝播
• 折りたたみ／展開されたレコードのチェックボックス選択
• タッチ操作（シングルタップ＋複数選択ポップアップ）

ツールバー

📄 参照: references/toolbar.md

• 組み込みのツールバー項目：Add、Edit、Update、Delete、Cancel、Search、ExpandAll、CollapseAll、ZoomIn、ZoomOut、ZoomToFit、ExcelExport、PdfExport、PrevTimeSpan、NextTimeSpan、Undo、Redo
• click ハンドラーを使ったカスタムツールバー項目
• ツールバーイベント

タスクバーとラベル

📄 参照: references/taskbar-and-labels.md

• タスクバーのカスタマイズ（高さ、色、テンプレート）
• labelSettings — 左、右、taskLabel
• データマーカー／インジケーター
• タスクのツールチップ
• コネクターラインのツールチップ
• ベースラインのツールチップ
• タイムラインのツールチップ
• 進捗バーのカスタマイズ
• 親タスクとマイルストーンタスクのタスクバーの外観

イベントマーカーと休日

📄 参照: references/event-markers-and-holidays.md

• eventMarkers — 重要な日付にラベル付きの垂直線を表示
• holidays — 非稼働日のハイライト表示
• 稼働時間の設定
• 週末のハイライト表示（highlightWeekends）
• DayMarkers モジュールを注入

エクスポート（Excel および PDF）

📄 参照： references/export.md

• Excel エクスポート（基本、カスタムデータソース、複数のガントチャート）
• PDF エクスポート（基本、ヘッダー／フッター、カスタマイズ）
• エクスポートのプロパティとコールバック

行とスクロール

📄 参照： references/rows-and-scrolling.md

• rowHeight — ピクセル単位で均一な行の高さ（デフォルトは 46px）
• collapseAllParentTasks: true — すべての親タスクを折りたたんだ状態で開始
• taskFields.expandState — 真偽値のデータフィールドをタスクごとの展開／折りたたみ状態にマッピング
• expanding / collapsing イベント — args.cancel = true で特定の行をブロック
• expanded / collapsed イベント — 操作後に発生（キャンセル不可）
• rowDataBound — 行全体のスタイル設定、queryCellInfo — 個々のセルのスタイル設定
• 行の交互スタイル：.e-altrow（グリッド）＋ tr.e-chart-row:nth-child(even)（チャート）
• queryCellInfo の args.rowSpan による行の結合
• columns.clipMode — Clip | Ellipsis | EllipsisWithTooltip（デフォルト）
• 行のドラッグ＆ドロップ — RowDD、Edit をインジェクトし、allowRowDragAndDrop: true を設定
• allowTaskbarDragAndDrop — タスクバーを行間でドラッグして移動
• rowDragStartHelper — args.cancel で条件に応じてドラッグを防止
• rowDrop — ドロップを検証／キャンセル、args.dropPosition = 'above'|'below'|'child'
• reorderRows(fromIndexes, toIndex, position) — プログラムによる行の並べ替え
• scrollToDate('MM/DD/YYYY') — タイムラインを指定した日付までスクロール
• scrollToTask('id') — チャートをタスクのタスクバーまでスクロール
• setScrollTop(px) — 垂直スクロール。ganttChartModule.scrollObject.setScrollTop() からも設定可能
• レスポンシブコンテナー：height: '100%'、width: '100%'（親要素に明示的な高さが必要）
• 仮想スクロール：enableVirtualization: true を設定し、VirtualScroll をインジェクト
• enableTimelineVirtualization — 表示中のタイムライン列のみを描画

レイアウトとスプリッター

📄 参照： references/layout-and-splitter.md

• splitterSettings — 列のインデックスまたは位置
• 読み込みアニメーション
• 状態の永続化（enablePersistence）
• localStorage のキー形式（'gantt' + componentId）
• 永続化された状態の手動取得／設定
• 特定のプロパティの永続化を防止（addOnPersist のオーバーライド）
• リロード後にヘッダーテンプレートを復元（getPersistData ＋ treeGrid.setProperties）
• 永続化されないもの（列テンプレート、headerText、headerTemplate、formatter、valueAccessor）
• グローバルおよびローカルのコンテキスト設定
• 高さ、幅、レスポンシブレイアウト

元に戻す／やり直す

📄 参照： references/undo-redo.md

• 元に戻す／やり直すを有効化（enableUndoRedo: true、UndoRedo をインジェクト）
• undoRedoStepsCount — 履歴の深さ
• undoRedoActions — 履歴に記録する操作を制限
• サポートされているすべての操作の表（ZoomIn/Out、ColumnResize など、19 種類の操作）
• ツールバーの Undo/Redo 項目
• プログラムによる undo() / redo()
• getUndoActions() / getRedoActions()
• clearUndoCollection() / clearRedoCollection()

アクセシビリティ

📄 参照： references/accessibility.md

• WCAG 2.1 レベル AA 準拠
• キーボード操作（グリッド、ツールバー、コンテキストメニューのショートカット）
• ARIA ロールと属性（treegrid、row、gridcell、columnheader、dialog）
• npm テーマパッケージによるテーマ対応（tailwind3、material、material3、bootstrap5、fluent、fabric、highcontrast）
• スクリーンリーダー対応（NVDA、JAWS、VoiceOver）— queryTaskbarInfo による taskbarAriaLabel のカスタマイズ
• フォーカス管理と autoFocusTasks

プログラムからの操作

📄 参照： references/gantt-methods.md

• this.$refs.gantt からインスタンスにアクセスします（Options API）。<ejs-gantt> に ref="gantt" を指定します
• 列： autoFitColumns(fieldNames?)、getGanttColumns()、getGridColumns()、refreshColumns()、reorderColumns(from, to)
• タスクの編集： cancelEdit()、changeTaskMode(data)、convertToMilestone(id)、deleteRecord(taskDetail)、updateRecordByIndex(index, data)、updateTaskId(currentId, newId)
• 行の展開／折りたたみ： expandByID()、expandByIndex()、collapseByID()、collapseByIndex()
• 分割／結合： splitTask(taskId, splitDate)、mergeTask(taskId, segmentIndexes)
• 先行タスク： removePredecessor(id)
• クエリ： getRecordByID(id)、getRecordByIndex()、getTaskByUniqueID(id)、getTaskInfo(taskId)、getCurrentViewData()、getExpandedRecords(records)、getCriticalTasks()
• DOM アクセス： getRowByID(id)、getRowByIndex(index)、getTaskbarHeight()
• 書式設定ヘルパー： getDurationString(duration, unit)、getWorkString(work, unit)
• スクロール： scrollToTask(taskId)、setScrollTop(scrollTop)、updateChartScrollOffset(left, top)
• データ： updateDataSource(dataSource, args)
• 並べ替え： removeSortColumn(columnName)
• 選択： selectCells(rowCellIndexes) — selectionSettings.mode: 'Cell' が必要です

コンテキストメニュー

📄 参照： references/context-menu.md

• ContextMenu、Edit、Sort、Resize、Selection モジュールを注入します
• 有効化：enableContextMenu: true、allowSorting: true、allowResizing: true
• 標準の組み込み項目一覧：AutoFit、AutoFitAll、SortAscending、SortDescending、TaskInformation、Add、Indent、Outdent、DeleteTask、Save、Cancel、DeleteDependency、Convert
• カスタム項目：組み込み文字列と記述子オブジェクト { text, id, target, iconCss } を組み合わせます
• target: '.e-content' は行の右クリック時に項目を表示し、target: '.e-gridheader' はヘッダーに表示します
• contextMenuClick イベント — args.item.id を使ってカスタムアクションを処理します
• contextMenuOpen イベント — args.hideItems を使って項目を動的に非表示にします。args.type !== 'Header' を確認してください
• タッチ操作：行を長押しするとコンテキストメニューが開きます

クリティカルパス

📄 参照： references/critical-path.md

• クリティカルパスを有効化します（enableCriticalPath、CriticalPath を注入）
• ツールバーの切り替えボタン（'CriticalPath'）
• queryTaskbarInfo を使ってクリティカルタスクバーの色をカスタマイズします
• data.isCritical および data.slack プロパティ
• スラック時間を使ったニアクリティカルタスクの検出

タイムゾーンとグローバル化

📄 参照： references/timezone-and-globalization.md

• timezone — レンダリング時に適用される IANA 文字列（例：'UTC'、'America/New_York'）
• timezone: 'UTC' — ユーザーのローカル時刻にかかわらず、すべてのユーザーに同じ時刻を表示します
• 時間単位のタイムライン：timezone + durationUnit: 'Hour' + dateFormat: 'hh:mm a' + 下段のティア unit: 'Hour' を組み合わせます
• タイムゾーンを使用した CRUD：編集は設定されたタイムゾーンで行われます。actionComplete は、データベースに保存するためのローカル時刻に戻された日付を受け取ります
• actionComplete 内の args.data.ganttProperties.endDate — 編集後の値はすでにローカル時刻に変換されています
• Timezone クラス（@syncfusion/ej2-base）— タイムゾーンの計算を手動で行います
• timezone.offset(date, tz) → UTC からのオフセット（分）
• timezone.convert(date, fromOffset, toOffset) → 対象のタイムゾーン（IANA または数値）の日付
• timezone.remove(date, tz) → オフセットを取り除き、壁時計時刻を通常の日付として返します
• ロケールとグローバル化（locale、L10n.load()）
• RTL サポート（enableRtl: true + ロケール文字列）
• 列の日付形式の設定（format: 'dd/MM/yyyy' または 'yMd'）
• currencyCode — 金額列の通貨を設定します

---

クイックスタート（Vue 3 — Composition API）

npm install @syncfusion/ej2-vue-gantt --save

<template>
  <ejs-gantt
    id="gantt"
    :dataSource="data"
    :taskFields="taskFields"
    height="450px"
  ></ejs-gantt>
</template>

<script setup>
import { GanttComponent as EjsGantt } from '@syncfusion/ej2-vue-gantt';

const data = [
  { TaskID: 1, TaskName: 'Planning', StartDate: new Date('04/02/2019'), EndDate: new Date('04/06/2019'), ParentID: null },
  { TaskID: 2, TaskName: 'Identify location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, ParentID: 1 },
  { TaskID: 3, TaskName: 'Perform soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, ParentID: 1 },
];

const taskFields = {
  id: 'TaskID',
  name: 'TaskName',
  startDate: 'StartDate',
  endDate: 'EndDate',
  duration: 'Duration',
  progress: 'Progress',
  parentID: 'ParentID'
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/gantt/index.css";
</style>

クイックスタート（Vue 3 — Options API）

<script>
import { GanttComponent, Edit, Filter, Sort, Toolbar, Selection, DayMarkers } from '@syncfusion/ej2-vue-gantt';

export default {
  name: 'App',
  components: { 'ejs-gantt': GanttComponent },
  data() {
    return {
      data: [...],
      taskFields: { id: 'TaskID', name: 'TaskName', startDate: 'StartDate', duration: 'Duration', progress: 'Progress', parentID: 'ParentID' },
      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'ExpandAll', 'CollapseAll'],
      editSettings: { allowAdding: true, allowEditing: true, allowDeleting: true, allowTaskbarEditing: true }
    };
  },
  provide: {
    gantt: [Edit, Filter, Sort, Toolbar, Selection, DayMarkers]
  }
};
</script>

よくあるパターン

パターン 1 — 使用する機能だけを注入する

ガントチャートの機能を使用するには、モジュールを明示的に注入する必要があります。バンドルサイズを小さく保つため、有効にする機能のモジュールだけを注入してください。

// Composition API (Vue 3)
import { provide } from 'vue';
import { Edit, Filter, Sort, Toolbar } from '@syncfusion/ej2-vue-gantt';
provide('gantt', [Edit, Filter, Sort, Toolbar]);

// Options API
provide: { gantt: [Edit, Filter, Sort, Toolbar] }

パターン 2 — 自己参照型データと階層型データ

// Self-referential (flat array with ParentID — recommended for CRUD)
taskFields: { id: 'TaskID', name: 'TaskName', startDate: 'StartDate', duration: 'Duration', parentID: 'ParentID' }

// Hierarchical (nested subtasks array)
taskFields: { id: 'TaskID', name: 'TaskName', startDate: 'StartDate', duration: 'Duration', child: 'subtasks' }

パターン 3 — 多機能なガントチャート

<ejs-gantt
  :dataSource="data"
  :taskFields="taskFields"
  :editSettings="editSettings"
  :toolbar="toolbar"
  :allowFiltering="true"
  :allowSorting="true"
  :splitterSettings="{ columnIndex: 2 }"
  :timelineSettings="{ topTier: { unit: 'Week' }, bottomTier: { unit: 'Day' } }"
  height="500px"
></ejs-gantt>

主なプロパティのリファレンス

プロパティ	型	用途
dataSource	Array / DataManager	タスクデータ
taskFields	Object	データフィールドをガントチャートのフィールドにマッピングします
height	String	コンポーネントの高さ（例：'450px'）
toolbar	Array	ツールバーの項目名またはカスタム項目オブジェクト
editSettings	Object	許可する編集操作を制御します
allowFiltering	Boolean	列のフィルターメニューを有効にします
allowSorting	Boolean	列ヘッダーの並べ替えを有効にします
timelineSettings	Object	上段／下段の階層の単位と形式
splitterSettings	Object	グリッド／チャートパネルの幅の分割
labelSettings	Object	左側、右側、タスクのラベルフィールド
resources	Array	リソースのコレクション
resourceFields	Object	リソースの ID／名前フィールドをマッピングします
eventMarkers	Array	ラベル付きの垂直マーカー線
holidays	Array	非稼働日の定義
projectStartDate	Date	明示的なプロジェクト開始日
projectEndDate	Date	明示的なプロジェクト終了日
enableVirtualization	Boolean	大規模データ向けの仮想行レンダリング
enableCriticalPath	Boolean	クリティカルパス上のタスクを強調表示します
baselineTemplate	function/string	計画スケジュールや高度なベースラインレイアウト向けのカスタムベースライン描画
enableInfiniteTimelineScroll	boolean	ユーザーの操作に合わせて表示範囲を拡張し、タイムラインの無限水平スクロールを有効にします