jordium-gantt-vue3

jordium-gantt-vue3

✨ Introduction

jordium-gantt-vue3 is a modern Gantt chart component for Vue3 with built-in Resource View and Resource Planning capabilities. Manage tasks, timelines, and resource allocation in one unified interface, ideal for project scheduling and workforce planning.

Core Features

• 📊 Resource Planning View - The only Vue 3 Gantt component with a dedicated resource view. Visualize task assignments and workload per resource (people / equipment)
• 📊 Feature Complete - Task management, milestones, dependencies, progress tracking
• 🎨 Theme System - Built-in light/dark themes with customizable styles
• 🖱️ Smooth Interaction - Drag & resize, zoom, double-click edit, context menu
• 🌍 Internationalization - Built-in Chinese/English with extensible language support
• ⚡ High Performance - Virtual scrolling, lazy loading for handling massive data
• 💎 Type Safe - Full TypeScript support

Preview

Light Theme

Dark Theme

📦 Installation

Install using your preferred package manager:

# npm
npm install jordium-gantt-vue3

# yarn
yarn add jordium-gantt-vue3

# pnpm
pnpm add jordium-gantt-vue3

🚀 Quick Start

Import Component

Import the GanttChart component and styles:

<script setup lang="ts">
import { GanttChart } from 'jordium-gantt-vue3'
import 'jordium-gantt-vue3/dist/assets/jordium-gantt-vue3.css' // Scheduled for deprecation
import 'jordium-gantt-vue3/index.css' // Recommended
</script>

Tip: The style file only needs to be imported once in your project. It's recommended to import it in main.ts or the root component.

First Example

Create your first Gantt chart:

<template>
  <div style="height: 600px;">
    <GanttChart :tasks="tasks" :milestones="milestones" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { GanttChart } from 'jordium-gantt-vue3'
import 'jordium-gantt-vue3/index.css'

const tasks = ref([
  {
    id: 1,
    name: 'Project Kickoff',
    startDate: '2025-01-01',
    endDate: '2025-01-10',
    progress: 100,
  },
  {
    id: 2,
    name: 'Requirements Analysis',
    startDate: '2025-01-11',
    endDate: '2025-01-20',
    progress: 80,
    predecessor: [1],
  },
  {
    id: 3,
    name: 'System Design',
    startDate: '2025-01-21',
    endDate: '2025-02-05',
    progress: 50,
    predecessor: [2],
  },
])

const milestones = ref([
  {
    id: 101,
    name: 'Project Approval',
    startDate: '2025-01-01',
    type: 'milestone',
  },
])
</script>

🌞 NPM Package Usage Example

Please refer to the npm-demo folder in the project. It is a standalone project that can be opened and run independently using your IDE. Before running, make sure to install the Element Plus library and the jordium-gantt-vue3 plugin package.

# npm
npm install element-plus
npm install jordium-gantt-vue3
npm run dev

📖 Component Guide

GanttChart Component

GanttChart is the core entry point of the library, providing complete Gantt chart functionality.

Basic Props

