### HTTP GET Request Example

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/api/other/ajax.md

Demonstrates how to perform an HTTP GET request using gantt.ajax.get and handle the response with Promises.

```javascript
var xhr = gantt.ajax;

// HTTP GET
xhr.get("server.php").then(function(response) {
    var res = JSON.parse(response.responseText); 
    if (res && res.status == "ok") {
        // response is ok
    }
});
```

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

### Project Setup with Vite

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/react/state/tanstack-supabase.md

Initializes a new React TypeScript project using Vite and installs necessary dependencies for TanStack Query, Supabase, and UI components.

```bash
npm create vite@latest react-gantt-tanstack-supabase-demo -- --template react-ts
cd react-gantt-tanstack-supabase-demo
npm install @tanstack/react-query zustand @supabase/supabase-js \
  express cors dotenv \
  tailwindcss @tailwindcss/vite lucide-react \
  radix-ui class-variance-authority clsx tailwind-merge
npm install -D tsx nodemon @types/express @types/cors @types/node
npm install @dhtmlx/trial-react-gantt
```

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

### Install date-format-lite Package

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/node/howtostart-nodejs.md

Install the date-format-lite package for handling date formatting on the server.

```bash
npm install date-format-lite --save
```

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

### Start Rails Server

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/other/howtostart-ruby.md

Run this command to start the Rails development server.

```bash
rails server
```

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

### Orchestrate Gantt Behavior with Events and @ready

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/vue/customization-patterns.md

Use the `events` prop for interaction logic and the `@ready` event for one-time setup that requires the Gantt instance. This example shows how to intercept lightbox opening and display the current date.

```vue
<script setup lang="ts">
import { defineGanttEvents, type GanttStatic } from "@dhtmlx/trial-vue-gantt";

const events = defineGanttEvents({
  onBeforeLightbox: taskId => {
    console.log("Open custom editor route", taskId);
    return false;
  }
});

const onReady = (instance: GanttStatic) => {
  instance.showDate(new Date());
};
</script>

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

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

### Start Remix Development Server

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/react/remix.md

This command starts the development server for a Remix application. After running this, you can access the application in your browser.

```bash
npm run dev
```

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

### Install Gantt Evaluation Build (yarn)

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/angular/js-gantt-angular.md

Install the evaluation build of the DHTMLX Gantt library using yarn.

```bash
yarn add @dhx/trial-gantt
```

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

### Install Pinia

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/vue/state/pinia.md

Install Pinia using npm or yarn if it's not already present in your project.

```bash
npm install pinia
```

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

### Install DHTMLX.Gantt via NuGet

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/guides/installation.md

Install dhtmlxGantt using the NuGet package manager command line.

```bash
nuget install DHTMLX.Gantt
```

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

### Install Gantt Evaluation Build (npm)

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/angular/js-gantt-angular.md

Install the evaluation build of the DHTMLX Gantt library using npm.

```bash
npm install @dhx/trial-gantt
```

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

### Install React Gantt Trial Package

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/react/firebase-integration.md

Install the evaluation version of the React Gantt component using npm or yarn.

```bash
npm install @dhtmlx/trial-react-gantt
```

```bash
yarn add @dhtmlx/trial-react-gantt
```

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

### Install dhtmlx-gantt via npm

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/guides/installation.md

Use this command to install the Standard version of dhtmlxGantt from npmjs.com.

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

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

### Install gantt via Bower

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/guides/installation.md

Install dhtmlxGantt using the Bower package manager command line.

```bash
bower install gantt
```

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

### Start Express Backend Server

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/react/state/tanstack-query.md

Run this command in a terminal to start the Express backend server for the application.

```bash
npm run start:server
```

```bash
yarn start:server
```

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

### Install Yarn Dependencies

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/react/js-gantt-react.md

Install project dependencies using yarn.

```bash
yarn install
yarn dev
```

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

### Create Vue Project with Vite

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/vue/js-gantt-vue.md

Use npm or yarn to create a new Vue 3 project with Vite. Install dependencies and start the development server to verify the project setup.

```bash
npm create vue@latest gantt-vue-app
cd gantt-vue-app
npm install
npm run dev
```

```bash
yarn install
yarn dev
```

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

### Run the Application

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/guides/msp-export-module.md

Navigate to the "GanttToMSProject" folder and execute this command to run the application.

```bash
dotnet run
```

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

### Handling Gantt Events and Startup Logic

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/vue/overview.md

Shows how to handle Gantt events using the `events` map and perform one-time setup logic with the `@ready` hook. Useful for reacting to user interactions or initializing the Gantt instance.

```vue
<script setup lang="ts">
import { defineGanttEvents, type GanttStatic } from "@dhtmlx/trial-vue-gantt";

