### Install Dependencies and Run Development Server

Source: https://github.com/dhtmlx/gantt/blob/master/CONTRIBUTING.md

Install project dependencies and start a development server with live reloading for samples. This is essential for local development and testing changes.

```bash
npm install
npm run start
```

--------------------------------

### Initialize DHTMLX Gantt with DataProcessor

Source: https://github.com/dhtmlx/gantt/blob/master/_autodocs/dataprocessor.md

This example shows the full setup for DHTMLX Gantt, including configuration, DataProcessor initialization with REST transaction mode, and event handling for updates.

```javascript
import { gantt, DataProcessor } from "dhtmlx-gantt";

async function initGantt() {
    gantt.config.date_format = "%Y-%m-%d";
    gantt.config.columns = [
        { name: "text", label: "Task", tree: true, width: 220 },
        { name: "start_date", label: "Start", width: 90 },
        { name: "duration", label: "Days", width: 60 }
    ];
    
    gantt.init("gantt_here");
    
    // Initialize DataProcessor
    const dp = new DataProcessor("/api");
    dp.init(gantt);
    dp.setTransactionMode("REST", true);
    dp.setUpdateMode("row");
    dp.setHeaders({ "Authorization": "Bearer " + token });
    
    // Monitor changes
    dp.attachEvent("onAfterUpdate", (action, sid, tid, response) => {
        if (action === "error") {
            showError("Failed to save: " + response.message);
        } else {
            console.log(action + " successful");
        }
    });
    
    // Load data
    await gantt.load("/api/tasks");
    gantt.render();
}
```

--------------------------------

### Start Development Server for DHTMLX Gantt

Source: https://github.com/dhtmlx/gantt/blob/master/AGENTS.md

Starts a development server with watch mode for building and a backend for samples. Use `npm run start` for local development.

```bash
npm run start
```

--------------------------------

### Install and Build DHTMLX Gantt

Source: https://github.com/dhtmlx/gantt/blob/master/AGENTS.md

Installs project dependencies and builds the library. Run `npm run build` after any source code changes.

```bash
npm install
npm run build
```

--------------------------------

### Install DHTMLX Gantt

Source: https://github.com/dhtmlx/gantt/blob/master/README.md

Install the dhtmlx-gantt package using npm.

```bash
npm install dhtmlx-gantt
```

--------------------------------

### Build and Run DHTMLX Gantt from Source

Source: https://github.com/dhtmlx/gantt/blob/master/README.md

Commands to clone the repository, install dependencies, build the project, and run development or testing servers.

```bash
git clone https://github.com/DHTMLX/gantt.git
cd gantt
npm install

npm run build     # builds codebase/dhtmlxgantt.js (+ es module, css, d.ts)
npm run start     # dev mode: watch build + samples server at http://localhost:5173
npm run test      # builds, then loads every sample and fails on console errors
npm run lint      # eslint over src/
```

--------------------------------

### Configuring Gantt Chart Columns

Source: https://github.com/dhtmlx/gantt/blob/master/_autodocs/types.md

Example of how to set up the columns for the dhtmlxGantt chart. This involves defining an array of column configuration objects.

```javascript
gantt.config.columns = [
    { name: "text",       label: "Task",     tree: true, width: 220 },
    { name: "start_date", label: "Start",    align: "center", width: 90 },
    { name: "duration",   label: "Days",     align: "center", width: 60 },
    { name: "progress",   label: "Complete", align: "center", width: 80 },
    { name: "add",        label: "",         width: 44 }
];
gantt.init("gantt_here");
```

--------------------------------

### Accessing the Default Singleton Gantt Instance

Source: https://github.com/dhtmlx/gantt/blob/master/_autodocs/factory-and-instances.md

Shows how to import and use the default singleton Gantt instance provided by the library. This is useful for simpler setups.

```javascript
import { gantt } from "dhtmlx-gantt";

// The singleton created by default
gantt.init("default_container");
```

--------------------------------

### Configure Custom Scale

Source: https://github.com/dhtmlx/gantt/blob/master/samples/03_scales/index.html

Create a custom scale for displaying specific time units, such as minutes. This example configures a scale with a minute unit and a specific format.

```javascript
gantt.config.scales = [
    {
        unit: "minute",
        step: 15,
        format: function (date) {
            return "Minute " + date.getMinutes();
        }
    }
];
```

--------------------------------

### Initialize Gantt and Parse Tasks

Source: https://github.com/dhtmlx/gantt/blob/master/samples/05_lightbox/15_readonly_lightbox.html

Initializes the DHTMLX Gantt chart on the 'gantt_here' element and parses the task data. This is a standard setup step.

```javascript
gantt.init("gantt_here");
gantt.parse(tasks);
```

--------------------------------

### Configure Gantt with Task Data and Links

Source: https://github.com/dhtmlx/gantt/blob/master/samples/05_lightbox/14_jquery_multiselect.html

Initializes the DHTMLX Gantt chart with sample task data and links. This setup is a prerequisite for applying custom lightbox configurations.

