Name: syncfusion-react-gantt-chart
Author: syncfusion

Implement, configure, and customize the Syncfusion React Gantt Chart component. Use this when building project scheduling applications with task timelines, dependencies, and resource management. Covers GanttComponent setup, task constraints, taskbar customization, filtering, sorting, Excel/PDF expor

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. 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.) Configuring project calendars, task calendars, holidays, working time, and hours per day rules 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, including hierarchy checkbox 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 Documentation and Navigation Guide Getting Started 📄 Read: [references/getting started.md](references/getting started.md) Installation and package dependencies Vite / CRA project setup Theme package installation and CSS import via npm theme packages Basic GanttComponent with taskFields mapping Module injection guide (all available services) gridLines prop ( 'Both' / 'Horizontal' / 'Vertical' / 'None' ) First render walkthrough with minimal example, output summary, and common gotchas Data Binding 📄 Read: [references/data binding.md](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 Task Scheduling 📄 Read: [references/task scheduling.md](references/task scheduling.md) Auto, Manual, and Custom scheduling modes ( taskMode ) Duration unit support: Day , Hour , Minute , Week , and Month Mapping per task duration units with taskFields.durationUnit Duration values with embedded units (for example, 5 days , 2 weeks , 1 month ) daysPerWeek and daysPerMonth conversion controls for week/month scheduling How week/month durations interact with working time, weekends, holidays, and task calendars 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 Taskbar Draw 📄 Read: [references/taskbar draw.md](references/taskbar draw.md) allowTaskbarDraw API and required editing setup Drawing a taskbar to create or schedule an unscheduled task How the drawn range resolves StartDate , EndDate , and Duration Behavior for fully unscheduled, partially scheduled, parent, child, milestone, and manual tasks Interaction with taskbar editing, dialog editing, cell editing, validation, calendars, holidays, dependencies, resources, and task calendars Practical examples, limitations, and best practices Task Dependency 📄 Read: [references/task dependency.md](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 Allowed Dependency Types — allowedDependencyTypes={['FS', 'SF']} restricts which dependency types can be loaded, created, and edited Show/Hide Dependencies Dynamically — toggle .e gantt dependency view container CSS visibility Disable Validation — enablePredecessorValidation={false} disables auto date validation based on predecessor links Task Constraints 📄 Read: [references/task constraints.md](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 Timeline and Zooming 📄 Read: [references/timeline.md](references/timeline.md) timelineViewMode quick presets ( Hour , Day , Week , Month , Year ) Top tier and bottom tier independent configuration ( unit , format , count , formatter ) Combining timeline cells using count (merge multiple units per cell) Custom timeline cell formatting using formatter (tier + mode aware) Timeline view dates with viewStartDate / viewEndDate (lock visible range) weekStartDay — controls which day starts a week column (0=Sun, 1=Mon…) Automatic timescale updates using updateTimescaleView Dynamic timeline mode change at runtime (update timelineViewMode + refresh() ) Timeline cell tooltip visibility using showTooltip Timeline template customization using timelineTemplate ({ date, value, tier }) Infinite timeline scrolling using enableInfiniteTimelineScroll (extends the visible range while navigating with horizontal scrollbar or scroll arrows) Timeline navigation using previousTimeSpan() / nextTimeSpan() Zooming with toolbar ( ZoomIn , ZoomOut , ZoomToFit ) Customizing zoom steps with zoomingLevels ( ZoomTimelineSettings ) Programmatic zoom methods: zoomIn() , zoomOut() , fitToProject() Timeline cell width using timelineUnitSize Weekend handling: Highlight weekends with highlightWeekends={true} Hide weekends using timelineSettings.showWeekend (with noted limitations) Columns 📄 Read: [references/columns.md](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 ) Serial Number column configuration ( enableSerialNumber + field: 'SerialNumber' ) Serial number behavior during sort, filter, search, expand/collapse, add/edit/delete, drag and drop, refresh, and virtualization 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 ) Column Interactions 📄 Read: [references/column interactions.md](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) Rows 📄 Read: [references/rows.md](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 Managing Tasks 📄 Read: [references/managing tasks.md](references/managing tasks.md) Adding new tasks (toolbar, context menu, programmatic addRecord() ) Editing tasks — dialog edit ( mode: 'Dialog' ), cell edit ( mode: 'Auto' ), taskbar drag Taskbar draw creation for unscheduled tasks ( allowTaskbarDraw ) How drawn taskbars generate or update StartDate , EndDate , and Duration Behavior for fully unscheduled, partially scheduled, parent, child, milestone, and manual tasks Interactions with taskbar editing, dialog editing, cell editing, validation, calendars, holidays, dependencies, and resources Deleting tasks (toolbar, deleteRecord() , 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 bo