const events = defineGanttEvents({
  onTaskCreated: task => {
    console.log("task created", task);
    return true;
  },
  onBeforeLightbox: taskId => {
    console.log("before lightbox", taskId);
    return true;
  }
});

const onReady = (instance: GanttStatic) => {
  console.log("ready", instance);
};
</script>

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

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

### GET Request with Callback

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/api/other/ajax.md

Example of sending a GET request using the shorthand gantt.ajax.get method with a callback function.

```javascript
gantt.ajax.get("some.php", function(){
    // your code here
});
```

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

### Install Dependencies for Gantt Docs

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

Install the necessary dependencies for running the DHTMLX Gantt documentation locally using yarn.

```bash
$ yarn
```

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

### Initialize Django Project

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/other/howtostart-python.md

Use the django-admin command to create a new Django project. Navigate into the project directory afterwards.

```bash
django-admin startproject gantt_rest_python
cd gantt_rest_python
```

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

### Run Database Migrations and Serve Laravel App

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/php/howtostart-php-laravel.md

Navigate to the project directory, run database migrations to set up the database schema, and then start the development server.

```bash
cd gantt-laravel-app
php artisan migrate
php artisan serve
```

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

### Handshake GET Request Example

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/guides/multiuser-live-updates.md

When instantiated, RemoteEvents sends a GET request to the server to initialize the connection. The server validates the token.

```http
GET /api/v1
Remote-Token: AUTH_TOKEN
```

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

### Get Week Number (Configurable Start Day)

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/api/other/date.md

Returns the week number of a date. The start day of the week (Sunday or Monday) is determined by `gantt.config.start_on_monday`.

```javascript
gantt.config.start_on_monday = false;

var isoWeek = gantt.date.getISOWeek(new Date(2019, 2, 25)); // ->12
var week = gantt.date.getWeek(new Date(2019, 2, 25)); // ->13
```

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

### Run Gantt Documentation Locally

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

Start the DHTMLX Gantt documentation on a local server to explore it.

```bash
$ yarn start
```

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

### Start the Export Module

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/guides/pdf-export-module.md

Start the export module application. This command is used when running on a server with a graphical interface.

```bash
npm start
```

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

### Basic Vue Gantt Setup with Props

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/vue/overview.md

Demonstrates how to set up the Vue Gantt component using props for configuration and template customization. Includes defining tasks, links, scales, and task text templates.

```vue
<script setup lang="ts">
import { ref } from "vue";
import VueGantt,
  {
    defineGanttConfig,
    defineGanttTemplates,
    type SerializedLink,
    type SerializedTask
  }
from "@dhtmlx/trial-vue-gantt";
import "@dhtmlx/trial-vue-gantt/dist/vue-gantt.css";

const tasks = ref<SerializedTask[]>([
  {
    id: 1,
    text: "Project",
    start_date: new Date(2026, 0, 5),
    duration: 5,
    open: true,
    parent: 0
  }
]);
const links = ref<SerializedLink[]>([]);

const config = defineGanttConfig({
  scales: [
    { unit: "month", step: 1, format: "%F, %Y" },
    { unit: "day", step: 1, format: "%d %M" }
  ]
});

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

<template>
  <div style="height: 520px;">
    <VueGantt :tasks="tasks" :links="links" :config="config" :templates="templates" />
  </div>
</template>
```

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