```javascript
gantt.init("gantt_here");
gantt.parse({
    data: [
        { id: 1, text: "Project #1", type: "project", start_date: "01-04-2022 00:00", duration: 30, progress: 0.6, parent: 0 },
        { id: 2, text: "Task #1.1", type: "task", start_date: "02-04-2022 00:00", duration: 13, owners: [], parent: 1 },
        { id: 3, text: "Task #1.2", type: "task", start_date: "03-04-2022 00:00", duration: 5, parent: "1", progress: 1, owners: ["7"] },
        { id: 4, text: "Task #1.3", type: "task", start_date: "03-04-2022 00:00", duration: 5, parent: "1" },
        { id: 5, text: "Task #1.4", type: "task", start_date: "03-04-2022 00:00", duration: 5, parent: "1" },
        { id: 6, text: "Task #1.5", type: "task", start_date: "03-04-2022 00:00", duration: 5, parent: "1" },
        { id: 7, text: "Task #1.6", type: "task", start_date: "03-04-2022 00:00", duration: 5, parent: "1" },
        { id: 8, text: "Task #1.7", type: "task", start_date: "03-04-2022 00:00", duration: 5, parent: "1" },
        { id: 9, text: "Task #1.8", type: "task", start_date: "03-04-2022 00:00", duration: 5, parent: "1" },
        { id: 10, text: "Task #1.9", type: "task", start_date: "03-04-2022 00:00", duration: 5, parent: "1" },
        { id: 11, text: "Project #2", type: "project", start_date: "02-04-2022 00:00", duration: 13, owners: [], parent: 0 },
        { id: 12, text: "Perform Initial testing", type: "task", start_date: "03-04-2022 00:00", duration: 5, parent: "11", progress: 1, owners: ["7"] },
        { id: 13, text: "Development", type: "project", start_date: "03-04-2022 00:00", duration: 11, parent: "11", progress: 0.5, owners: [] },
        { id: 14, text: "Analysis", type: "task", start_date: "03-04-2022 00:00", duration: 6, parent: "11", progress: 0.8, owners: [] },
        { id: 15, text: "Design", type: "project", start_date: "03-04-2022 00:00", duration: 5, parent: "11", progress: 0.2, owners: [] },
        { id: 16, text: "Documentation creation", type: "task", start_date: "03-04-2022 00:00", duration: 7, parent: "11", progress: 0, owners: ["7"], priority: 1 },
        { id: 17, text: "Develop System", type: "task", start_date: "03-04-2022 00:00", duration: 2, parent: "13", progress: 1, owners: ["8"], priority: 2 },
        { id: 25, text: "Beta Release", type: "milestone", start_date: "06-04-2022 00:00", parent: "13", progress: 0, owners: [], duration: 0 },
        { id: 18, text: "Integrate System", type: "task", start_date: "10-04-2022 00:00", duration: 2, parent: "13", progress: 0.8, owners: ["6"], priority: 3 },
        { id: 19, text: "Test", type: "task", start_date: "13-04-2022 00:00", duration: 4, parent: "13", progress: 0.2, owners: ["6"] },
        { id: 20, text: "Marketing", type: "task", start_date: "13-04-2022 00:00", duration: 4, parent: "13", progress: 0, owners: ["8"], priority: 1 },
        { id: 21, text: "Design database", type: "task", start_date: "03-04-2022 00:00", duration: 4, parent: "15", progress: 0.5, owners: ["6"] },
        { id: 22, text: "Software design", type: "task", start_date: "03-04-2022 00:00", duration: 4, parent: "15", progress: 0.1, owners: ["8"], priority: 1 },
        { id: 23, text: "Interface setup", type: "task", start_date: "03-04-2022 00:00", duration: 5, parent: "15", progress: 0, owners: ["8"], priority: 1 },
        { id: 24, text: "Release v1.0", type: "milestone", start_date: "20-04-2022 00:00", parent: "11", progress: 0, owners: [], duration: 0}
    ],
    links: [
        { id: "2", source: "2", target: "3", type: "0" },
        { id: "3", source: "3", target: "4", type: "0" },
        { id: "7", source: "8", target: "9", type: "0" },
        { id: "8", source: "9", target: "10", type: "0" },
        { id: "16", source: "17", target: "25", type: "0" },
        { id: "17", source: "18", target: "19", type: "0" },
        { id: "18", source: "19", target: "20", type: "0" },
        { id: "22", source: "13", target: "24", type: "0" },
        { id: "23", source: "25", target: "18", type: "0" }
    ]
});
```

--------------------------------

### dhtmlxGantt Client Initialization and DataProcessor Setup

Source: https://github.com/dhtmlx/gantt/blob/master/_autodocs/dataprocessor.md

Initializes dhtmlxGantt on the client-side, configures date format, enables DataProcessor for RESTful data synchronization, and loads initial task data.

