MCPInstall

syncfusion-javascript-gantt-chart

Implement Syncfusion Gantt Chart using JavaScript/TypeScript (Essential JS 2). Use this when working with ej2-gantt component for project scheduling, task dependencies, and timeline management. Covers full Gantt implementation including data binding, task scheduling (auto/manual/custom, week/month duration units), columns (serial number column), resources, timeline configuration, WBS, resource view, critical path, baseline tracking, filtering, sorting, editing (taskbar draw for creating unscheduled tasks), and export functionality (Excel/PDF). Advanced features: task calendars with custom working time, hierarchical checkbox selection modes, dependency type restrictions (allowedDependencyTypes), calendar-driven scheduling with holidays and working time exceptions.

Installs
69
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/syncfusion/javascript-ui-controls-skills --skill syncfusion-javascript-gantt-chart
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads syncfusion-javascript-gantt-chart automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Implementing Syncfusion Gantt Chart

A comprehensive skill for implementing the Syncfusion Essential JS 2 Gantt Chart component in JavaScript/TypeScript projects. Covers everything from initial setup to advanced features like critical path, resource management, virtual scrolling, and export.

When to Use This Skill

Use this skill when the user needs to:

  • Set up the Syncfusion Gantt Chart from scratch (installation, dependencies, basic init)
  • Bind data (local hierarchical, flat/self-referential, remote DataManager, load-on-demand)
  • Configure task scheduling (auto/manual/custom modes, week/month duration units, milestones, constraints, daysPerWeek/daysPerMonth)
  • Configure calendars (project calendar, task calendars, working time, holidays, exceptions, hoursPerDay)
  • Define columns (custom columns, templates, frozen, WBS, serial number column, checkbox, responsive)
  • Manage resources (assign resources, resource view, multi-taskbar, work/task types)
  • Configure timeline (top/bottom tiers, zooming, formatting)
  • Enable editing (cell, dialog, taskbar drag/resize, taskbar draw for creating unscheduled tasks, dependency editing, indent/outdent)
  • Implement filtering, sorting, searching on Gantt grid
  • Show task dependencies (FS, SS, FF, SF, offsets, restrict dependency types via allowedDependencyTypes, connector lines)
  • Configure selection (row, cell, checkbox selection with hierarchyCheckboxMode for parent-child propagation)
  • Display critical path, baseline, event markers, holidays, data markers, labels
  • Export to Excel or PDF
  • Implement toolbar, context menu, undo/redo
  • Handle events, state persistence, localization, RTL, timezone
  • Optimize performance (virtual scroll, immutable mode, loading animation)

Quick Start

import { Gantt, Edit, Filter, Sort, Toolbar } from '@syncfusion/ej2-gantt';

Gantt.Inject(Edit, Filter, Sort, Toolbar);

let gantt: Gantt = new Gantt({
    dataSource: [
        {
            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: 'Soil test approval', StartDate: new Date('04/02/2024'), Duration: 4, Predecessor: '2FS', Progress: 50 }
            ]
        }
    ],
    height: '450px',
    taskFields: { id: 'TaskID', name: 'TaskName', startDate: 'StartDate', endDate: 'EndDate', duration: 'Duration', progress: 'Progress', dependency: 'Predecessor', child: 'subtasks' },
    toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'ExpandAll', 'CollapseAll', 'Search'],
    editSettings: { allowAdding: true, allowEditing: true, allowDeleting: true, allowTaskbarEditing: true },
    allowSorting: true,
    allowFiltering: true
});
gantt.appendTo('#Gantt');

Navigation Guide

Setup & Installation

📄 Read: references/getting-started.md

  • npm installation, webpack setup
  • Basic Gantt initialization (app.ts + index.html)
  • taskFields mapping, module injection
  • Error handling with actionFailure

Data Binding

📄 Read: references/data-binding.md

  • Local hierarchical and self-referential (flat) data
  • Remote data (DataManager, WebApiAdaptor, UrlAdaptor)
  • Load child on demand
  • Ajax binding, split tasks (segments)

Task Scheduling

