Using DHTMLX Gantt Properties in VueGantt

This page documents the public Vue wrapper surface for @dhtmlx/trial-vue-gantt and @dhx/vue-gantt.

Use it as a reference after Overview or Quick Start.

Available Props

Prop	Type	Description
tasks	Task[]	Task collection rendered in the chart/grid.
links	Link[]	Dependency collection.
resources	any[] | null	Resource dataset for resource layouts and resource-related API methods.
resourceAssignments	any[] | null	Resource assignment dataset.
baselines	any[] | null	Baseline dataset.
markers	Marker[] | null	Vertical timeline markers.
calendars	(WrapperCalendar | CalendarConfig)[] | null	Working calendar definitions (wrapper format or native Gantt config).
data	VueGanttDataConfig | null	Data transport callbacks: load, save, batchSave.
config	Partial<GanttConfigOptions>	Merged into gantt.config.
plugins	GanttPlugins	Plugin activation map (for example auto_scheduling).
templates	Partial<GanttTemplates>	Merged into gantt.templates.
locale	string | Record<string, any>	Locale name or locale object.
theme	string	Skin name.
filter	((task: Task) => boolean) | null	Task filter predicate.
resourceFilter	((resource: any) => boolean) | null	Resource filter predicate.
modals	GanttModals | null	Overrides built-in delete confirmation dialogs.
groupTasks	any	Grouping config passed to gantt.groupBy.
inlineEditors	Record<string, Component>	Maps inline editor type names to Vue components.
customLightbox	Component | null	Custom Vue task editor component.
events	VueGanttEvents	Event-name to handler map.

Data Collections And Synchronization

Use these props when Vue state is your source of truth:

• tasks, links
• optional advanced datasets: resources, resourceAssignments, baselines

<VueGantt
  :tasks="tasks"
  :links="links"
  :resources="resources"
  :resourceAssignments="resourceAssignments"
  :baselines="baselines"
/>

Sync behavior summary:

• task/link updates are usually diff-based
• the wrapper can switch to reset/re-parse for large changes
• advanced datasets are re-parsed through their datastores

For model selection and callback strategy, see Data Binding and State Management Basics.

Config, Templates, Plugins, Theme, Locale

Use these props for day-to-day chart setup without imperative API calls.

<script setup lang="ts">
const config = {
  scales: [
    { unit: "year", step: 1, format: "%Y" },
    { unit: "month", step: 1, format: "%F" }
  ],
  columns: [
    { name: "text", tree: true, width: "*" },
    { name: "start_date", align: "center" },
    { name: "duration", align: "center" },
    { name: "add", width: 44 }
  ]
};

const templates = {
  task_text: (_start, _end, task) => `#${task.id}: ${task.text}`
};
</script>

<template>
  <VueGantt
    :config="config"
    :templates="templates"
    :plugins="{ auto_scheduling: true }"
    theme="terrace"
    locale="en"
  />
</template>

Events, Lifecycle, And Instance Access

events

Use one events map instead of wrapper-specific props for each Gantt event:

const events = {
  onTaskCreated: task => {
    console.log(task);
    return true;
  },
  onBeforeLightbox: id => {
    console.log(id);
    return true;
  }
};

@ready

ready(instance) fires once after initialization and the first sync:

<VueGantt :events="events" @ready="onReady" />

instance Via Component Ref

import { ref } from "vue";
import type { VueGanttRef } from "@dhtmlx/trial-vue-gantt";

const ganttRef = ref<VueGanttRef | null>(null);

function showToday() {
  ganttRef.value?.instance?.showDate(new Date());
}

Use this for advanced operations that are not practical through props.

Data Transport: load, save, batchSave

data prop shape:

interface VueGanttDataConfig {
  load?: string | ((gantt: GanttStatic) => DataSet | Promise<DataSet>);
  save?: string | RouterFunction;
  batchSave?: (changes: BatchChanges) => void;
}

load

• URL string -> gantt.load(url)
• Function -> returns a sync or async dataset

save

Per-change callback or router transport via dataProcessor.

batchSave

Grouped callback for high-volume updates:

• tasks
• links
• resources
• resourceAssignments

const data = {
  batchSave: changes => {
    if (changes.tasks?.length) {
      console.log("task changes", changes.tasks);
    }
  }
};

Use batchSave when one chart action can trigger many updates (for example auto-scheduling or bulk edits).

Customization Hooks

customLightbox

Replace the built-in task form UI with a Vue component.

inlineEditors

Map Gantt inline editor type names to Vue components.

templateWrapper

Wrap VNodes produced by the wrapper template bridge.

modals

Override delete confirmations and call callback() to confirm deletion.

const modals = {
  onBeforeTaskDelete: ({ task, callback }) => {
    if (window.confirm(`Delete task ${task.text}?`)) callback();
  }
};

For practical examples, see Customization Patterns.

Grouping, Filtering, Resources, Calendars, Markers

These props are often used together in advanced timeline views:

<VueGantt
  :groupTasks="groupConfig"
  :filter="taskFilter"
  :resourceFilter="resourceFilter"
  :calendars="calendars"
  :markers="markers"
  :resources="resources"
  :resourceAssignments="resourceAssignments"
/>

Common usage:

• groupTasks for grouped views
• filter and resourceFilter for focused slices
• calendars and markers for schedule rules and timeline highlighting

Exported Helpers And Composables

The package exports both a default VueGantt component export and named exports.

From @dhtmlx/trial-vue-gantt or @dhx/vue-gantt:

Type Exports

Export	Description
SerializedTask	User-facing task shape with Date | string dates. Use for store state, initial data, and batchSave payloads.
SerializedLink	User-facing link shape. Use alongside SerializedTask in store state and data definitions.

Use SerializedTask and SerializedLink for data you own (Pinia state, ref<>, API responses, initial literals). Use Task and Link for data gantt owns (inside event handlers, template callbacks, filter functions), where runtime task objects include internal $-prefixed properties.

Helper Factories

• defineGanttConfig(config) for typed config authoring
• defineGanttTemplates(templates) for typed template maps
• defineGanttEvents(events) for typed event map authoring
• defineInlineEditors(inlineEditors) for typed inline editor maps

Composables

• useWorkTime(ganttRef) for work-time checks and date calculations
• useResourceAssignments(ganttRef) for task-resource/assignment reads
• useGanttDatastore(ganttRef, storeName) for raw datastore access
• useGanttActions(ganttRef) for wrapper-safe imperative actions (undo/redo/export/render)
• useGanttEvent(ganttRef, eventName, handler) for lifecycle-safe attach/detach of a single event

import { ref } from "vue";
import { useGanttActions, type VueGanttRef } from "@dhtmlx/trial-vue-gantt";

const ganttRef = ref<VueGanttRef | null>(null);
const actions = useGanttActions(ganttRef);

function exportPdf() {
  actions.exportToPDF();
}

What To Read Next

• Vue Gantt Overview
• Customization Patterns
• Data Binding and State Management Basics
• Using Vue Gantt with Pinia