```javascript
import { gantt, DataProcessor } from "dhtmlx-gantt";

// Set up
gantt.config.date_format = "%Y-%m-%d";
gantt.init("gantt_container");

// Enable DataProcessor
const dp = new DataProcessor("/api");
dp.init(gantt);
dp.setTransactionMode("REST", true);
dp.setUpdateMode("row", 5);

// Load initial data
gantt.load("/api/tasks?_with=links", "json");

// User edits are automatically synced...
gantt.attachEvent("onAfterTaskUpdate", (id, task) => {
    console.log("Task updated (will be sent):", task);
});
```

--------------------------------

### Configure Lightbox Sections

Source: https://github.com/dhtmlx/gantt/blob/master/samples/02_extensions/24_click_drag.html

Defines the sections available in the task lightbox, including description, priority, and time duration. This setup is necessary for the newly created tasks.

```javascript
gantt.config.lightbox.sections = [
  { name: "description", height: 38, map_to: "text", type: "textarea", focus: true },
  { name: "priority", height: 22, map_to: "priority", type: "select", options: [
    {key: 1, label: "High"},
    {key: 2, label: "Normal"},
    {key: 3, label: "Low"}
  ] },
  { name: "time", type: "duration", map_to: "auto" }
];
gantt.locale.labels.section_priority = "Priority";
```

--------------------------------

### Initialize Gantt Chart with Custom Buttons

Source: https://github.com/dhtmlx/gantt/blob/master/samples/07_grid/07_custom_buttons.html

Initialize the dhtmlxGantt chart and parse project data. This setup includes the custom column configuration with buttons.

```javascript
gantt.init("gantt_here"); gantt.parse(projects_with_milestones);
```

--------------------------------

### Initialize Gantt and Enable Backward Planning

Source: https://github.com/dhtmlx/gantt/blob/master/samples/01_initialization/18_backward_planning.html

Initializes the DHTMLX Gantt chart and configures it for backward planning. This setup is useful when tasks are defined by their completion date and duration.

```html
html, body { padding: 0px; margin: 0px; height: 100%; }

gantt.config.date_format = "%Y-%m-%d %H:%i:%s";
gantt.init("gantt_here");
gantt.message({ text: "Task schedules are calculated from <b>end dates</b> and <b>durations</b>", expire: -1 });
gantt.parse(taskData);
```

--------------------------------

### Add a Basic Finish-to-Start Link

Source: https://github.com/dhtmlx/gantt/blob/master/_autodocs/types.md

Use the `addLink` method to create a dependency where the target task starts after the source task finishes. The '0' type signifies a Finish-to-Start link.

```javascript
// Add link: Task 2 starts after Task 1 finishes
gantt.addLink({
    id: 1,
    source: 1,
    target: 2,
    type: "0"  // finish-to-start
});
```

--------------------------------

### Implement Custom Task Validation in Lightbox

Source: https://github.com/dhtmlx/gantt/blob/master/_autodocs/plugins-and-patterns.md

Add custom validation logic to the Gantt task lightbox before saving or opening. This example prevents saving tasks without a name and ensures the end date is after the start date.

```javascript
// Prevent invalid dates
gantt.attachEvent("onBeforeLightbox", function(id) {
    const task = gantt.getTask(id);
    return true;  // Allow open
});

gantt.attachEvent("onLightboxSave", function(id, task, is_new) {
    // Validate before save
    if (!task.text || task.text.trim() === "") {
        gantt.alert("Task name required");
        return false;  // Prevent save
    }
    
    if (task.start_date && task.end_date && task.end_date < task.start_date) {
        gantt.alert("End date must be after start date");
        return false;
    }
    
    return true;  // Allow save
});
```

--------------------------------

### Initialize Gantt Chart with Data

Source: https://github.com/dhtmlx/gantt/blob/master/samples/01_initialization/13_project_duration.html

Initialize the DHTMLX Gantt chart and parse sample project data. This includes tasks with defined start dates and durations, as well as parent-child relationships.

```javascript
gantt.config.scale_height = 50;
gantt.config.scales = [
    {unit: "month", format: "%F, %Y"},
    {unit: "day", step: 1, format: "%j, %D"}
];
gantt.init("gantt_here");
gantt.parse({
    data: [
        {id: 11, text: "Project #1", progress: 0.6, open: true},
        {id:12, text:"Task #1", start_date:"03-04-2023", duration:"5", parent:11, progress: 1, open: true},
        {id:13, text:"Task #2", parent:11, progress: 0.5, open: true},
        {id:14, text:"Task #3", start_date:"02-04-2023", duration:"6", parent:11, progress: 0.8, open: true},
        {id:15, text:"Task #4", parent:11, progress: 0.2, open: true},
        {id:16, text:"Task #5", start_date:"02-04-2023", duration:"7", parent:11, progress: 0, open: true},
        {id:17, text:"Task #2.1", start_date:"03-04-2023", duration:"2", parent:13, progress: 1, open: true},
        {id:18, text:"Task #2.2", start_date:"06-04-2023", duration:"3", parent:13, progress: 0.8, open: true},
        {id:19, text:"Task #2.3", start_date:"10-04-2023", duration:"4", parent:13, progress: 0.2, open: true},
        {id:20, text:"Task #2.4", start_date:"10-04-2023", duration:"4", parent:13, progress: 0, open: true},
        {id:21, text:"Task #4.1", start_date:"03-04-2023", duration:"4", parent:15, progress: 0.5, open: true},
        {id:22, text:"Task #4.2", start_date:"03-04-2023", duration:"4", parent:15, progress: 0.1, open: true},
        {id:23, text:"Task #4.3", start_date:"03-04-2023", duration:"5", parent:15, progress: 0, open: true}
    ],
    links:[
        {id:"10",source:"11",target:"12",type:"1"},
        {id:"11",source:"11",target:"13",type:"1"},
        {id:"12",source:"11",target:"14",type:"1"},
        {id:"13",source:"11",target:"15",type:"1"},
        {id:"14",source:"11",target:"16",type:"1"},
        {id:"15",source:"13",target:"17",type:"1"},
        {id:"16",source:"17",target:"18",type:"0"},
        {id:"17",source:"18",target:"19",type:"0"},
        {id:"18",source:"19",target:"20",type:"0"},
        {id:"19",source:"15",target:"21",type:"2"},
        {id:"20",source:"15",target:"22",type:"2"},
        {id:"21",source:"15",target:"23",type:"2"}
    ]
});
```