📄 Read: references/task-scheduling.md

  • taskMode: 'Auto' (default) / 'Manual' / 'Custom' — controls date validation behaviour
  • Auto: parent taskbar derived from child min/max dates; dependencies shift successors automatically
  • Manual: user controls all dates; no recalculation; validateManualTasksOnLinking: true enables predecessor-based validation only
  • Custom: per-task scheduling via taskFields.manual boolean field in data source
  • Unscheduled tasks: allowUnscheduledTasks: true — tasks with only start date, only end date, only duration, or none; if false, defaults to duration 1 from projectStartDate
  • Duration units: durationUnit (project-wide: 'Day'/'Hour'/'Minute'/'Week'/'Month'); per-task via taskFields.durationUnit field or inline string ('4hours', '30min', '2weeks', '1month')
  • Week and Month duration units: daysPerWeek (default: 5), daysPerMonth (default: 20) — conversion factors for week/month to day
  • Milestones: Duration: 0 renders a diamond shape
  • projectStartDate / projectEndDate — constrain chart range; auto-calculated if omitted
  • dayWorkingTime — define working hour ranges (default: 8–12 and 13–17); used for auto-scheduling calculations
  • weekWorkingTime — per-day-of-week working hours; overrides dayWorkingTime for listed days; unlisted days fall back to dayWorkingTime
  • workWeek — specify working days (default: Mon–Fri); includeWeekend: true makes Sat/Sun working days
  • highlightWeekends: true — visually shade non-working days in chart

Task Constraints

📄 Read: references/task-constraints.md

  • Constraint types: ASAP(0), ALAP(1), MSO(2), MFO(3), SNET(4), SNLT(5), FNET(6), FNLT(7)
  • constraintType and constraintDate field mapping in taskFields
  • Benefits: enforce task sequences, anchor milestones, prevent resource conflicts
  • Handle constraint violations via actionBegin (requestType: 'validateTaskViolation')
  • validateMode flags: respectMustStartOn, respectMustFinishOn, respectStartNoLaterThan, respectFinishNoLaterThan
  • Constraint interaction with taskMode (Auto / Manual / Custom)
  • Editing constraints via dialog editor or programmatically (updateRecordByID)

Task Dependency

📄 Read: references/task-dependency.md

  • FS, SS, FF, SF types with lag/lead offsets (day/hour/minute units)
  • allowParentDependency, multiple predecessors (comma-separated)
  • Connector line customization (connectorLineWidth, connectorLineBackground)
  • addPredecessor / removePredecessor / updatePredecessor methods
  • Validation modes (respectLink, removeLink, preserveLinkWithEditing) via actionBegin
  • Validation dialog when all modes are disabled
  • autoUpdatePredecessorOffset — sync offsets against calendar rules on initial load
  • updateOffsetOnTaskbarEdit: false — preserve offsets during taskbar drag
  • Show/hide dependency lines dynamically via .e-gantt-dependency-view-container
  • enablePredecessorValidation: false — draw lines without enforcing scheduling
  • allowedDependencyTypes — restrict which dependency types are permitted (FS/SS/FF/SF)

Calendar Settings

📄 Read: references/calendar-settings.md

  • calendarSettings (projectCalendar, taskCalendar)
  • Project calendar: workingTime, holidays, exceptions
  • Task calendars: assign custom calendars via taskFields.calendarId
  • Calendar behavior affecting task scheduling, duration, dependencies
  • hoursPerDay — working hours per display day (default: 8)
  • workWeek, includeWeekend for working day configuration
  • Calendar interaction with dependencies, resources, task editing, taskbar editing
  • Limitations, best practices, calendar examples

Critical Path

📄 Read: references/critical-path.md

  • enableCriticalPath property
  • Slack calculation (zero/negative slack)
  • Visual highlighting and CPM principles

Baseline

📄 Read: references/baseline.md

  • renderBaseline, baselineColor
  • baselineStartDate, baselineEndDate, baselineDuration
  • Baseline milestones, CSS customization
  • Customizing via queryTaskbarInfo event (e.g., gradient styling)
  • baselineTemplate for custom HTML structure, including multiple baseline rendering
  • Return empty string from template for parent rows (hasChildRecords)

Resources

📄 Read: references/resources.md

  • resourceFields mapping, resources collection
  • Assigning resources to tasks, resource units
  • Over-allocation, resource templates
  • Custom column template + queryTaskbarInfo for per-resource badge and taskbar colors

Resource View