### Get Hour Start of a Date

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/api/other/date.md

Resets both minutes and seconds components of a Date object to 00, setting the time to the start of the hour. Useful for aligning timestamps to the hour.

```javascript
// 29 June, 2019 14:30:10 -> 29 June, 2019 14:00:00
var date = gantt.date.hour_start(new Date(2019, 05, 29, 14, 30, 10));
```

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

### Get Minute Start of a Date

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/api/other/date.md

Resets the seconds component of a Date object to 00, effectively setting the time to the start of the minute. Useful for aligning timestamps to the minute.

```javascript
// 29 June, 2019 14:30:10 -> 29 June, 2019 14:30:00
var date = gantt.date.minute_start(new Date(2019, 05, 29, 14, 30, 10));
```

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

### Example Time Format Configurations

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/guides/time.md

Demonstrates various valid configurations for the time_format array, showing different orders and omissions of date/time selectors.

```javascript
// time goes first
time_format:["%H:%i", "%m", "%d", "%Y"] 
// month goes first
time_format:["%m","%d", "%Y", "%H:%i"]
// the year selector is removed
time_format:["%H:%i", "%m", "%d"]
```

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

### Install Professional Version with Yarn

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/react/installation.md

Install the professional (commercial) version of React Gantt using Yarn after configuring the private registry.

```bash
yarn add @dhx/react-gantt
```

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

### Initialize Node.js Project

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/node/howtostart-nodejs.md

Initializes a new Node.js project by creating a package.json file with default settings.

```bash
npm init -y
```

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

### Get Week Start of a Date

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/api/other/date.md

Calculates the date of the first day of the week for a given Date object and resets the time to midnight (00:00:00). Assumes the week starts on Monday.

```javascript
// 29 June, 2019 14:30 -> 24 June, 2019 00:00
var weekStart = gantt.date.week_start(new Date(2019, 05, 29, 14, 30));
```

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

### Get Lightbox Type

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/api/method/getlightboxtype.md

Call this method to get the name of the active lightbox structure. For example, it might return "task" if the task lightbox is currently open.

```javascript
gantt.getLightboxType(); -> "task"
```

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

### Get Month Start

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/api/other/date.md

Returns the first day of the month for a given date, with the time reset to 00:00:00.

```javascript
var firstDay = gantt.date.month_start(new Date(2019, 05, 29, 14, 30));
```

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

### Publish the Application

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/guides/msp-export-module.md

Use this command to publish the application for release, specifying the output directory.

```bash
dotnet publish -c Release -o published
```

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

### Get Day Start

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/api/other/date.md

Resets the time part of the provided date to 00:00:00. This method is an alias for `date_part`.

```javascript
var date = gantt.date.day_start(new Date(2019, 05, 29, 14, 30, 10));
```

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

### Open Salesforce Scratch Org

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/salesforce/howtostart-salesforce.md

Opens your Salesforce scratch org in a web browser. This is the first step to access Salesforce setup.

```bash
$ sfdx org open
```

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

### Get ISO Week Number

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/api/other/date.md

Returns the ISO-8601 week number for a given date. Weeks are considered to start on Monday.

```javascript
var week = gantt.date.getISOWeek(new Date(2019, 05, 29));
```

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

### Initialize and Seed Database

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/dotnet/howtostart-dotnet-core.md

Create an extension method to initialize the database by ensuring it's created and then seeding it with data. This is a simplified approach for tutorial purposes.