--------------------------------

### Configure Gantt Lightbox and Initialize

Source: https://github.com/dhtmlx/gantt/blob/master/samples/08_api/22_data_processor.html

Sets up the Gantt chart's lightbox sections and initializes the chart, loading data from local storage if available.

```javascript
gantt.config.lightbox.sections = [
  {name: "description", height: 38, map_to: "text", type: "textarea", focus: true},
  { name: "priority", height: 22, map_to: "priority", type: "select", options: [
    {key: 1, label: "High"},
    {key: 2, label: "Normal"},
    {key: 3, label: "Low"}
  ] },
  {name: "time", type: "duration", map_to: "auto"}
];
gantt.locale.labels.section_priority = "Priority";
gantt.config.date_format="%Y-%m-%d %H:%i";
gantt.message({ expire: -1, text: "Gantt stores tasks and links in the localStorage.<br> Create any task and reload the page." });
gantt.init("gantt_here");
var initialData = {
  data: localStorage["task"] ? JSON.parse(localStorage["task"]) : [],
  links: localStorage["link"] ? JSON.parse(localStorage["link"]) : []
}
gantt.parse(initialData);
```

--------------------------------

### Enable and Initialize DHTMLX Gantt with QuickInfo

Source: https://github.com/dhtmlx/gantt/blob/master/samples/02_extensions/01_quickinfo.html

Enables the QuickInfo extension and initializes the Gantt chart. Ensure the Gantt container and demo tasks are defined.

```javascript
html, body { height: 100%; padding: 0px; margin: 0px; overflow: hidden; }

gantt.plugins({ quick_info: true });
gantt.init("gantt_here");
gantt.parse(demo_tasks);
```

--------------------------------

### Customize Task Text for Fixed Dates

Source: https://github.com/dhtmlx/gantt/blob/master/samples/08_api/04_limit_project.html

Customizes the display of task text to indicate if a task must start or end by a specific date. This template is useful for tasks with fixed start or end dates.

```javascript
gantt.templates.task_text = function (start, end, task) {
  var text = [task.text];
  if (task.$no_end && !task.$no_start) {
    text.push("Must start on " + gantt.templates.task_date(start));
  } else if (task.$no_start && !task.$no_end) {
    text.push("Must end by " + gantt.templates.task_date(end));
  }
  return text.join(", ");
};
```

--------------------------------

### Gantt Instance with Initialization Configuration

Source: https://github.com/dhtmlx/gantt/blob/master/_autodocs/factory-and-instances.md

Demonstrates creating and initializing a Gantt instance directly by passing configuration settings, including the container, specific config options, and initial data, to the `getGanttInstance` method.

```javascript
import { Gantt } from "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";

const gantt1 = Gantt.getGanttInstance({
    container: "gantt_1",
    config: {
        date_format: "%Y-%m-%d",
        columns: [
            { name: "text", label: "Task", tree: true, width: 220 },
            { name: "start_date", label: "Start", width: 90 }
        ]
    },
    data: {
        data: [
            { id: 1, text: "Project A", type: "project" },
            { id: 2, text: "Task 1", parent: 1, duration: 5 }
        ],
        links: []
    }
});

// gantt1 is now initialized and data is loaded
```

--------------------------------

### onRowResize Events

Source: https://github.com/dhtmlx/gantt/blob/master/_autodocs/events.md

Events related to resizing row heights. Includes start, during, end, and after events.