📄 Read: references/resource-view.md

  • viewType: 'ResourceView'
  • showOverAllocation
  • Resource grouping and display
  • Unassigned tasks grouped automatically at bottom
  • Taskbar drag and drop between resources (allowTaskbarDragAndDrop + RowDD module)

Resource Multi Taskbar

📄 Read: references/multi-taskbar.md

  • enableMultiTaskbar for collapsed resource rows
  • Overlapping task visualization
  • Editing tasks in collapsed state

Work & Task Types

📄 Read: references/work.md

  • taskFields.work mapping, workUnit (Hour/Day/Minute)
  • FixedWork, FixedDuration, FixedUnit task types

Columns

📄 Read: references/columns.md

  • columns array definition, treeColumnIndex
  • Serial Number Column: enableSerialNumber, field: 'SerialNumber' — auto-generated sequential row numbers that recalculate on sort, filter, paging, drag-drop
  • Checkbox columns, responsive columns
  • Column spanning, column templates
  • WBS column (enableWBS, enableAutoWbsUpdate)

Column Operations

📄 Read: references/column-operations.md

  • Column resizing (allowResizing, Resize module)
  • Column reordering (allowReordering, Reorder module)
  • Column menu (showColumnMenu)
  • Frozen/pinned columns (frozenColumns)

Timeline

📄 Read: references/timeline.md

  • topTier / bottomTier units and format
  • timelineSettings configuration
  • Custom timeline formatting, timeline tooltip
  • Infinite timeline scrolling with enableInfiniteTimelineScroll

Zooming

📄 Read: references/timeline.md

  • ZoomIn, ZoomOut, ZoomToFit toolbar items
  • zoomingLevels configuration
  • Programmatic zoom control

Sorting

📄 Read: references/sorting.md

  • allowSorting: true + Sort module injection
  • Click header to sort; Ctrl+click for multi-column sort; Shift+click to remove column from multi-sort
  • Initial sort via sortSettings.columns array (field + direction)
  • Programmatic sort: gantt.sortModule.sortColumn(field, direction, isMultiSort); clear all: gantt.clearSorting()
  • Sort events: actionBegin / actionComplete with args.requestType === 'sorting'
  • Disable sort for specific column: columns.allowSorting: false
  • Custom columns (string/numeric) sortable via sortSettings or programmatically
  • Touch: tap header to sort; popup appears for multi-column sort on touch devices

Filtering

📄 Read: references/filtering.md

  • allowFiltering, Filter module
  • Menu filter and Excel-like filter
  • Column-level filtering, searching

Selection

📄 Read: references/selection.md

  • allowSelection: false disables all selection; Selection module required
  • selectionSettings.mode: 'Row' (default) / 'Cell' / 'Both'
  • selectionSettings.type: 'Single' (default) / 'Multiple' (Ctrl+click for multi-select)
  • selectionSettings.enableToggle: true — click selected item again to deselect
  • Checkbox selection: add column with type: 'checkbox'; works with hierarchical data
  • hierarchyCheckboxMode: 'Self' / 'Hierarchy' (default) / 'FilteredHierarchy' — controls propagation of checkbox selection in parent-child hierarchies
  • enableHover: true — highlights rows, taskbars, header cells, and timeline cells on hover
  • Row selection: selectedRowIndex for initial load; selectRow(index) / selectRows([indexes]) for dynamic selection
  • Prevent row selection: rowSelecting event with args.cancel = true; rowDeselecting to prevent deselection
  • Cell selection: mode: 'Cell'; selectCell({ rowIndex, cellIndex }) for dynamic selection; getSelectedRowCellIndexes() returns { cellIndexes, rowIndex }[]
  • Prevent cell selection: cellSelecting event with args.cancel = true; cellSelected fires after
  • Select rows by condition in dataBound via gantt.treeGrid.grid.dataSource + gantt.selectRows(indexes)
  • getSelectedRowIndexes() → number[]; getSelectedRecords() → object[]
  • gantt.clearSelection() — clears all selected rows and cells
  • Touch: tap to select a row; tap popup to enter multi-row select mode, then tap additional rows
  • Cell selection not supported with enableVirtualization

Rows