```csharp
namespace DHX.Gantt.Models
{
  public static class GanttInitializerExtension
  {
    public static IHost InitializeDatabase(this IHost webHost)
    {
      var serviceScopeFactory =
       (IServiceScopeFactory?)webHost.Services.GetService(typeof(IServiceScopeFactory));

      using (var scope = serviceScopeFactory!.CreateScope())
       {
          var services = scope.ServiceProvider;
          var dbContext = services.GetRequiredService<GanttContext>();
          dbContext.Database.EnsureDeleted();
          dbContext.Database.EnsureCreated();
          GanttSeeder.Seed(dbContext);
       }

       return webHost;
     }
   }
}
```

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

### Get Date Part (Day Start)

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/api/other/date.md

Resets the time portion of a Date object to midnight (00:00:00). This is an alias for `date_part`.

```javascript
var date = gantt.date.date_part(new Date(2019, 05, 29, 14, 30, 10));
```

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

### Running the Development Server

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/react/state/mobx.md

Commands to start the development server for the React application using either npm or yarn package managers.

```bash
npm run dev
```

```bash
yarn dev
```

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

### Get Baselines for a Task

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/api/method/gettaskbaselines.md

Call the getTaskBaselines method with a task ID to retrieve its associated baselines. This is a basic usage example.

```jsx
gantt.getTaskBaselines(5); // -> see details
```

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

### Create React Project and Navigate

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/react/quick-start.md

Use Vite to create a new React project with TypeScript and navigate into the project directory.

```bash
npm create vite@latest react-gantt-quick-start -- --template react-ts
cd react-gantt-quick-start
```

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

### Navigate to Export Module Directory

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/guides/pdf-export-module.md

Change the current directory to the location of the export module. This is a prerequisite for installing dependencies and starting the application.

```bash
cd C:export_module
```

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

### Running the Node.js Server

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/node/howtostart-nodejs.md

Execute this command in your project's root directory to start the Node.js server. This command is used to serve the HTML file and Gantt chart.

```bash
node server.js
```

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

### Get Year Start of a Date

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/api/other/date.md

Calculates the date of the first day of the year for a given Date object and resets the time to midnight (00:00:00).

```javascript
// 29 June, 2019 14:30 -> 01 January, 2019 00:00
var yearStart = gantt.date.year_start(new Date(2019, 05, 29, 14, 30));
```

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

### Get Quarter Start of a Date

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/api/other/date.md

Calculates the date of the first day of the quarter for a given Date object and resets the time to midnight (00:00:00).

```javascript
// 29 June, 2019 14:30:10 -> 01 April, 2019 00:00:00
var date = gantt.date.quarter_start(new Date(2019, 05, 29, 14, 30, 10));
```

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

### Get UTC ISO Week Number

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/api/other/date.md

Returns the ISO-8601 week number for a given date after converting it to UTC. Weeks start on Monday.

```javascript
var week = gantt.date.getUTCISOWeek(new Date(2019, 05, 29));
```

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

### Install Dependencies with npm

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/react/state/zustand.md

Install the necessary libraries including Zustand, Material UI components, and the DHTMLX trial React Gantt package using npm.

```bash
npm install zustand @mui/material @mui/icons-material @emotion/react @emotion/styled
npm install @dhtmlx/trial-react-gantt
```

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

### Initialize XState machine and Gantt reference

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/react/state/xstate.md

Sets up the component to use the XState machine and obtains a ref for the Gantt instance. Also sets the document title on mount.

```tsx
export default function DemoXState() {
  const [state, send] = useMachine(ganttMachine);
  const ganttRef = useRef<ReactGanttRef>(null);

  useEffect(() => {
    document.title = 'DHTMLX React Gantt | XState';
  }, []);
}
```

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

### Get Current Gantt Skin

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/api/other/skin.md

Retrieve the name of the active skin applied to the Gantt chart. The value will be a string representing the skin, for example, 'terrace'.

```javascript
var currentSkin = gantt.skin;// -> "terrace"
```

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

### Create Database Migrations and Apply

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/other/howtostart-python.md

Generate database migrations for the 'gantt' app using 'python manage.py makemigrations gantt'. Apply these migrations to create the necessary tables with 'python manage.py migrate'.