```APIDOC
## onRowResizeStart

### Description
Fires when the user starts resizing a row's height.

### Method
attachEvent

### Parameters
- **eventName** (string) - "onRowResizeStart"
- **callback** (function) - Function to be called when the event fires.
  - **task** (Task) - The task object associated with the row being resized.

### Return Value
- (boolean) - Return `false` to prevent the resize operation.

### Example
```typescript
gantt.attachEvent("onRowResizeStart", function(task: Task): boolean {
    // Return false to prevent
});
```

## onRowResize

### Description
Fires while the user is resizing a row's height.

### Method
attachEvent

### Parameters
- **eventName** (string) - "onRowResize"
- **callback** (function) - Function to be called when the event fires.
  - **id** (string | number) - The ID of the task associated with the row being resized.
  - **task** (Task) - The task object associated with the row.
  - **currentHeight** (number) - The current height of the row during resize.

### Example
```typescript
gantt.attachEvent("onRowResize", function(id: string | number, task: Task, currentHeight: number): void {
    // During resize
});
```

## onRowResizeEnd

### Description
Fires when the user finishes resizing a row's height.

### Method
attachEvent

### Parameters
- **eventName** (string) - "onRowResizeEnd"
- **callback** (function) - Function to be called when the event fires.
  - **id** (string | number) - The ID of the task associated with the row that was resized.
  - **task** (Task) - The task object associated with the row.
  - **oldHeight** (number) - The height of the row before resizing.
  - **newHeight** (number) - The final height of the row after resizing.

### Return Value
- (boolean) - Return `false` to revert the resize operation.

### Example
```typescript
gantt.attachEvent("onRowResizeEnd", function(id: string | number, task: Task, oldHeight: number, newHeight: number): boolean {
    // Return false to revert
});
```

## onAfterRowResize

### Description
Fires after a row's height has been successfully resized.

### Method
attachEvent

### Parameters
- **eventName** (string) - "onAfterRowResize"
- **callback** (function) - Function to be called when the event fires.
  - **id** (string | number) - The ID of the task associated with the row that was resized.
  - **task** (Task) - The task object associated with the row.
  - **oldHeight** (number) - The height of the row before resizing.
  - **newHeight** (number) - The final height of the row after resizing.

### Example
```typescript
gantt.attachEvent("onAfterRowResize", function(id: string | number, task: Task, oldHeight: number, newHeight: number): void {
    // Resize complete
});
```
```

--------------------------------

### Initialize and Configure DHTMLX Gantt

Source: https://github.com/dhtmlx/gantt/blob/master/_autodocs/configuration.md

A comprehensive example demonstrating the initialization and configuration of DHTMLX Gantt. It covers setting up grid columns, timeline scales, date formats, task types, interaction behaviors, and initial rendering parameters.

```javascript
import { gantt } from "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";

// Grid columns
gantt.config.columns = [
    { name: "text", label: "Task", tree: true, width: 220 },
    { name: "start_date", label: "Start", width: 90, align: "center" },
    { name: "duration", label: "Days", width: 60, align: "center" },
    { name: "progress", label: "Progress", width: 100 }
];

// Timeline scales
gantt.config.scales = [
    { unit: "month", step: 1, format: "%M %Y" },
    { unit: "day", step: 1, format: "%d" }
];

// Date format
gantt.config.date_format = "%Y-%m-%d";
gantt.config.date_grid = "%Y-%m-%d";

// Task types
gantt.config.types.task = "task";
gantt.config.types.project = "project";
gantt.config.types.milestone = "milestone";

// Interaction
gantt.config.drag_move = true;
gantt.config.drag_resize = true;
gantt.config.drag_progress = true;
gantt.config.drag_links = true;
gantt.config.select_task = true;

// Initial rendering
gantt.config.start_date = new Date(2026, 5, 1);
gantt.config.end_date = new Date(2026, 8, 1);
gantt.config.fit_tasks = true;
gantt.config.show_grid = true;
gantt.config.show_chart = true;

// Initialize
gantt.init("gantt_here");
gantt.parse(data);
```

--------------------------------

### onColumnResize Events

Source: https://github.com/dhtmlx/gantt/blob/master/_autodocs/events.md

Events related to resizing grid columns. Includes start, during, and end events.

```APIDOC
## onColumnResizeStart

### Description
Fires when the user starts resizing a grid column.

### Method
attachEvent

### Parameters
- **eventName** (string) - "onColumnResizeStart"
- **callback** (function) - Function to be called when the event fires.
  - **index** (number) - The index of the column being resized.
  - **column** (GridColumn) - The column object being resized.

### Return Value
- (boolean) - Return `false` to prevent the resize operation.

### Example
```typescript
gantt.attachEvent("onColumnResizeStart", function(index: number, column: GridColumn): boolean {
    // Return false to prevent
});
```

## onColumnResize

### Description
Fires while the user is resizing a grid column.

### Method
attachEvent

### Parameters
- **eventName** (string) - "onColumnResize"
- **callback** (function) - Function to be called when the event fires.
  - **index** (number) - The index of the column being resized.
  - **column** (GridColumn) - The column object being resized.
  - **new_width** (number) - The current width of the column during resize.

### Example
```typescript
gantt.attachEvent("onColumnResize", function(index: number, column: GridColumn, new_width: number): void {
    // During resize
});
```

## onColumnResizeEnd

### Description
Fires when the user finishes resizing a grid column.

### Method
attachEvent

### Parameters
- **eventName** (string) - "onColumnResizeEnd"
- **callback** (function) - Function to be called when the event fires.
  - **index** (number) - The index of the column that was resized.
  - **column** (GridColumn) - The column object that was resized.
  - **new_width** (number) - The final width of the column after resizing.

### Return Value
- (boolean) - Return `false` to revert the resize operation.

### Example
```typescript
gantt.attachEvent("onColumnResizeEnd", function(index: number, column: GridColumn, new_width: number): boolean {
    // Return false to revert
});
```
```