📄 Read: references/rows.md

  • Customize row styles via rowDataBound event, CSS (.e-altrow, .e-selectionbackground), and treeGrid methods
  • Style parent vs child rows using hasChildRecords in rowDataBound
  • autoFocusTasks — scroll chart to taskbar when a row is clicked
  • rowHeight — uniform row height; per-row height via args.rowHeight in rowDataBound
  • Row hover with custom actions using dataBound + mouseover + Tooltip
  • Add rows programmatically via gantt.addRecord(data, position, index) — Top/Bottom/Above/Below/Child
  • Show/hide rows dynamically via treeGrid.getRowByIndex() + CSS display toggle
  • Row spanning via args.rowSpan in queryCellInfo (combine with colSpan for 2D merge)

Row Drag, Drop, Indent and Outdent

📄 Read: references/rows-drag-drop.md

  • RowDD module, allowRowDragAndDrop — drag rows within the Gantt
  • Drop positions: above (top border), below (bottom border), child (both borders)
  • Drag rows to external component via treeGrid.rowDropSettings.targetID in load event
  • Multi-row drag via selectionSettings.type: 'Multiple'
  • allowTaskbarDragAndDrop — reorder rows by dragging their taskbar
  • Programmatic reorder via gantt.reorderRows(fromIndexes, toIndex, position)
  • Drag lifecycle events: rowDragStartHelper, rowDragStart, rowDrag, rowDrop
  • Prevent child drop position using dropPosition === 'middleSegment' + reorderRows
  • Indent/Outdent toolbar items and gantt.indent() / gantt.outdent() methods
  • Programmatic indent/outdent: selectRow(i) then indent()/outdent()
  • Detect indent/outdent via actionComplete (args.requestType === 'indented'/'outdented')

Managing Tasks (Editing)

📄 Read: references/managing-tasks.md

  • editSettings (allowAdding, allowEditing, allowDeleting, allowTaskbarEditing)
  • Cell / Dialog / Taskbar editing modes
  • Add, delete, indent/outdent, drag-and-drop rows
  • Server-side CRUD, split/merge tasks, validation

Taskbar Draw (Create Tasks by Drawing)

📄 Read: references/taskbar-draw.md

  • allowTaskbarDraw: true in editSettings — enables drawing taskbars on the timeline to create or schedule unscheduled tasks
  • Workflow: identify unscheduled task → click and drag on timeline → Gantt auto-calculates StartDate, EndDate, Duration
  • Respects working time, holidays, weekends, task calendars, constraints, and dependencies
  • Fully unscheduled, partially scheduled (start-only, duration-only), and already-scheduled task scenarios
  • Parent tasks (cannot draw directly), child tasks (can draw; parent auto-adjusts), milestone tasks (duration = 0)
  • Feature interactions: taskbar editing, dialog/cell editing, dependencies, scheduling modes, resource assignments
  • Prerequisites: Edit module injection, allowTaskbarEditing, allowUnscheduledTasks, primary key configured
  • Behavior with auto/manual/custom scheduling modes and dependency validation
  • Events: taskbarEditing (prevent draw), actionComplete (post-draw actions)
  • Edge cases (drawing before project start, overlapping draws, minimal duration) and best practices

Undo / Redo

📄 Read: references/undo-redo.md

  • UndoRedo module injection, enableUndoRedo property
  • undoRedoActions — configure which actions to track (Edit, Delete, Add, Sorting, Filtering, ZoomIn/Out, ColumnReorder, ColumnResize, Indent, Outdent, RowDragAndDrop, TaskbarDragAndDrop, ColumnState, PreviousTimeSpan, NextTimeSpan)
  • undoRedoStepsCount — limit history depth (default: 10; 0 = disabled)
  • Toolbar Undo/Redo items for UI-based history navigation
  • Programmatic control: undo() and redo() methods
  • Retrieve history: getUndoActions() / getRedoActions()
  • Reset history: clearUndoCollection() / clearRedoCollection()

Toolbar