```bash
python manage.py makemigrations gantt
python manage.py migrate
```

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

### Initialize Firebase and Firestore

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/react/firebase-integration.md

Initialize Firebase and get references to Firestore collections and queries for tasks and links. This setup is crucial for real-time data synchronization.

```typescript
import { initializeApp } from "firebase/app";
import { getFirestore, collection, query } from "firebase/firestore";

const firebaseConfig = JSON.parse(import.meta.env.VITE_FIREBASE_CONFIGURATION);

initializeApp(firebaseConfig);
const db = getFirestore();
const tasksCollection = collection(db, "tasks");
const linksCollection = collection(db, "links");
const tasksQuery = query(tasksCollection);
const linksQuery = query(linksCollection);

export { db, tasksQuery, linksQuery, tasksCollection, linksCollection };
```

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

### Get Nearest Oncoming Task

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/guides/task-object-operations.md

Retrieves all oncoming tasks and sorts them by start date to find the nearest one. Ensure the gantt instance is initialized before use.

```javascript
var tasks = gantt.getTaskByTime(new Date(), new Date(9999,1,1));    
// tasks - the list of all oncoming tasks
tasks.sort(function(a,b){ return (a.start_date > b.start_date ? 1 : -1); });
// tasks[0] - the nearest oncoming event
```

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

### Initialize Gantt with Configuration

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/guides/multiple-gantts.md

Create a Gantt instance with a detailed configuration object, including plugins, container, custom settings, calendars, and initial data. This is useful for setting up complex Gantt charts with specific requirements from the start.

```javascript
const ganttInstance = Gantt.getGanttInstance({
    plugins: {
        auto_scheduling: true,
    },
    container: "gantt_here",
    config: {
        work_time: true,
        duration_unit: "minute",
        auto_scheduling_compatibility: true,
        auto_scheduling: true,
        auto_scheduling_strict: true,
        auto_scheduling_initial: true,
        start_date: new Date(2027, 0, 1),
        end_date: new Date(2028, 0, 1),
    },
    calendars: [
        {
            id: "global",
            worktime: {
                hours: ["8:00-17:00"],
                days: [0, 1, 1, 1, 1, 0, 0],
                customWeeks: {
                    lastMonthOfYear: {
                        from: new Date(2027, 11, 1),
                        to: new Date(2028, 0, 1),
                        hours: ["9:00-13:00"],
                        days: [0, 1, 1, 1, 1, 1, 0]
                    },
                    firstMonthOfNextYear: {
                        from: new Date(2028, 0, 1),
                        to: new Date(2028, 1, 1),
                        hours: ["14:00-16:00"],
                        days: [1, 1, 1, 1, 1, 0, 1]
                    }
                }
            }
        }
    ],
    data: {
        tasks: [
            { id: 11, text: "Project #1", type: "project", "open": true, "parent": 0 },
            { id: 1, text: "1", start_date: "2027-04-05", duration: 1, parent: "11" },
            { id: 2, text: "2", start_date: "2027-04-05", duration: 3, parent: "11" },
            { id: 3, text: "3", start_date: "2027-04-05", duration: 3, parent: "11" },
            { id: 4, text: "4", start_date: "2027-04-05", duration: 3, parent: "11" },
            { id: 5, text: "5", start_date: "2027-04-05", duration: 1, parent: "11" }
        ],
        links: [
            { source: "1", target: "2", type: "0", id: 1 },
            { source: "1", target: "3", type: "0", id: 2 },
            { source: "1", target: "4", type: "0", id: 3 },
            { source: "2", target: "4", type: "0", id: 4 },
            { source: "3", target: "4", type: "0", id: 5 },
            { source: "4", target: "5", type: "0", id: 6 }
        ]
    }
});
```

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

### Run Development Server

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/react/nextjs.md

Execute this command in your terminal to start the Next.js development server.

```bash
npm run dev

```

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