--------------------------------

### Create and Use Gantt Instances

Source: https://github.com/dhtmlx/gantt/blob/master/_autodocs/factory-and-instances.md

Demonstrates creating a new Gantt instance using the factory and calling common methods on it. Each instance is independent.

```javascript
const gantt1 = Gantt.getGanttInstance();

// All of these work on gantt1:
gantt1.init(container);
gantt1.parse(data);
gantt1.getTask(id);
gantt1.addTask(task);
gantt1.updateTask(id, updates);
gantt1.deleteTask(id);
gantt1.addLink(link);
gantt1.attachEvent(event, handler);
gantt1.render();
gantt1.destructor();
// ... and 100+ more methods ...
```

--------------------------------

### onGridResize Events

Source: https://github.com/dhtmlx/gantt/blob/master/_autodocs/events.md

Events related to resizing the grid/timeline divider. Includes start, during, and end events.

```APIDOC
## onGridResizeStart

### Description
Fires when the user starts resizing the grid/timeline divider.

### Method
attachEvent

### Parameters
- **eventName** (string) - "onGridResizeStart"
- **callback** (function) - Function to be called when the event fires.
  - **old_width** (number) - The previous width of the grid.

### Return Value
- (boolean) - Return `false` to prevent the resize operation.

### Example
```typescript
gantt.attachEvent("onGridResizeStart", function(old_width: number): boolean {
    // Return false to prevent
});
```

## onGridResize

### Description
Fires while the user is resizing the grid/timeline divider.

### Method
attachEvent

### Parameters
- **eventName** (string) - "onGridResize"
- **callback** (function) - Function to be called when the event fires.
  - **old_width** (number) - The previous width of the grid.
  - **new_width** (number) - The current width of the grid during resize.

### Example
```typescript
gantt.attachEvent("onGridResize", function(old_width: number, new_width: number): void {
    // During resize
});
```

## onGridResizeEnd

### Description
Fires when the user finishes resizing the grid/timeline divider.

### Method
attachEvent

### Parameters
- **eventName** (string) - "onGridResizeEnd"
- **callback** (function) - Function to be called when the event fires.
  - **old_width** (number) - The width of the grid before resizing.
  - **new_width** (number) - The final width of the grid after resizing.

### Return Value
- (boolean) - Return `false` to revert the resize operation.

### Example
```typescript
gantt.attachEvent("onGridResizeEnd", function(old_width: number, new_width: number): boolean {
    // Return false to revert
});
```
```

--------------------------------

### calculateEndDate()

Source: https://github.com/dhtmlx/gantt/blob/master/_autodocs/api-advanced.md

Calculates the end date of a task based on its start date and duration, respecting calendars.

```APIDOC
## calculateEndDate()

### Description
Calculates end date from start date and duration.

### Method Signature
```typescript
gantt.calculateEndDate(config: {
    start_date: Date,
    duration: number,
    task?: Task
}): Date
```

### Parameters
#### Request Body
- **start_date** (Date) - Required - Start date
- **duration** (number) - Required - Duration in configured units
- **task** (Task) - Optional - Used to get assigned calendar

### Returns
- **Date** - Calculated end date

### Example
```javascript
const endDate = gantt.calculateEndDate({
    start_date: new Date(2026, 5, 1),
    duration: 5
});
console.log("Task ends on:", endDate);
```
```

--------------------------------

### Configure Lightbox Sections and Initialize Gantt

Source: https://github.com/dhtmlx/gantt/blob/master/samples/01_initialization/16_projects_and_milestones.html

Sets up the default lightbox sections including description, type, and duration, then initializes the Gantt chart.

```javascript
gantt.config.lightbox.sections = [
  {name: "description", height: 70, map_to: "text", type: "textarea", focus: true},
  {name: "type", type: "typeselect", map_to: "type"},
  {name: "time", type: "duration", map_to: "auto"}
];
gantt.init("gantt_here");
gantt.parse(projects_with_milestones);
```

--------------------------------

### Initialization Methods

Source: https://github.com/dhtmlx/gantt/blob/master/_autodocs/README.md

Methods for initializing, rendering, and managing the Gantt chart instance.

```APIDOC
## Initialization Methods

### `gantt.init(container, from?, to?)

Initializes the Gantt chart in the specified container.

### `gantt.render()

Renders the Gantt chart.

### `gantt.resetLayout()

Resets the layout of the Gantt chart.

### `gantt.destructor()