Prop	Type	Default	Description
tasks	Task[]	[]	Array of task data
milestones	Task[]	[]	Array of milestone data (Note: Type is Task[], must set type='milestone')
resources	Resource[]	[]	Array of resource data (used in resource planning view)
viewMode	'task' | 'resource' | 'calendar' | 'resource-usage'	'task'	View mode: 'task' for task planning view | 'resource' for resource planning view | 'calendar' for calendar view | 'resource-usage' for resource-usage view
availableViewModes	Array<'task' | 'resource' | 'calendar' | 'resource-usage'>	['task', 'resource']	View mode buttons actually displayed on the toolbar; defaults to task/resource only (backward-compatible with pre-upgrade behavior). Add 'calendar' / 'resource-usage' to enable calendar or resource-usage views
calendarProps	Partial<CalendarView props>	undefined	Props forwarded to the internal CalendarView component when viewMode='calendar' (e.g. taskCardOpacity, allDayLabel, etc.). See CalendarView Component for the full list and CalendarView Configuration (calendarProps) for forwarding details
resourceUsageProps	Partial<ResourceUsageView props>	undefined	Props forwarded to the internal ResourceUsageView component when viewMode='resource-usage' (e.g. overloadColor, columnRenderMode, etc.). See ResourceUsageView Component for the full list and ResourceUsageView Configuration (resourceUsageProps) for forwarding details
showToolbar	boolean	true	Whether to show the toolbar
useDefaultDrawer	boolean	true	Whether to use the built-in task edit drawer (TaskDrawer)
useDefaultMilestoneDialog	boolean	true	Whether to use the built-in milestone edit dialog (MilestoneDialog)
autoSortByStartDate	boolean	false	Whether to automatically sort tasks by start date
allowDragAndResize	boolean	true	Whether to allow dragging and resizing tasks/milestones
enableTaskRowMove	boolean	false	Whether to allow dragging and dropping TaskRow
enableTaskListContextMenu	boolean	true	Whether to enable TaskList (TaskRow) context menu. When true: uses built-in menu if task-list-context-menu slot is not declared, uses custom menu if slot is declared; when false: context menu is completely disabled
enableTaskBarContextMenu	boolean	true	Whether to enable TaskBar context menu. When true: uses built-in menu if task-bar-context-menu slot is not declared, uses custom menu if slot is declared; when false: context menu is completely disabled
assigneeOptions	Array<{ key?: string | number; value: string | number; label: string; avatar?: string; type?: string  }>	[]	Assignee dropdown options in task edit drawer. type is an optional resource category (Human/Device/Others); selecting a resource auto-fills the category field on the bound resource row
resourceTypeOptions	ResourceTypeOption[] ({ value: string; label: string })	[]	Custom option set for the "category" dropdown in the TaskDrawer resource allocation row. When not set or an empty array is passed, falls back to the built-in Human/Device/Others options. label is fully controlled externally, enabling custom categories or i18n. See the "Custom Resource Categories" example below
showResourceTypeOption	boolean	true	Whether to show the "category" dropdown in the TaskDrawer resource allocation row. Set to false to fully hide this column (still defaults to 'Human' internally for resource.type, no impact on the underlying data)
locale	'zh-CN' | 'en-US'	'zh-CN'	Language setting (reactive). Component's internal language will follow changes
theme	'light' | 'dark'	'light'	Theme mode (reactive). Component's theme will follow changes
timeScale	'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year'	'week'	Time scale (reactive). Timeline scale will follow changes
fullscreen	boolean	false	Fullscreen state control (reactive). Component's fullscreen state will follow changes
expandAll	boolean	true	Expand/collapse all tasks (reactive). All tasks' expand state will follow changes
enableLinkAnchor	boolean	true	Whether to enable Link Anchor，Default: true
pendingTaskBackgroundColor	string	'#409eff'	Background color for pending tasks' TaskBar. Supports hex color values (e.g., '#409eff'). Priority: Higher than system default, lower than Task object's barColor property
delayTaskBackgroundColor	string	'#f56c6c'	Background color for overdue tasks' TaskBar. Supports hex color values (e.g., '#f56c6c'). Priority: Higher than system default, lower than Task object's barColor property
completeTaskBackgroundColor	string	'#909399'	Background color for completed tasks' TaskBar. Supports hex color values (e.g., '#909399'). Priority: Higher than system default, lower than Task object's barColor property
ongoingTaskBackgroundColor	string	'#e6a23c'	Background color for ongoing tasks' TaskBar. Supports hex color values (e.g., '#e6a23c'). Priority: Higher than system default, lower than Task object's barColor property
showActualTaskbar	boolean	false	Whether to display actual TaskBar (shows actual execution progress below planned TaskBar)
enableTaskbarTooltip	boolean	true	Whether to enable TaskBar hover tooltip (shows task details on mouse hover)
enableMilestoneTooltip	boolean	true	Whether to enable milestone hover tooltip (shows milestone name and date on mouse hover)
milestoneLabelPosition	'left' | 'top' | 'right' | 'bottom'	'right'	Milestone label position relative to the icon (or custom custom-milestone-content slot content). Default matches the previous hardcoded behavior
showConflicts	boolean	true	Whether to display resource conflict visualization layer (shows diagonal stripe background for overload zones in resource view)
showTaskbarTab	boolean	true	Whether to display resource tab on TaskBar (shows resource allocation label on TaskBar in resource view)
enableTaskListCollapsible	boolean	true	Whether to allow collapsing/expanding the TaskList panel. When false: forcibly hides TaskList, SplitterBar and collapse button; Timeline takes full width
taskListVisible	boolean	true	Controls TaskList visibility (reactive). Only effective when enableTaskListCollapsible=true
enableTaskDrawerAutoClose	boolean	true	Whether to allow TaskDrawer to auto-close (closes on outside click or Esc key). Set to false to disable auto-close — the drawer can only be closed via its internal close button
rowHeight	number	51	Row height (px) shared by both Timeline and TaskList. Valid range: 30–60. Values below 30 are clamped to 30, values above 60 are clamped to 60. When set below 40, TaskBar content (name + progress) automatically switches to a compact horizontal layout to fit the smaller row
enableParentTaskAutoSchedule	boolean	true	Whether to enable auto-scheduling for parent tasks. true: parent task's TaskBar time window automatically stretches to span the earliest start and latest end of its children. false: parent task displays its own configured date range; a red indicator line appears above its TaskBar when children overflow the configured bounds
enableResourceLaneStacking	boolean	true	Resource view lane stacking mode. true: greedy lane packing — non-overlapping tasks share the same row, maximizing space efficiency. false: each task occupies its own row, ideal for dense schedules where individual task readability matters. Interaction note: when enabled and taskBarConfig.titlePosition='right', the resource view automatically renders as 'inside' instead, to avoid covering the adjacent task sharing the same lane; disabling it restores the 'right' rendering
linkConfig	LinkConfig	undefined	Link line style configuration. Supports switching line type (bezier/straight/orthogonal), customizing colors, line width, and dotted/solid style. See LinkConfig Configuration
taskbarDescFixed	boolean	false	Whether the Taskbar content follows the horizontal scrolling of the Timeline. false: The Taskbar content, including the title, progress, and avatar information, moves horizontally with the Timeline. When approaching the left or right boundary of the Timeline, the content will be automatically pinned with a snapping effect. true: The Taskbar content, including the title, progress, and avatar information, remains fixed at the center of the Taskbar. When approaching the left or right boundary of the Timeline, no snapping effect will be applied.