### Get Tasks within a Time Period

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/api/method/gettaskbytime.md

Retrieves tasks that occur between the specified start and end dates. If no dates are provided, it returns all tasks in the Gantt chart.

```jsx
let tasks = gantt.getTaskByTime(new Date(2013,3,10),new Date(2013,4,10)); 
for (let i=0; i<tasks.length; i++){
       alert(tasks[i].text);
}
// or
tasks = gantt.getTaskByTime();//returns all tasks
```

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

### Custom Editor with Two Inputs

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/guides/custom-editor.md

An example of a custom lightbox editor with two input fields for description and holders. Demonstrates setting and getting values for both fields.

```javascript
gantt.form_blocks["my_editor"] = {
    render: function (sns) {
        return "<div class='dhx_cal_ltext' style='height:60px;'>"+
            "Text&nbsp;<input class='editor_description' type='text'>"+
            "\n Holders&nbsp;<input class='editor_holders' type='text'>"+
            "</div>";
    },
    set_value: function (node, value, task) {
        node.querySelector(".editor_description").value = value || "";
        node.querySelector(".editor_holders").value = task.users || "";
    },
    get_value: function (node, task) {
        task.users = node.querySelector(".editor_holders").value;
        return node.querySelector(".editor_description").value;
    },
    focus: function (node) {
        var a = node.querySelector(".editor_description");
        a.select();
        a.focus();
    }
};
gantt.config.lightbox.sections = [
    { name:"description", height:200, map_to:"text", type:"my_editor", focus:true},
    { name:"time", height:72, type:"duration", map_to:"auto"}
];
```

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

### Parse Tasks for WBS Code Example

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/guides/specifying-columns.md

Load tasks into the Gantt chart to demonstrate WBS code generation. This setup is used to illustrate how getWBSCode works.

```javascript
gantt.parse({
    tasks: [
        { id: 1, text: "Project", start_date: "28-03-2025", duration: 5, open: true },
        { id: 2, text: "Task #1", start_date: "01-04-2025", duration: 3, parent: 1 },
        { id: 3, text: "Task #2", start_date: "02-04-2025", duration: 4, parent: 1 }
    ],
    links: []
});
```

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

### Create a Scratch Org

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/salesforce/howtostart-salesforce.md

Create a new Salesforce scratch org using the specified configuration file. This command provisions a temporary org for development.

```bash
$ sfdx org create scratch -f config/project-scratch-def.json -d

Creating Scratch Org...
RequestId: 2SR5j0000006JhCGAU 
(https://xbsoftware2-dev-ed.my.salesforce.com/2SR5j0000006JhCGAU)
OrgId: 00DH40000000s0D
Username: test-tc0telfqhudt@example.com
✓ Prepare Request
✓ Send Request
✓ Wait For Org
✓ Available
✓ Authenticate
✓ Deploy Settings
Done

Your scratch org is ready.
```

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

### Scenario 1: Task Duration 0 with Same Start and End Dates

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/guides/loading.md

When task duration is measured in whole days and data objects contain start and end dates without time, Gantt may interpret them as the same point in time, resulting in a duration of 0. This example demonstrates this behavior.

```javascript
gantt.parse({
    tasks: [
        { 
            id: 1,
            text: "Task 1",
            start_date: "22-12-2025",
            end_date: "22-12-2025"
        }
    ],
    links: []
});

console.log(gantt.getTask(1).end_date);
// 22 December 2025 00:00:00

console.log(gantt.getTask(1).duration);
// 0
```

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

### Backend Handshake and WebSocket Connection Implementation

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/guides/multiuser-live-updates.md

Example Node.js implementation for handling the initial handshake GET request and establishing WebSocket connections, including token verification.