📄 Read: references/toolbar.md

  • Built-in toolbar items reference (Add, Edit, Delete, Update, Cancel, Search, ExpandAll, CollapseAll, Indent, Outdent, PrevTimeSpan, NextTimeSpan, ZoomIn, ZoomOut, ZoomToFit, Undo, Redo)
  • Override built-in toolbar behavior via toolbarClick with args.cancel = true
  • Show only icons — hide text labels with CSS (.e-tbar-btn-text)
  • Customize toolbar button appearance using CSS class selectors
  • Reposition toolbar to bottom using created event + DOM manipulation
  • Custom toolbar items using ItemModel (text, id, prefixIcon, align)
  • Mix built-in and custom items in the same toolbar array
  • Enable/disable toolbar items dynamically via gantt.toolbarModule.enableItems()
  • Add input components (AutoComplete, DropDownList) to toolbar using type: 'Input' with template

Context Menu

📄 Read: references/context-menu.md

  • enableContextMenu, ContextMenu module
  • Default and custom context menu items

Event Markers

📄 Read: references/event-markers.md

  • DayMarkers module, eventMarkers array
  • day, label, cssClass properties

Holidays

📄 Read: references/holidays.md

  • DayMarkers module, holidays array
  • from, to, label, cssClass properties

Data Markers (Indicators)

📄 Read: references/data-markers.md

  • taskFields.indicators mapping
  • date, iconClass, name, tooltip per indicator

Task Labels

📄 Read: references/labels.md

  • labelSettings: leftLabel, rightLabel, taskLabel
  • Field-based and template-based labels

Taskbar Customization

📄 Read: references/taskbar.md

  • taskbarHeight, rowHeight
  • taskbarTemplate, parentTaskbarTemplate, milestoneTemplate
  • queryTaskbarInfo event for dynamic styling

Scrolling

📄 Read: references/scrolling.md

  • scrollToDate method, scroll settings
  • Horizontal and vertical scroll control

Virtual Scrolling

📄 Read: references/virtual-scroll.md

  • VirtualScroll module injection, enableVirtualization for row virtualization
  • enableTimelineVirtualization — on-demand horizontal timeline rendering (renders 3x viewport width initially)
  • Get filtered record count with virtual scroll: actionComplete + gantt.treeGrid.filterModule.filteredResult
  • Get total dataset count via gantt.flatData.length in created event
  • Limitations: height must be in pixels, no multi-taskbar in Resource View, cell selection not persisted

Splitter

📄 Read: references/splitter.md

  • splitterSettings (position, columnIndex, view)
  • setSplitterPosition method, view modes

State Persistence

📄 Read: references/state-persistence.md

  • enablePersistence — saves Filtering, Sorting, Columns state in localStorage
  • localStorage key format: "gantt" + element ID (e.g., "ganttGantt")
  • Get/set persisted state via window.localStorage.getItem / setItem
  • Prevent specific keys from persisting via addOnPersist override in dataBound
  • Not persisted by default: column templates, formatters, headerText, headerTemplate, value accessors
  • Restore header templates and header text using getPersistData() + Object.assign + gantt.treeGrid.setProperties()

Immutable Mode

📄 Read: references/immutable.md

  • enableImmutableMode for performance
  • When to use immutable mode

Timezone

📄 Read: references/timezone.md

  • timezone property (UTC, IANA zones)
  • Consistent time display across regions

Globalization & Localization

📄 Read: references/global-local.md

  • Localization: L10n.load({ 'de-DE': { gantt: { ... } } }) + locale: 'de-DE' on Gantt instance
  • Full locale key table organized by category: task fields/columns, dialog/tabs, toolbar/actions, context menu/dependency, labels/timeline, predecessor validation messages (taskBeforePredecessor_FS etc.)
  • New keys vs old reference: resourceID, writeNotes, task, tasks, saveButton, okText, from/to, taskLink, lag, start/finish, enterValue, above/below/child, milestone, toTask/toMilestone, eventMarkers, leftTaskLabel, rightTaskLabel, timelineCell, confirmPredecessorDelete, changeScheduleMode, subTasksStartDate/subTasksEndDate, scheduleStartDate/scheduleEndDate, unit, work, taskType, group
  • Internationalization: loadCldr(cagregorian, numbers) + setCulture() for locale-aware date/number formatting; CLDR data from @syncfusion/ej2-cldr-data
  • RTL: enableRtl: true + matching locale (e.g., 'ar-AE') — reverses text direction and full layout
  • Default locale is 'en-US'

Excel Export