TaskListColumn Component Props

The TaskListColumn component is used to define task list columns in declarative mode (taskListColumnRenderMode="declarative"). Similar to Element Plus's el-table-column component.

Prop	Type	Default	Description
prop	string	-	Column property name, used to access task object fields. Examples: 'name', 'assignee', 'progress', etc.
label	string	-	Column header display text
width	number | string	-	Column width. Number represents pixels (e.g., 200), string supports percentage (e.g., '20%')
align	'left' | 'center' | 'right'	'left'	Column content alignment
cssClass	string	-	Custom CSS class name for column styling
fixed	'left' | 'right' | boolean	-	Column pinning. 'left': column auto-reorders to far left and sticks; 'right': column sticks to far right. true is equivalent to 'left'

Usage Example:

<GanttChart 
  :tasks="tasks" 
  task-list-column-render-mode="declarative"
>
  <TaskListColumn prop="name" label="Task Name" width="300" />
  <TaskListColumn prop="assignee" label="Assignee" width="150" align="center" />
  <TaskListColumn prop="progress" label="Progress" width="100" align="center" />
  <TaskListColumn prop="startDate" label="Start Date" width="140" />
  <TaskListColumn prop="endDate" label="End Date" width="140" />
</GanttChart>

Fixed Columns Example (fixed prop):

<GanttChart 
  :tasks="tasks" 
  task-list-column-render-mode="declarative"