```javascript
app.get('/api/v1', (req, res) => {
    const token = req.headers['remote-token'];
    if (!token || !verifyAuthHeader(token)) {
        return res.status(403).json({ error: 'Forbidden' });
    }
    res.json({ api: {}, data: {}, websocket: true });
});

wss.on('connection', (ws, req) => {
    const token = new URLSearchParams(req.url.split('?')[1]).get('token');
    if (!token || !verifyAuthToken(token)) {
        ws.close(1008, 'Unauthorized');
        return;
    }
    const connectionId = generateConnectionId();
    ws.send(JSON.stringify({ action: 'start', body: connectionId }));
});
```

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

### Initialize Gantt component and connect to Valtio store

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/react/state/valtio.md

Sets up the main Gantt component, uses Valtio's useSnapshot to react to state changes, and destructures tasks, links, config, and actions from the store.

```tsx
export default function DemoValtio() {
  const snap = useSnapshot(ganttState);
  const { tasks, links, config } = snap;
  const { addTask, updateTask, deleteTask, addLink, updateLink, deleteLink, undo, redo, setZoom } = actions;

  useEffect(() => {
    document.title = 'DHTMLX React Gantt | Valtio';
  }, []);
}
```

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

### index.html for dhtmlxGantt Setup

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/dotnet/howtostart-dotnet-core.md

This HTML file sets up the basic structure for the dhtmlxGantt chart, including CDN links for the Gantt CSS and JavaScript, and initializes the Gantt instance with data loading and data processor configuration.

```html
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css" rel="stylesheet" type="text/css" />
    <link href="css/site.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
        // specifying the date format
        gantt.config.date_format = '%Y-%m-%d %H:%i';
        // initializing gantt
        gantt.init('gantt_here');

        // initiating data loading
        gantt.load('/api/data');
        // creating and configuring dataProcessor
        const dp = gantt.createDataProcessor({
          url: '/api/',
          mode: 'REST',
        });
      });
    </script>
</head>
<body>
    <div id="gantt_here" style="width: 100vw; height: 100vh"></div>
</body>
</html>
```

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

### Get Date from Specific Positions

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/api/method/datefrompos.md

Demonstrates retrieving dates for specific pixel positions, including the start of the chart (0) and an intermediate position. Returns null if the date is not rendered.

```js
gantt.dateFromPos(0); // -> Sun Mar 31 2013 00:00:00
gantt.dateFromPos(74);  // -> Mon Apr 01 2013 01:22:17
```

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

### Understanding Width Calculation with Identical Dates

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/api/method/gettaskposition.md

This example illustrates that getTaskPosition considers the time component of dates, resulting in different width calculations even when only the time differs for the start and end dates.

```js
gantt.getTaskPosition(task, new Date(2019, 3, 19, 1, 0), new Date(2019, 3, 19, 1, 0)); 
// and
gantt.getTaskPosition(task, new Date(2019, 3, 19, 1, 0), new Date(2019, 3, 19, 5, 0));
```

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

### Get Task Position for Baseline Display

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/api/method/gettaskposition.md

This snippet demonstrates how to use getTaskPosition to calculate the dimensions for displaying a task's baseline. It requires the task object and optionally custom start and end dates.

```jsx
gantt.addTaskLayer(function draw_planned(task) {
    if (task.planned_start && task.planned_end) {
        const sizes = gantt.getTaskPosition(task, task.planned_start, task.planned_end); /*!*/
        const el = document.createElement('div');
        el.className = 'baseline';
        el.style.left = sizes.left + 'px';
        el.style.top = sizes.top + 'px';
        el.style.width = sizes.width + 'px';
        el.style.height= sizes.height + 'px';
        return el;
    }
    return false;
});
```

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

### Vue Gantt Work Time Calculation

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/vue/configuration-props.md

Utilize useWorkTime to get a computed wrapper for Gantt's work-time API, useful for template logic and constraint calculations. Example shows applying a 'weekend' class.

```typescript
import { useWorkTime, type VueGanttRef } from "@dhtmlx/trial-vue-gantt";

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

const templates = {
  scale_cell_class: (date: Date) =>
    workTime.value.isWorkTime({ date }) ? "" : "weekend"
};
```

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