📄 Read: references/excel-export.md

  • ExcelExport module, allowExcelExport, toolbar items: ExcelExport, CsvExport
  • excelExport() / csvExport() methods, export to blob (4th arg isBlob)
  • Custom data source override (dataSource in ExcelExportProperties)
  • fileName, includeHiddenColumn, exportType
  • Show/hide columns on export (toolbarClick + excelExportComplete to restore)
  • Cell formatting (excelQueryCellInfo + args.style.backColor)
  • Theme (header/record font name and color), header/footer rows with hyperlinks and styles
  • Multiple Gantt export: AppendToSheet (same sheet, blankRows) and NewSheet modes

PDF Export

📄 Read: references/pdf-export.md

  • PdfExport module, allowPdfExport, toolbar item
  • fileName, pageOrientation, pageSize, exportType, includeHiddenColumn, showPredecessorLines
  • Export current view data, export/hide columns on export
  • Fit-to-width (isFitToWidth, chartWidth, gridWidth), export to blob
  • Header/footer: Text, Image, Line, PageNumber content types; enableFooter
  • Multiple Gantt export to single PDF, indicators in PDF export
  • Conditional cell formatting (pdfQueryCellInfo + PdfColor)
  • Timeline cell formatting (pdfQueryTimelineCellInfo)
  • Taskbar formatting + split taskbar segment colors (taskSegmentStyles)
  • ganttStyle: full appearance override (columnHeader, cell, taskbar, timeline, label, eventMarker, holiday)
  • Export with column templates (images/hyperlinks), taskbar templates, label templates, header templates
  • pdfColumnHeaderQueryCellInfo for header template export

Loading Animation

📄 Read: references/loading-animation.md

  • loadingIndicator.indicatorType: 'Shimmer' | 'Spinner'
  • Shimmer with virtual scroll

Accessibility

📄 Read: references/accessibility.md

  • WCAG 2.1 Level AA compliance
  • Keyboard navigation (grid, toolbar, context menu shortcuts)
  • ARIA roles and attributes (treegrid, row, gridcell, columnheader, dialog)
  • High contrast theme (highcontrast.css)
  • Screen reader support (NVDA, JAWS, VoiceOver) — taskbarAriaLabel customization
  • Focus management and autoFocusTasks

Programmatic Methods

📄 Read: references/gantt-methods.md

  • Column: autoFitColumns(field?), getGanttColumns(), getGridColumns(), refreshColumns(), reorderColumns(from, to), removeSortColumn(field)
  • Row/Record lookup: getRecordByID(id), getTaskByUniqueID(uid), getRowByID(id), getRowByIndex(index), getTaskInfo(taskId), getCurrentViewData(), getExpandedRecords(records)
  • Row reorder: reorderRows(fromIndexes, toIndex, position) — programmatic row move with position: 'above' | 'below' | 'middleSegment'; requires allowRowDragAndDrop + RowDD
  • Expand/Collapse: expandByIndex(index | index[]), expandByID(id), collapseByIndex(index), collapseByID(id)
  • Edit/CRUD: cancelEdit(), deleteRecord(taskDetail), updateRecordByIndex(index, data), updateRecordByID({TaskID, ...}), updateTaskId(currentId, newId), changeTaskMode(data), convertToMilestone(id), openAddDialog(data?, position?), openEditDialog(id)
  • Dependency: removePredecessor(id) — removes all dependencies from a task
  • Split/Merge: splitTask(taskId, splitDate | splitDate[]), mergeTask(taskId, segmentIndexes) — requires allowTaskbarEditing; parent/milestones cannot be split
  • Selection: selectCells(rowCellIndexes) — select cells by { rowIndex, cellIndexes[] } pairs; requires mode: 'Cell'
  • Scroll: scrollToTask(taskId), setScrollTop(px), updateChartScrollOffset(left, top)
  • Data: updateDataSource(dataSource, { projectStartDate, projectEndDate }), updateProjectDates(projectStartDate, projectEndDate) — refresh timeline range without swapping data
  • Critical path: getCriticalTasks() → IGanttData[]; requires enableCriticalPath + CriticalPath module
  • Undo/Redo: getUndoActions(), getRedoActions(), clearUndoCollection(), clearRedoCollection() — requires enableUndoRedo + UndoRedo module
  • Toolbar: enableItems(itemIds, enable) — enable/disable toolbar items at runtime; item IDs follow {ganttElementId}_{itemText} (e.g., Gantt_add); requires Toolbar module
  • Formatting helpers: getDurationString(value, unit), getWorkString(value, unit), getTaskbarHeight()
  • All methods use the Gantt instance directly: gantt.methodName(args) (TypeScript/JavaScript)