>
  <!-- First column (name) always sticky at left:0 -->
  <TaskListColumn prop="name" label="Task Name" width="300" />

  <!-- fixed="left": reorders to the right of name column and sticks -->
  <TaskListColumn prop="assignee" label="Assignee" width="150" fixed="left" />

  <!-- fixed (no value): equivalent to fixed="left" -->
  <TaskListColumn prop="predecessor" label="Predecessor" width="120" fixed />

  <!-- Normal columns: scroll with the table -->
  <TaskListColumn prop="startDate" label="Start Date" width="140" />
  <TaskListColumn prop="endDate" label="End Date" width="140" />

  <!-- fixed="right": sticks to the far right -->
  <TaskListColumn prop="progress" label="Progress" width="100" fixed="right" />
</GanttChart>

💡 Tips:

• The TaskListColumn component itself does not render any content, it only declares column configuration
• Must be used inside the GanttChart component with task-list-column-render-mode="declarative" set
• Column display order is determined by the declaration order of TaskListColumn components, but fixed columns are auto-reordered: fixed='left' to the far left, fixed='right' to the far right
• Using fixed without a value (e.g. <TaskListColumn fixed />) is equivalent to fixed="left"
• For detailed column content customization and slot usage, see Slots section

TaskListContextMenu Component Props

The TaskListContextMenu component is used to declaratively define the context menu for TaskList (TaskRow). Takes effect when enableTaskListContextMenu is true.

Usage Examples:

<GanttChart 
  :tasks="tasks" 
  :enable-task-list-context-menu="true"
>
  <!-- Default behavior: all tasks show this context menu -->
  <TaskListContextMenu>
    <template #default="scope">
      <div class="custom-menu">
        <div class="menu-item" @click="editTask(scope.row)">Edit</div>
        <div class="menu-item" @click="deleteTask(scope.row)">Delete</div>
      </div>
    </template>
  </TaskListContextMenu>
  
  <!-- Only show for tasks with type='task' -->
  <TaskListContextMenu task-type="task">
    <template #default="scope">
      <div class="custom-menu">
        <div class="menu-item">Task Specific Menu</div>
      </div>
    </template>
  </TaskListContextMenu>
  
  <!-- Show for multiple types -->
  <TaskListContextMenu :task-type="['task', 'milestone']">
    <template #default="scope">
      <div class="custom-menu">
        <div class="menu-item">Task and Milestone Menu</div>
      </div>
    </template>
  </TaskListContextMenu>
</GanttChart>

💡 Tips:

• The TaskListContextMenu component itself does not render any content, it only declares menu configuration
• Must be used inside the GanttChart component with enable-task-list-context-menu="true" set
• Menu positioning and visibility are automatically managed internally, users only need to focus on menu content HTML structure
• Menu automatically closes when clicking outside or scrolling
• For detailed slot usage, see Slots section

TaskBarContextMenu Component Props

The TaskBarContextMenu component is used to declaratively define the context menu for TaskBar (timeline task bars). Takes effect when enableTaskBarContextMenu is true.

Usage Examples:

<GanttChart 
  :tasks="tasks" 
  :enable-task-bar-context-menu="true"
>
  <!-- Default behavior: all tasks show this context menu -->
  <TaskBarContextMenu>
    <template #default="scope">
      <div class="custom-menu">
        <div class="menu-item" @click="extendTask(scope.row)">Extend Task</div>
        <div class="menu-item" @click="moveTask(scope.row)">Move Task</div>
      </div>
    </template>
  </TaskBarContextMenu>
  
  <!-- Only show for tasks with type='task' -->
  <TaskBarContextMenu task-type="task">
    <template #default="scope">
      <div class="custom-menu">
        <div class="menu-item">Task Bar Specific Menu</div>
      </div>
    </template>
  </TaskBarContextMenu>
  
  <!-- Show for multiple types -->
  <TaskBarContextMenu :task-type="['task', 'story']">
    <template #default="scope">
      <div class="custom-menu">
        <div class="menu-item">Task and Story Menu</div>
      </div>
    </template>
  </TaskBarContextMenu>
</GanttChart>

💡 Tips:

• The TaskBarContextMenu component itself does not render any content, it only declares menu configuration
• Must be used inside the GanttChart component with enable-task-bar-context-menu="true" set
• Menu positioning and visibility are automatically managed internally, users only need to focus on menu content HTML structure
• Menu automatically closes when clicking outside or scrolling
• For detailed slot usage, see Slots section

Configuration Object Props

For complete configuration object documentation, see ⚙️ Configuration & Customization section.

Prop	Type	Default	Description
toolbarConfig	ToolbarConfig	{}	Toolbar configuration
taskListConfig	TaskListConfig	undefined	Task list configuration
resourceListConfig	ResourceListConfig	undefined	Resource list configuration
taskBarConfig	TaskBarConfig	undefined	Task bar style configuration
localeMessages	Partial<Messages['zh-CN']>	undefined	Custom localization messages
workingHours	WorkingHours	{ morning: { start: 8, end: 11 }, afternoon: { start: 13, end: 17 } }	Working hours configuration
workCalendarExceptions	WorkCalendarException[]	undefined	Work calendar exceptions (holidays/makeup workdays/leave), driving the shared weekend gray-out header across Timeline / CalendarView / ResourceUsageView (only "full-day + no resourceIds" entries take effect); also the default exception source for ResourceUsageView's numeric work-hour calculation, which can be overridden separately via resourceUsageProps.workCalendarExceptions (affects only that view's numbers, not the shared header). Field reference and data sample: see workCalendarExceptions (Work Calendar Exception Configuration), propagation scope: see ResourceUsageView Props
scaleConfigs	{ [scale: TimelineScale]?: ScaleConfigOption }	undefined	Custom display configuration per time scale (cell width, header formatters, buffers, etc.), see scaleConfigs (Timeline Scale Configuration)

Callback Props

Component Events

For complete event documentation, see:

• Task-related events: See Task Management section below
• Milestone-related events: See Milestone Management section below
• Calendar view events : See CalendarView Component section below
• Resource-usage view events : See ResourceUsageView Component section below

Event List Overview:

Event Name	Parameters	Description
add-task	-	Clicked toolbar "Add Task" button
task-click	(task: Task, event: MouseEvent)	Clicked task
task-double-click	(task: Task)	Double-clicked task
task-added	{ task: Task }	Triggered after task added
task-updated	{ task: Task }	Triggered after task updated
task-deleted	{ task: Task }	Triggered after task deleted
taskbar-drag-end	(task: Task)	Task drag ended
taskbar-resize-end	(task: Task)	Task resize ended
predecessor-added	{ targetTask, newTask }	Added predecessor task
successor-added	{ targetTask, newTask }	Added successor task
timer-started	(task: Task)	Task timer started
timer-stopped	(task: Task)	Task timer stopped
add-milestone	-	Clicked toolbar "Add Milestone" button
milestone-saved	(milestone: Task)	Milestone saved
milestone-deleted	{ milestoneId: number }	Milestone deleted
milestone-icon-changed	{ milestoneId, icon }	Milestone icon changed
milestone-drag-end	(milestone: Task)	Milestone drag ended
task-row-moved	payload: { draggedTask: Task, targetTask: Task, position: 'after' | 'child', oldParent: Task | null, newParent: Task | null }	TaskRow drag ended (optional)
taskbar-resource-change	payload: { task: Task, oldResourceId: string | number, newResourceId: string | number }	Task moved across resources (dragging task to another resource row in resource view)
view-mode-changed	(mode: 'task' | 'resource' | 'calendar' | 'resource-usage')	Triggered after view mode switch (via toolbar button click or viewMode property change)
resource-drag-end	(task: Task)	Triggered after vertical task drag ends in resource view
calendar-selection-complete	CalendarSelectionRange	Triggered after calendar view drag selection is confirmed (forwarded from CalendarView's selection-complete)
calendar-selection-cancel	{ reason }	Triggered when calendar view drag selection is cancelled
calendar-resource-change	{ next, prev }	Triggered after selected resource changes in calendar view
calendar-view-change	{ next, prev }	Triggered after day/week/month switch in calendar view
calendar-date-change	{ next, prev }	Triggered after anchor date changes in calendar view
calendar-task-click	(task: Task, event: MouseEvent)	Triggered when an existing task card is clicked in calendar view
calendar-task-move	CalendarTaskMovePayload	Triggered after an existing task card is dragged and dropped in calendar view
resource-usage-scale-change	{ next, prev }	Triggered after scale switch in resource-usage view
resource-usage-cell-click	ResourceUsageCellPayload	Triggered when a workload cell is clicked in resource-usage view
resource-usage-cell-hover	ResourceUsageCellPayload | null	Triggered when mouse enters/leaves a workload cell in resource-usage view
resource-usage-overload-detected	{ resourceId, periods }	Triggered when an overload period is detected for a resource in resource-usage view
resource-usage-task-detail-click	ResourceUsageTaskDetailClickPayload	Triggered when a task item inside the workload cell tooltip detail is clicked; automatically switches to 'task' view and scrolls to that task

Example 1: Simplest Gantt Chart

<template>
  <div style="height: 600px;">
    <GanttChart :tasks="tasks" :assignee-options="assigneeOptions" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { GanttChart } from 'jordium-gantt-vue3'
import 'jordium-gantt-vue3/index.css'

const tasks = ref([
  {
    id: 1,
    name: 'Task 1',
    startDate: '2025-01-01',
    endDate: '2025-01-10',
    progress: 100,
  },
])

const assigneeOptions = ref([
  { value: 'alice', label: 'Alice' },
  { value: 'bob', label: 'Bob' },
  { value: 'charlie', label: 'Charlie' },
])
</script>

Example 2: Gantt Chart with Milestones

<template>
  <div style="height: 600px;">
    <GanttChart :tasks="tasks" :milestones="milestones" :assignee-options="assigneeOptions" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { GanttChart } from 'jordium-gantt-vue3'
import 'jordium-gantt-vue3/index.css'

const tasks = ref([
  {
    id: 1,
    name: 'Project Kickoff',
    startDate: '2025-01-01',
    endDate: '2025-01-10',
    progress: 100,
  },
])

const milestones = ref([
  {
    id: 101,
    name: 'Project Approval',
    startDate: '2025-01-01',
    type: 'milestone',
    icon: 'diamond',
  },
])

const assigneeOptions = ref([
  { value: 'alice', label: 'Alice' },
  { value: 'bob', label: 'Bob' },
  { value: 'charlie', label: 'Charlie' },
])
</script>

Example 3: Hide Toolbar, Custom Control Buttons with Event Binding

<template>
  <div>
    <!-- Custom toolbar -->
    <div class="custom-toolbar">
      <button @click="addTask">Add Task</button>
      <button @click="addMilestone">Add Milestone</button>
    </div>

    <!-- Gantt chart component with hidden built-in toolbar -->
    <div style="height: 600px;">
      <GanttChart
        :tasks="tasks"
        :milestones="milestones"
        :show-toolbar="false"
        :assignee-options="assigneeOptions"
        @task-added="handleTaskAdded"
        @milestone-saved="handleMilestoneSaved"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { GanttChart } from 'jordium-gantt-vue3'
import 'jordium-gantt-vue3/index.css'

const tasks = ref([])
const milestones = ref([])

const assigneeOptions = ref([
  { value: 'alice', label: 'Alice' },
  { value: 'bob', label: 'Bob' },
  { value: 'charlie', label: 'Charlie' },
])

const addTask = () => {
  const newTask = {
    id: Date.now(),
    name: 'New Task',
    startDate: new Date().toISOString().split('T')[0],
    endDate: new Date().toISOString().split('T')[0],
    progress: 0,
  }
  tasks.value.push(newTask)
}

const addMilestone = () => {
  const newMilestone = {
    id: Date.now(),
    name: 'New Milestone',
    startDate: new Date().toISOString().split('T')[0],
    type: 'milestone',
  }
  milestones.value.push(newMilestone)
}

const handleTaskAdded = e => {
  console.log('Task added:', e.task)
}

const handleMilestoneSaved = milestone => {
  console.log('Milestone saved:', milestone)
}
</script>

Example 4: External Component State Control (TimeScale, Fullscreen, Expand/Collapse, Locale, Theme)

Control component state through reactive Props binding. Component state will automatically follow Props changes.

<template>
  <div>
    <!-- External control panel -->
    <div class="control-panel">
      <button @click="propsFullscreen = !propsFullscreen">Toggle Fullscreen</button>
      <button @click="propsExpandAll = !propsExpandAll">Expand/Collapse All</button>
      <button @click="propsLocale = 'zh-CN'">中文</button>
      <button @click="propsLocale = 'en-US'">English</button>
      <button @click="propsTimeScale = 'day'">Day View</button>
      <button @click="propsTimeScale = 'week'">Week View</button>
      <button @click="propsTimeScale = 'month'">Month View</button>
      <button @click="propsTheme = 'light'">Light Theme</button>
      <button @click="propsTheme = 'dark'">Dark Theme</button>
    </div>

    <!-- Gantt chart component -->
    <div style="height: 600px;">
      <GanttChart
        :tasks="tasks"
        :milestones="milestones"
        :locale="propsLocale"
        :theme="propsTheme"
        :time-scale="propsTimeScale"
        :fullscreen="propsFullscreen"
        :expand-all="propsExpandAll"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { GanttChart } from 'jordium-gantt-vue3'
import 'jordium-gantt-vue3/index.css'

const tasks = ref([
  { id: 1, name: 'Task 1', startDate: '2025-01-01', endDate: '2025-01-10', progress: 50 },
  { id: 2, name: 'Task 2', startDate: '2025-01-05', endDate: '2025-01-15', progress: 30 },
])
const milestones = ref([])

// Props control variables
const propsLocale = ref<'zh-CN' | 'en-US'>('zh-CN')
const propsTheme = ref<'light' | 'dark'>('light')
const propsTimeScale = ref<'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year'>('week')
const propsFullscreen = ref(false)
const propsExpandAll = ref(false)
</script>

Task Management

Tasks are the core elements of the Gantt chart. The component provides complete CRUD operation support for tasks, including adding, editing, deleting tasks, and rich interactive events.

Task Data Structure

Field	Type	Required	Default	Description
id	number	✅	-	Unique task identifier
name	string	✅	-	Task name
startDate	string	-	-	Start date, format: 'YYYY-MM-DD' or 'YYYY-MM-DD HH:mm'
endDate	string	-	-	End date, format: 'YYYY-MM-DD' or 'YYYY-MM-DD HH:mm'
progress	number	-	0	Task progress, range 0-100
predecessor	number[]	-	-	Array of predecessor task IDs, standard format: [1, 2, 3]Compatible formats: Also supports string '1,2,3' or string array ['1', '2', '3'], component will auto-parse
assignee	string | string[]	-	-	Task assignee, used as the value binding for the assignee dropdown menu. Supports single assignee (string) or multiple assignees (string array)
assigneeName	string | string[]	-	-	Task assignee name, automatically obtained from the label in the bound assigneeOptions dataset; for custom display, you can set it in the task-added callback event of GanttChart. Supports single name (string) or multiple names (string array)
avatar	string | string[]	-	-	Avatar URL of task assignee. Supports single avatar (string) or multiple avatars (string array)
estimatedHours	number	-	-	Estimated hours
actualHours	number	-	-	Actual hours
parentId	number	-	-	Parent task ID, used for task grouping
children	Task[]	-	-	Array of child tasks
collapsed	boolean	-	false	Whether child tasks are collapsed
isParent	boolean	-	-	Whether this is a parent task
type	string	-	-	Task type, 'milestone' for milestone, 'milestone-group' for milestone group
description	string	-	-	Task description
icon	string	-	'diamond'	Task icon (for milestones), options: 'diamond', 'flag', 'star', 'rocket', etc.
level	number	-	0	Task level (auto-calculated)
isTimerRunning	boolean	-	false	Whether timer is running
timerStartTime	number	-	-	Timer start time (timestamp)
timerEndTime	number	-	-	Timer end time (timestamp)
timerStartDesc	string	-	-	Description filled when timer starts
timerElapsedTime	number	-	0	Elapsed time (milliseconds)
isEditable	boolean	-	true	Whether individual task is editable (draggable, resizable), overrides global allowDragAndResize
[key: string]	unknown	-	-	Supports custom property extensions, can add any additional fields

Custom Property Extensions: The Task interface supports adding arbitrary custom fields, such as: priority, tags, status, department, and other business-related fields.

Predecessor Field Notes:

• Standard format (recommended): predecessor: [1, 2, 3] - number array Compatible format 1: predecessor: '1,2,3' - comma-separated string
• Compatible format 2: predecessor: ['1', '2', '3'] - string array
• Component will automatically parse all formats into number array
• No predecessors: use empty array [], empty string '', or don't set this field

Task-Related Props

Prop	Type	Default	Description
tasks	Task[]	[]	Array of task data
useDefaultDrawer	boolean	true	Whether to use built-in task edit drawer (TaskDrawer)
taskBarConfig	TaskBarConfig	{}	Task bar style configuration, see TaskBarConfig Configuration
linkConfig	LinkConfig	undefined	Link line style configuration, see LinkConfig Configuration
taskListConfig	TaskListConfig	undefined	Task list configuration, see TaskListConfig Configuration
autoSortByStartDate	boolean	false	Whether to automatically sort tasks by start date
enableTaskRowMove	boolean	false	Whether to alloww dragging and dropping TaskRow
assigneeOptions	Array<{ key?: string | number; value: string | number; label: string; avatar?: string; type?: string  }>	[]	Assignee dropdown options in task edit drawer. type is an optional resource category (Human/Device/Others); selecting a resource auto-fills the category field on the bound resource row
taskListColumnRenderMode	'default' | 'declarative'	'default'	Task list column render mode. 'default': Use TaskListColumnConfig configuration (compatibility mode, will be gradually deprecated); 'declarative': Use TaskListColumn component for declarative column definition (recommended). See TaskListColumn Declarative Column Definition
taskListRowClassName	string | ((task: Task) => string)	undefined	Custom CSS class name for task rows. Can be a string or a function that returns a string. Note: Row height is managed internally by the component, custom height styles will not take effect
taskListRowStyle	CSSProperties | ((task: Task) => CSSProperties)	undefined	Custom inline styles for task rows. Can be a style object or a function that returns a style object. Note: Row height and width are managed internally by the component, custom width/height styles will not take effect

Configuration Notes:

• Default mode: useDefaultDrawer=true (default), double-click task to auto-open built-in TaskDrawer
• Custom editor: useDefaultDrawer=false disables built-in drawer, listen to @task-double-click event to open custom editor
• Read-only mode: useDefaultDrawer=false and don't listen to @task-double-click event, user double-click task has no response

Task Events

💡 Event-Driven Architecture: Component adopts pure event-driven design. All user operations (add, edit, delete, drag, etc.) will trigger corresponding events for easy external listening and handling.

Data Synchronization Notes:

• ✅ Component auto-updates internally: For all task CRUD operations, component will auto-update props.tasks data
• ✅ Events are for notification only: External event listeners are mainly for: showing messages, calling backend APIs, updating other related data, etc.
• ❌ Avoid duplicate operations: Don't modify tasks data again in event handlers, otherwise it will cause duplicate updates

Example 1: Basic Task Operations

<template>
  <div style="height: 600px;">
    <GanttChart
      :tasks="tasks"
      :assignee-options="assigneeOptions"
      @add-task="handleAddTask"
      @task-added="handleTaskAdded"
      @task-updated="handleTaskUpdated"
      @task-deleted="handleTaskDeleted"
      @task-click="handleTaskClick"
      @taskbar-drag-end="handleTaskDragEnd"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { GanttChart } from 'jordium-gantt-vue3'
import type { Task } from 'jordium-gantt-vue3'
import 'jordium-gantt-vue3/index.css'

const tasks = ref<Task[]>