### Propagate Parent Task Dragging to Children

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/api/method/roundtaskdates.md

This example shows how to update the start and end dates of child tasks when their parent task is dragged. It calculates the difference in dates and applies it to all children, then rounds their dates to the nearest scale.

```javascript
//dragging childs together with the parent
gantt.attachEvent("onTaskDrag", function(id, mode, task, original){
    var modes = gantt.config.drag_mode;
    if(mode == modes.move){
        var diff = task.start_date - original.start_date;

        gantt.eachTask(function(child){
            child.start_date = new Date(+child.start_date + diff);
            child.end_date = new Date(+child.end_date + diff);
            gantt.refreshTask(child.id, true);
        },id );
    }
    return true;
});
```

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

### Install Gantt Professional Build (npm)

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/angular/js-gantt-angular.md

Install the professional build of the DHTMLX Gantt library using npm. Requires access to a private npm registry.

```bash
npm install @dhx/gantt
```

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

### Attach onColumnResizeStart Event Listener

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/api/event/oncolumnresizestart.md

Attaches an event listener to the onColumnResizeStart event. This example logs a message indicating the start of a resize operation and returns true to allow the resize. Returning false would cancel the resize.

```jsx
// return false to discard the resize action
gantt.attachEvent("onColumnResizeStart", function(index, column){
    gantt.message("Start resizing " + gantt.locale.labels["column_"+column.name]);
    return true;
});
```

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

### Install XState and UI Dependencies (npm)

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/react/state/xstate.md

Install the necessary XState packages and Material UI components using npm. These are required for state management and UI elements.

```bash
npm install xstate @xstate/react @mui/material @mui/icons-material @emotion/react @emotion/styled
```

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

### Custom Render Function for Dragged Element

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/api/config/click_drag.md

Provides a custom `render` function to define the visual representation of an element during drag-and-drop. This example creates a temporary div to show the selected area, styling it based on the start and end points of the drag.

```js
var node;
gantt.config.click_drag = {
    callback: onDragEnd,
    singleRow: true,
    render: function(start, end){
        if(!(node && node.parentNode)){
            node = document.createElement("div");
        }
        var left = Math.min(start.relative.left, end.relative.left);

        node.style.top = (start.relative.top - gantt.config.row_height) + "px";
        node.style.left = left + "px";
        node.style.width = Math.abs(start.relative.left - end.relative.left) + "px";
        node.style.height = gantt.config.row_height + "px";
        node.style.position = "absolute";
        return node;
    }
};
```

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

### Create React App with Vite

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/react/js-gantt-react.md

Use this command to create a new React project with Vite.

```bash
npx create-vite my-react-gantt-app --template react
```

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

### Resource Assignment with Specific Dates and Durations

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/guides/resource-management.md

This example shows how to define resource assignments with specific start and end dates, or durations, overriding the default behavior where assignments span the entire task duration. It includes assignments with 'fixedDates' and 'fixedDuration' modes.

```javascript
{
    id: 5, text: "Interior office", type: "task", start_date: "03-04-2025 00:00",
    duration: 7, parent: "2", progress: 0.6, priority: 1,
    users: [
        {
            resource_id: "3",
            value: 8,
            delay: 1 
        },
        {
            resource_id: "6",
            value: 3,
            start_date: "03-04-2025 00:00", 
            end_date: "05-04-2025 00:00", 
            mode: "fixedDates" 
        },
        {
            resource_id: "7",
            value: 3,
            delay: 1, 
            duration: 2, 
            mode: "fixedDuration" 
        }
    ]
}
```

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

### Navigate to Project Directory

Source: https://github.com/dhtmlx/gantt-docs/blob/master/docs/integrations/svelte/howtostart-svelte.md

Change the current directory to your newly created Svelte project, named 'gantt-svelte' in this example.

```bash
cd gantt-svelte
```