Events

📄 Read: references/events.md

  • actionBegin — fires before any action (add/edit/delete/sort/filter/dependency/zoom); supports args.cancel; argument types vary by operation (ITaskAddedEventArgs, ITimeSpanEventArgs, FilterEventArgs, SortEventArgs, IDependencyEventArgs, ZoomEventArgs)
  • actionComplete — fires after action completes; switch on args.requestType (filtering, sorting, save, delete, AfterZoomIn/Out/ToProject)
  • actionFailure — fires on operation failure; args.error[0] for error details
  • cellEdit — fires when grid cell enters edit mode; args.cancel = true prevents editing; args: cancel, cell, columnName, columnObject, row, rowData, value, validationRules
  • beforeTooltipRender — fires before tooltip renders (taskbar/connector/timeline); override args.content or set args.cancel = true
  • beforeExcelExport / beforePdfExport — fires before export; args.cancel = true aborts; isCsv flag for Excel vs CSV
  • Cell selection events (require selectionSettings.mode: 'Cell' or 'Both'): cellSelecting (cancel to prevent), cellSelected, cellDeselecting, cellDeselected — CellSelectEventArgs (cellIndex, cells, currentCell, data, previousRowCell) and CellDeselectEventArgs (cellIndexes, cells, data)
  • Row selection events: rowSelecting, rowSelected, rowDeselecting, rowDeselected — cancel, data, rowIndex, isCtrlPressed, isShiftPressed
  • Column drag events (require allowReordering: true + Reorder module): columnDragStart, columnDrag, columnDrop — ColumnDragEventArgs (column, target, draggableType)
  • Column menu events (require showColumnMenu: true + ColumnMenu module): columnMenuOpen (ColumnMenuOpenEventArgs: cancel, column, element, items, left, top, parentItem), columnMenuClick (ColumnMenuClickEventArgs: name, column, element, item)
  • contextMenuClick — requires ContextMenu module + contextMenuItems; args: name, element, event, item (id/text), type, rowData
  • Export complete events: excelExportComplete / pdfExportComplete — access blob via args.promise.then((e) => e.blobData)
  • requestType reference table: beforeSave, beforeDelete, taskbarEditing, filtering, sorting, zoom variants, save, delete, validateDependency, updateDependency

FAQ

What does the syncfusion-javascript-gantt-chart skill do?

Implement Syncfusion Gantt Chart using JavaScript/TypeScript (Essential JS 2). Use this when working with ej2-gantt component for project scheduling, task dependencies, and timeline management. Covers full Gantt implementation including data binding, task scheduling (auto/manual/custom, week/month duration units), columns (serial number column), resources, timeline configuration, WBS, resource view, critical path, baseline tracking, filtering, sorting, editing (taskbar draw for creating unscheduled tasks), and export functionality (Excel/PDF). Advanced features: task calendars with custom working time, hierarchical checkbox selection modes, dependency type restrictions (allowedDependencyTypes), calendar-driven scheduling with holidays and working time exceptions.

How do I install syncfusion-javascript-gantt-chart?

Run npx skills add https://github.com/syncfusion/javascript-ui-controls-skills --skill syncfusion-javascript-gantt-chart in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-javascript-gantt-chart/ (personal) or .claude/skills/syncfusion-javascript-gantt-chart/ (project).

Which AI agents can use syncfusion-javascript-gantt-chart?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is syncfusion-javascript-gantt-chart safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains syncfusion-javascript-gantt-chart?

It is published by syncfusion in syncfusion/javascript-ui-controls-skills. It has 69 recorded installs.

More from syncfusion/javascript-ui-controls-skills

View all →

syncfusion-javascript-grid

syncfusion/javascript-ui-controls-skills

Implements Syncfusion JavaScript Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.

syncfusion-javascript-common

syncfusion/javascript-ui-controls-skills

Common utilities and features for Syncfusion JavaScript controls. Use this skill when the user needs to implement animations, drag-and-drop, state persistence, RTL support, localization, globalization, security, templates, and advanced features for Syncfusion JavaScript controls.