Destroys the Gantt chart instance and cleans up resources.
```

--------------------------------

### Internationalization Functions

Source: https://github.com/dhtmlx/gantt/blob/master/_autodocs/api-advanced.md

Manage language settings for the Gantt chart, including setting, getting, and adding locales.

```APIDOC
## setLocale() / getLocale() / addLocale()

### Description
Functions to manage the internationalization settings of the Gantt chart.

### Methods
- `setLocale(language: string): void` - Sets the current locale.
- `getLocale(language: string): GanttLocale` - Retrieves a specific locale.
- `addLocale(language: string, locale: GanttLocale): void` - Adds a custom locale.

### Example
```javascript
gantt.i18n.setLocale("de");  // German

gantt.i18n.addLocale("custom", { date: { month_full: [...], day_full: [...], ... }, labels: { new_task: "Neue Aufgabe", ... } });

gantt.i18n.setLocale("custom");
```
```

--------------------------------

### Complex Gantt Initialization Example

Source: https://github.com/dhtmlx/gantt/blob/master/_autodocs/factory-and-instances.md

Demonstrates how to initialize a dhtmlxGantt instance with a comprehensive set of configuration options. This includes specifying the rendering container, overriding default configurations and templates, attaching event handlers, providing initial data, enabling plugins, and setting up custom calendars.

```javascript
const gantt1 = Gantt.getGanttInstance({
    container: "gantt_container",
    
    config: {
        date_format: "%Y-%m-%d",
        row_height: 40,
        drag_move: true,
        drag_resize: true,
        show_grid: true,
        show_chart: true,
        columns: [
            { name: "text", label: "Task", tree: true, width: 220 },
            { name: "start_date", label: "Start", width: 90 },
            { name: "duration", label: "Days", width: 60 },
            { name: "add", label: "", width: 44 }
        ]
    },
    
    templates: {
        task_text: function(start, end, task) {
            return task.text + " (" + Math.round(task.progress * 100) + "%)";
        },
        scale_cell_class: function(date) {
            if (date.getDay() === 0 || date.getDay() === 6) return "weekend";
        }
    },
    
    events: {
        onAfterTaskUpdate: function(id, task) {
            console.log("Task updated:", task);
        },
        onAfterTaskAdd: function(id, task) {
            console.log("Task added:", task);
        }
    },
    
    data: {
        data: [
            { id: 1, text: "Project", type: "project", open: true },
            { id: 2, text: "Task 1", parent: 1, start_date: "2026-06-01", duration: 5 }
        ],
        links: []
    },
    
    plugins: {
        tooltip: true,
        quick_info: true,
        keyboard_navigation: true
    }
});

// gantt1 is ready to use
```

--------------------------------

### Retrieve a Grid Column Definition

Source: https://github.com/dhtmlx/gantt/blob/master/_autodocs/api-advanced.md

Use getGridColumn to get the configuration object for a specific grid column by its name.

```typescript
gantt.getGridColumn(name: string): GridColumn | undefined
```

```javascript
const textCol = gantt.getGridColumn("text");
console.log("Text column width:", textCol.width);
```

--------------------------------

### Initialize Full Screen Plugin

Source: https://github.com/dhtmlx/gantt/blob/master/samples/02_extensions/11_full_screen.html

Enable the fullscreen plugin for the Gantt chart.

```javascript
gantt.plugins({ fullscreen: true });
```

--------------------------------

### Initialize DHTMLX Gantt Chart

Source: https://github.com/dhtmlx/gantt/blob/master/samples/02_extensions/index.html

Basic initialization of the DHTMLX Gantt chart. This is the starting point for most Gantt chart implementations.

```javascript
document.addEventListener("DOMContentLoaded", function (event) {
    loadSampleFromParams()
});
```

--------------------------------

### Import Default Gantt Singleton

Source: https://github.com/dhtmlx/gantt/blob/master/_autodocs/README.md

Shows the standard way to import and initialize the dhtmlxGantt singleton instance. Ensure the CSS is also imported for proper styling.

```javascript
import { gantt } from "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";

gantt.init("container");
```

--------------------------------

### Prevent Self-Linking

Source: https://github.com/dhtmlx/gantt/blob/master/_autodocs/events.md

This example demonstrates how to use onBeforeLinkAdd to prevent a task from being linked to itself, providing user feedback via an alert.

```javascript
gantt.attachEvent("onBeforeLinkAdd", function(id, link) {
    if (link.source === link.target) {
        gantt.alert("Cannot link task to itself");
        return false;
    }
    return true;
});
```

--------------------------------

### Configuring Grid Columns

Source: https://github.com/dhtmlx/gantt/blob/master/samples/01_initialization/17_bootstrap.html

Defines the columns for the Gantt grid, including task name, start date, duration, and an add column.

```javascript
gantt.config.columns = [
    {name: "text", label: "Task name", resize: true, width: "*", tree: true},
    {name: "start_date", label: "Start time", resize: true, align: "center", width: 80},
    {name: "duration", label: "Duration", resize: true, align: "center", width: 60},
    {name: "add", label: "", width: 44}
];
```

--------------------------------

### Add Task to Gantt Chart

Source: https://github.com/dhtmlx/gantt/blob/master/_autodocs/types.md

Example demonstrating how to create a task object and add it to the Gantt chart using the `addTask` method.

```javascript
const task = {
    id: 1,
    text: "Project Setup",
    type: "project",
    start_date: new Date(2026, 5, 1),
    duration: 5,
    parent: 0,
    progress: 0.3,
    open: true
};

gantt.addTask(task);
```

--------------------------------

### Column Resize Events

Source: https://github.com/dhtmlx/gantt/blob/master/_autodocs/events.md

Fires when grid columns are being resized. Includes start, during, and end events. Returning false can prevent or revert the resize.

```typescript
gantt.attachEvent("onColumnResizeStart", function(index: number, column: GridColumn): boolean {
    // Return false to prevent
});
```

```typescript
gantt.attachEvent("onColumnResize", function(index: number, column: GridColumn, new_width: number): void {
    // During resize
});
```

```typescript
gantt.attachEvent("onColumnResizeEnd", function(index: number, column: GridColumn, new_width: number): boolean {
    // Return false to revert
});
```

--------------------------------

### Gantt Initialization with RTL Configuration

Source: https://github.com/dhtmlx/gantt/blob/master/samples/10_layout/04_rtl.html

This snippet shows the complete initialization of the dhtmlxGantt chart, including RTL configuration, scale settings, layout definition, and data parsing. Ensure the target element 'gantt_here' exists in your HTML.

```javascript
gantt.config.rtl = true;
gantt.config.scale_height = 50;
gantt.config.scales = [
    {unit: "month", step: 1, date: "%F, %Y"},
    {unit: "day", step: 1, date: "%j, %D"}
];
gantt.templates.progress_text = function (start, end, task) {
    return "<span style='text-align:right;'>" + Math.round(task.progress * 100) + "% </span>";
};
gantt.templates.rightside_text = function (start, end, task) {
    if (task.type == gantt.config.types.milestone) {
        return task.text;
    }
    return "";
};
gantt.config.lightbox.sections = [
    {name: "description", height: 70, map_to: "text", type: "textarea", focus: true},
    {name: "type", type: "typeselect", map_to: "type"},
    {name: "time", type: "duration", map_to: "auto"}
];
gantt.config.layout = {
    css: "gantt_container",
    rows: [
        { cols: [
            {view: "scrollbar", id: "scrollVer"},
            {view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
            {resizer: true, width: 1},
            {view: "grid", scrollX: "scrollHor", scrollY: "scrollVer"}
        ] },
        {view: "scrollbar", id: "scrollHor", height: 20}
    ]
};
gantt.init("gantt_here");
gantt.parse(projects_with_milestones);
```

--------------------------------

### Basic Lightbox Initialization and Task Display

Source: https://github.com/dhtmlx/gantt/blob/master/samples/06_skins/02_default_lightbox.html

Initializes the Gantt chart, parses task data, and shows the lightbox for a specific task. Ensure the Gantt container and basic CSS are set up.

```html
html, body {
  height: 100%;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
}
```

```javascript
gantt.config.wide_form = 1;
gantt.templates.task_class = function (st, end, item) {
  return item.$level == 0 ? "gantt_project" : ""
};
gantt.init("gantt_here");
gantt.parse(demo_tasks);
gantt.showLightbox(1);
```

--------------------------------

### Data Manipulation - getSubtaskDates

Source: https://github.com/dhtmlx/gantt/blob/master/_autodocs/api-advanced.md

Calculates and returns the start and end dates for a task based on the dates of all its subtasks. If no taskId is provided, it calculates for all tasks.

```APIDOC
### getSubtaskDates()

Calculates start and end dates based on all subtasks.

```typescript
gantt.getSubtaskDates(taskId?: string | number): { start_date: Date, end_date: Date }
```

| Parameter | Type | Description |
|-----------|------|-------------|
| taskId | string \| number | Optional task ID. If omitted, uses all tasks |

**Returns:** Object with `start_date` and `end_date` properties

**Example:**

```javascript
const dates = gantt.getSubtaskDates(1);
console.log("Project spans from", dates.start_date, "to", dates.end_date);
```
```

--------------------------------

### LinkType Enumeration

Source: https://github.com/dhtmlx/gantt/blob/master/_autodocs/types.md

Defines the enumeration of four dependency link types used in dhtmlxGantt, specifying the relationship between the start and end of dependent tasks.

```APIDOC
## LinkType

Enumeration of four dependency link types.

### Type Definition
```typescript
type LinkType = "0" | "1" | "2" | "3";
```

### Values

| Value | Name | Description |
|-------|------|-------------|
| "0" | Finish-to-Start (FS) | Most common; target starts after source ends |
| "1" | Start-to-Start (SS) | Parallel tasks; target starts with source |
| "2" | Finish-to-Finish (FF) | Target finishes concurrently with source |
| "3" | Start-to-Finish (SF) | Rare; target finishes when source starts |
```