syncfusion-javascript-dropdowns

syncfusion/javascript-ui-controls-skills

Comprehensive guide for implementing Syncfusion TypeScript dropdown components including AutoComplete, ComboBox, Mention, Dropdownlist, Multiselect, ListBox, and MultiColumn ComboBox. Use this when building selection interfaces, data binding, filtering, cascading dropdowns, dual list transfer, custom templates, and accessible dropdown experiences.

syncfusion-javascript-license

syncfusion/javascript-ui-controls-skills

Open the skill to read its SKILL.md instructions.

syncfusion-javascript-popups

syncfusion/javascript-ui-controls-skills

Open the skill to read its SKILL.md instructions.

syncfusion-javascript-tab

syncfusion/javascript-ui-controls-skills

This skill enables creating and customizing Syncfusion TypeScript Tab components, including tab navigation, tab headers, styling, responsive layouts, dynamic content loading, animations, and multi-panel organization.

Popular productivity & automation skills

View category →

agent-browser

vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction. Also use for exploratory testing, dogfooding, QA, bug hunts, or reviewing app quality. Also use for automating Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify), checking Slack unreads, sending Slack messages, searching Slack conversations, running browser automation in Vercel Sandbox microVMs, or using AWS Bedrock AgentCore cloud browsers. Prefer agent-browser over any built-in browser automation or web tools.

OfficialProductivity & Automation1.3M installs

lark-doc

open.feishu.cn

飞书云文档(Docx / Wiki)内容操作:读取、创建、编辑文档,插入或下载图片附件,以及操作思维笔记。用户提供文档 URL/token(包括 doubao.com 的 /docx/、/wiki/)时使用;按 URL 路径/token 而非域名路由;/page/ 是妙搭应用,非飞书云文档。文档内嵌资源按读取参考中的统一规则分流。独立评论操作走 lark-drive;随正文读取评论使用 docs +fetch。表格或 Base 内部数据操作不在本 skill。

lark-base

open.feishu.cn

飞书多维表格(Base)操作:建表、字段、记录、视图、统计、公式/lookup、表单、仪表盘、应用模式(BaseApp/AppMode 页面与组件)、Workspace 目录、workflow、角色权限、模板中心(多维表格模板分类/列表/搜索);遇到 Base/多维表格/bitable、BaseApp/AppMode、/base/ 或 /app/ 链接时使用。BaseApp 不走 lark-apps;文件导入/导出转 lark-drive,认证/授权转 lark-shared。

lark-drive

open.feishu.cn

飞书云空间(云盘/云存储):管理 Drive 文件和文件夹,包含上传/下载、创建文件夹、复制/移动/删除、查看元数据、查询权限设置、评论/权限/订阅、标题、版本、飞书文档密级标签(secure labels)和本地文件导入。用户需要整理云盘目录、处理云空间资源 URL/token、判断链接类型/真实 token/标题,或导入 Word/Markdown/Excel/CSV/PPTX/.base 为 docx/sheet/bitable/slides 时使用;doubao.com 云空间 URL/token 也按资源路径和 token 路由,不回退 WebFetch。不负责:文档内容编辑(走 lark-doc)、表格/Base 表内数据操作(走 lark-sheets/lark-base)、知识空间节点/成员管理(走 lark-wiki)、原生 Markdown 文件读写/patch/diff(走 lark-markdown)。

lark-shared

open.feishu.cn

Use for lark-cli setup/auth tasks: auth login/status/logout, user vs bot identity, business-domain permissions (--domain, including all/docs/drive), missing scopes, revoking authorization, or handling notice JSON.

lark-im

open.feishu.cn

飞书即时通讯:收发消息和管理群聊。发送和回复消息、搜索聊天记录、管理群聊成员、上传下载图片和文件、管理表情回复、发送应用内/短信/电话加急、发送和处理交互卡片(Interactive Card)、监听卡片按钮回调(card.action.trigger)。当用户需要发消息、查看或搜索聊天记录、下载聊天中的文件、查看群成员、搜索群、创建群聊或话题群、管理标记数据、管理 Feed 置顶(添加/移除/查询置顶会话)、管理标签数据、处理卡片回调时使用。