### Install and run dependencies

Source: https://docs.dhtmlx.com/gantt/integrations/svelte/howtostart-svelte

Install project dependencies and start the development server using yarn or npm.

```bash
yarn install  
yarn dev  
```

```bash
npm install  
npm run dev  
```

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

### Install Dependencies with npm

Source: https://docs.dhtmlx.com/gantt/integrations/vue/howtostart-vue

Commands to install project dependencies and start the development server using npm.

```bash
npm install  
npm run dev  
```

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

### Install and run project dependencies

Source: https://docs.dhtmlx.com/gantt/integrations/react/js-gantt-react

Commands to install dependencies and start the development server using yarn or npm.

```bash
yarn install
yarn dev
```

```bash
npm install
npm run dev
```

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

### Install Dependencies with Yarn

Source: https://docs.dhtmlx.com/gantt/integrations/vue/howtostart-vue

Commands to install project dependencies and start the development server using Yarn.

```bash
yarn install  
yarn dev  
```

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

### Full configuration example

Source: https://docs.dhtmlx.com/gantt/guides/formatters-ext

Example demonstrating the full configuration object for the duration formatter.

```javascript
const formatter = gantt.ext.formatters.durationFormatter({  
    // default values  
    enter: "day",  
    store: "hour",
```

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

### Start the Export Module

Source: https://docs.dhtmlx.com/gantt/guides/pdf-export-module

Use this command to start the export module on a server with a graphical interface. After starting, you can access the test URL at http://localhost:3200/test.

```bash
npm start
```

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

### Install Dependencies

Source: https://docs.dhtmlx.com/gantt/integrations/react/state/valtio

Install Valtio and Material UI dependencies using npm or yarn.

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

```bash
yarn add valtio @mui/material @mui/icons-material @emotion/react @emotion/styled  
```

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

### Install Dependencies

Source: https://docs.dhtmlx.com/gantt/integrations/react/state/xstate

Install XState and Material UI dependencies.

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

```bash
yarn add xstate @xstate/react @mui/material @mui/icons-material @emotion/react @emotion/styled  
```

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

### Install Development Dependencies

Source: https://docs.dhtmlx.com/gantt/integrations/react/state/tanstack-query

Install tools for running the Express backend server with TypeScript.

```bash
npm install -D tsx nodemon @types/express @types/node  
```

```bash
yarn add -D tsx nodemon @types/express @types/node  
```

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

### Install Dependencies

Source: https://docs.dhtmlx.com/gantt/integrations/react/state/tanstack-query

Install required packages for state management, UI components, and backend server support.

```bash
npm install @tanstack/react-query zustand @mui/material @mui/icons-material @emotion/react @emotion/styled express cors  
```

```bash
yarn add @tanstack/react-query zustand @mui/material @mui/icons-material @emotion/react @emotion/styled express cors  
```

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

### Install DHTMLX Gantt (npm)

Source: https://docs.dhtmlx.com/gantt/integrations/vue/howtostart-vue

Install the DHTMLX Gantt trial version using npm.

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

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

### Install DHTMLX Gantt (yarn)

Source: https://docs.dhtmlx.com/gantt/integrations/vue/howtostart-vue

Install the DHTMLX Gantt trial version using yarn.

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

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

### Install Entity Framework

Source: https://docs.dhtmlx.com/gantt/integrations/dotnet/howtostart-dotnet

Command to install the Entity Framework package via the Package Manager Console.

```powershell
Install-Package EntityFramework  
```

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

### Install DHTMLX Gantt Package

Source: https://docs.dhtmlx.com/gantt/integrations/angular/howtostart-angular

Install the trial version of the Gantt library via npm or yarn.

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

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

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

### Install dhtmlx-gantt via npm

Source: https://docs.dhtmlx.com/gantt/guides/installation

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

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

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

### Install npm Dependencies

Source: https://docs.dhtmlx.com/gantt/integrations/react/state/zustand

Install the necessary npm packages for state management and UI components.

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

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

### Install DHTMLX.Gantt via NuGet

Source: https://docs.dhtmlx.com/gantt/guides/installation

Install the dhtmlxGantt package using the NuGet package manager command line.

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

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

### Install Node.js Modules

Source: https://docs.dhtmlx.com/gantt/guides/pdf-export-module

Run this command in the export module directory to install the necessary Node.js dependencies for the application.

```bash
npm install
```

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

### Custom Editor Example

Source: https://docs.dhtmlx.com/gantt/guides/custom-editor

An example demonstrating the creation of a custom editor with two input fields for description and holders.

```APIDOC
## Custom editor with two inputs

Let's consider how to create the following custom editor:

```javascript
gantt.form_blocks["my_editor"] = {
    render: function (sns) {
        return "<div className='dhx_cal_ltext' style='height:60px;'>"+
            "Text&nbsp;<input className='editor_description' type='text'/>"+
            "  
  
Holders&nbsp;<input className='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"}
];
```
```

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

### Sending a GET Request with Configuration Object

Source: https://docs.dhtmlx.com/gantt/api/other/ajax

Shows how to send a GET request using a configuration object, specifying URL, callback, and custom headers.

```javascript
gantt.ajax.get({
    url: "https://…",
    callback: function() {…},
    headers: { "Content-Type": "application/json" }
});
```

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

### project_start Configuration

Source: https://docs.dhtmlx.com/gantt/api/config/project_start

Defines the start date of a project, used as the default start date for new tasks when auto-scheduling is enabled.

```APIDOC
## project_start

### Description
Specifies the start date of a project. This functionality is available in the PRO edition only.

### Type
Date | undefined

### Usage
The value of this config can be used as the default start date of new tasks, when auto scheduling is enabled.

### Request Example
```javascript
gantt.config.project_start = new Date(2019, 2, 1);
```
```

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

### Start Development Server

Source: https://docs.dhtmlx.com/gantt/integrations/react/state/mobx

Launch the local development server.

```bash
npm run dev   
```

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

### Run database migrations and server

Source: https://docs.dhtmlx.com/gantt/integrations/php/howtostart-php-laravel

Navigate to the project directory, execute migrations, and start the development server.

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

```bash
php artisan serve
```

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

### Get start of month

Source: https://docs.dhtmlx.com/gantt/api/other/date

Returns the first day of the month with the time reset to 00:00:00.

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

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

### Navigate and Run Application

Source: https://docs.dhtmlx.com/gantt/integrations/angular/howtostart-angular

Commands to enter the project directory and start the development server.

```bash
cd my-angular-gantt-app  
```

```bash
yarn start  
```

```bash
npm start  
```

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

### Example Usage of render Function

Source: https://docs.dhtmlx.com/gantt/api/config/click_drag

An example demonstrating how to use the `render` function within the `click_drag` configuration to create a visual representation during dragging.

```APIDOC
## click_drag with Custom Render Function

### Description
This example shows how to customize the visual element rendered during drag operations using the `render` property of the `click_drag` configuration.

### Method
Configuration Object

### Endpoint
gantt.config.click_drag.render

### Parameters
- **render** (function) - A function that creates an element rendered during dragging. It takes two parameters:
    - **startPoint** (object) - Coordinates of the starting point: `{absolute: {left: number, top: number}, relative: {left: number, top: number}}`.
    - **endPoint** (object) - Coordinates of the ending point: `{absolute: {left: number, top: number}, relative: {left: number, top: number}}`.

### Request Example
```javascript
var node;
gantt.config.click_drag = {
    callback: onDragEnd, // Assume onDragEnd is defined elsewhere
    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;
    }
};
```

### Response
This configuration modifies the visual feedback during drag operations.
```

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

### Navigate and Start Development Server

Source: https://docs.dhtmlx.com/gantt/integrations/react/remix

Commands to enter the project directory and launch the local development server.

```bash
cd react-gantt-remix-quick-start
```

```bash
npm run dev
```

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

### Get ISO week number

Source: https://docs.dhtmlx.com/gantt/api/other/date

Returns the ISO-8601 week number where weeks start on Monday.

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

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

### Implement fiscal_year custom unit

Source: https://docs.dhtmlx.com/gantt/guides/configuring-time-scale

Example implementation of a fiscal year unit that starts on a specific date.

```javascript
const firstMonth = 1;  
const firstDay = 1;  
  
gantt.date.fiscal_year_start = date => {    
	let next = new Date(date);  
  
	if (next.getMonth() < firstMonth ||   
		(next.getMonth() === firstMonth && next.getDate() < firstDay)) {  
		next = gantt.date.add(next, -1, "year");  
	}  
  
	next = gantt.date.year_start(next);  
	next.setMonth(firstMonth);  
	next.setDate(firstDay);  
  
	return next;  
};  
  
gantt.date.add_fiscal_year = (date, inc) => gantt.date.add(date, inc, "year");
```

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

### Using a Callback Function

Source: https://docs.dhtmlx.com/gantt/guides/export-primavera

Example of using a callback function to get the URL of the generated XML file.

```APIDOC
## POST /api/gantt/export/primavera

### Description
Exports the Gantt chart to Primavera P6 format and provides a callback function to retrieve the download URL.

### Method
POST

### Endpoint
N/A (Client-side method)

### Parameters
#### Request Body
- **callback** (function) - Optional - A function that accepts a result object containing a `url` property.

### Request Example
```javascript
gantt.exportToPrimaveraP6({
    callback: function(res){
        alert(res.url);
    }
});
```

### Response
#### Success Response (200)
N/A (Client-side method, typically triggers a file download)

#### Response Example
N/A
```

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

### Create a React project

Source: https://docs.dhtmlx.com/gantt/integrations/react/js-gantt-react

Initialize a new React application using Vite.

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

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

### Get Lightbox Type

Source: https://docs.dhtmlx.com/gantt/api/method/getlightboxtype

Call this method to retrieve the name of the active lightbox structure. It returns a string, for example, 'task'.

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

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

### Get closest working time examples

Source: https://docs.dhtmlx.com/gantt/api/method/getclosestworktime

Demonstrates basic usage of getClosestWorkTime with date objects or configuration objects for global and task-specific settings.

```javascript
// checks whether the specified date is a working day in global settings  
gantt.getClosestWorkTime({date:new Date(2019,04,26)});  
// or  
gantt.getClosestWorkTime(new Date(2019,04,26));  
  
// checks whether the specified date is a working day for a specific task  
gantt.getClosestWorkTime({ date: new Date(2019,04,26), task:task });
```

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

### Initialize npm Project

Source: https://docs.dhtmlx.com/gantt/integrations/node/howtostart-nodejs

Initialize a new Node.js project with default settings using npm.

```bash
npm init -y  
```

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

### Remix SSR-Compatible Setup (v9.0.12+)

Source: https://docs.dhtmlx.com/gantt/integrations/react/overview

Starting from ReactGantt v9.0.12, no special wrapper is needed for Remix. The component is SSR-compatible out-of-the-box. Ensure the CSS is imported.

```javascript

import "@dhx/react-gantt/dist/react-gantt.css";
import ReactGantt from '@dhx/react-gantt';

export default function GanttPage() {
  return (
    <div style={{ height: '100vh' }}>
      <ReactGantt tasks={/* ... */} links={/* ... */} />
    </div>
  );
}
```

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

### Run Application

Source: https://docs.dhtmlx.com/gantt/guides/msp-export-module

Command to start the application from the GanttToMSProject directory.

```bash
dotnet run
```

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

### Run Development Server

Source: https://docs.dhtmlx.com/gantt/integrations/react/state/jotai

Commands to start the development server.

```bash
npm run dev  
```

```bash
yarn dev   
```

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

### Example XML Data for Gantt Chart

Source: https://docs.dhtmlx.com/gantt/api/template/xml_date

This JSON structure represents sample data for a dhtmlxGantt chart, including tasks with IDs, start dates, durations, and text.

```json
{
    "data":[
    {
        "id":1,
        "start_date":1503608400,
        "duration":10,
        "text":"Task #1",
        "parent":0,
    },
    {
        "id":2,
        "start_date":1503694800,
        "duration":4,
        "text":"Task #2",
        "parent":0,
    }],

    "links":[
    ]
}
```

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

### Initialize Firebase Project

Source: https://docs.dhtmlx.com/gantt/integrations/react/firebase-integration

Initializes Firebase in the project directory, guiding the user through setup steps like selecting Hosting and configuring Single Page App settings.

```bash
firebase init

```

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

### Navigate to Project Directory

Source: https://docs.dhtmlx.com/gantt/integrations/react/nextjs

Command to enter the newly created project folder.

```bash
cd react-gantt-nextjs-quick-start
```

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

### Get Visible Task Count

Source: https://docs.dhtmlx.com/gantt/api/method/getvisibletaskcount

Call this method to retrieve the count of tasks that are not collapsed and are currently displayed on the screen. No specific setup is required beyond initializing the Gantt chart.

```javascript
gantt.getVisibleTaskCount();
```

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

### Start Development Server

Source: https://docs.dhtmlx.com/gantt/integrations/react/nextjs

Command to run the Next.js development server.

```bash
npm run dev
```

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

### Get Link Count in dhtmlxGantt

Source: https://docs.dhtmlx.com/gantt/api/method/getlinkcount

Call this method to retrieve the total number of dependency links in the Gantt chart. No setup or imports are required if the Gantt chart is already initialized.

```javascript
const count = gantt.getLinkCount();
```

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

### Get Working Hours for a Date

Source: https://docs.dhtmlx.com/gantt/api/method/getworkhours

Call getWorkHours with a Date object to retrieve an array representing the working hours (start and end) for that day. Ensure work_time is enabled in the Gantt configuration.

```javascript
gantt.config.work_time = true;
gantt.init("gantt_here");

gantt.getWorkHours(new Date(2013,03,30))// -> [8, 17] /*!*/
```

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

### Run Development Server

Source: https://docs.dhtmlx.com/gantt/integrations/react/state/mobx

Commands to start the development server for testing the application. Use either npm or yarn.

```bash
npm run dev
```

```bash
yarn dev
```

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

### Custom xml_date Template for UNIX Timestamps

Source: https://docs.dhtmlx.com/gantt/api/template/xml_date

This example demonstrates how to redefine the xml_date template to handle UNIX timestamps for task start dates. It converts the timestamp to a JavaScript Date object by multiplying by 1000.

```javascript
gantt.attachEvent("onTemplatesReady", function(){
    gantt.templates.xml_date = function(dateString){
        return new Date(dateString * 1000);
    }
});

gantt.init("gantt_here");
gantt.load("/data");
```

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

### Start Express Backend

Source: https://docs.dhtmlx.com/gantt/integrations/react/state/tanstack-query

Commands to launch the backend server using npm or yarn.

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

```bash
yarn start:server
```

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

### Create Project Folder

Source: https://docs.dhtmlx.com/gantt/integrations/node/howtostart-nodejs

Use these commands to create a new project directory and navigate into it.

```bash
mkdir dhx-gantt-app  
cd dhx-gantt-app  
```

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

### Add and Get Shortcut Handler in dhtmlxGantt

Source: https://docs.dhtmlx.com/gantt/api/method/getshortcuthandler

This example demonstrates how to add a keyboard shortcut for a specific task action and then retrieve its handler. Ensure the keyboard_navigation extension is activated. The shortcut is defined for the 'taskRow' scope.

```javascript
gantt.addShortcut("shift+w", function(e){
    const task = gantt.locate(e);
    if(task)
        gantt.showQuickInfo(task)
},"taskRow");

gantt.getShortcutHandler("shift+w", "taskRow")
```

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

### Get Visible Range for Task Rows

Source: https://docs.dhtmlx.com/gantt/api/method/addtasklayer

Implement the `getVisibleRange` function in the `renderer` object to specify the start and end indexes of visible task rows, optimizing layer rendering for only those tasks within the range.

```javascript
gantt.addTaskLayer({
  renderer: {
    render: (task, timeline, viewport) => {
      // ...
      return /* HTMLElement */;
    },
    getVisibleRange: () => {
      // ...
      return {
        start: indexStart,
        end: indexEnd
      };
    }
  }
});
```

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

### Build the project for deployment

Source: https://docs.dhtmlx.com/gantt/integrations/react/firebase-integration

Run this command to generate the production-ready files in the build or dist folder.

```bash
npm run build
```

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

### Run the React Development Server

Source: https://docs.dhtmlx.com/gantt/integrations/react/quick-start

Start the development server to view your React Gantt application in the browser.

```bash
npm run dev  
```

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

### Prevent Illegal Link Creation

Source: https://docs.dhtmlx.com/gantt/api/event/onbeforelinkadd

This example demonstrates how to prevent the creation of 'finish-to-start' links where the source task's end date is on or after the target task's start date. It alerts the user and returns false to cancel the link.

```javascript
//excludes overtaking the target task by the source task
//in case of creating "finish_to_start" links
gantt.attachEvent("onBeforeLinkAdd", function(id, link){
    if (link.type == 0){
        var sourceTask = gantt.getTask(link.source);
        var targetTask = gantt.getTask(link.target);
        if (sourceTask.end_date >= targetTask.start_date){
            alert("This link is illegal")
            return false;
        }
    }
});

```

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

### Run Slim 3 Development Server

Source: https://docs.dhtmlx.com/gantt/integrations/php/howtostart-php

Navigate to your project directory and start the built-in PHP development server to test your application.

```bash
cd gantt-rest-php  
php -S 0.0.0.0:8080 -t public public/index.php  
```

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

### Default row styling with odd class

Source: https://docs.dhtmlx.com/gantt/api/template/grid_row_class

The grid and timeline areas have default CSS classes for rows. Every other row gets an 'odd' class. This example shows the default CSS rules for styling rows with and without the 'odd' class.

```css
.gantt_row.odd, .gantt_task_row.odd{
    background: silver;
}

.gantt_row, .gantt_task_row {
    background: white;
}
```

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

### Implement Custom Layer with Baseline Rendering

Source: https://docs.dhtmlx.com/gantt/api/method/addtasklayer

This example demonstrates a custom layer that renders a 'baseline' for tasks using planned start and end dates. It utilizes `gantt.getTaskPosition` to calculate element sizes and positions, and defines `getRectangle` to integrate with smart rendering.

```javascript
gantt.addTaskLayer({
  renderer: {
    render: (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.width = sizes.width + 'px';
        el.style.top = (sizes.top + gantt.config.task_height + 13) + 'px';
        return el;
      }
      return false;
    },
    // define getRectangle in order to hook layer with the smart rendering
    getRectangle: (task, view) =>
      gantt.getTaskPosition(
        task,
        task.planned_start,
        task.planned_end
      )
  }
});
```

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

### Initialize Angular Project

Source: https://docs.dhtmlx.com/gantt/integrations/angular/howtostart-angular

Create a new Angular application using the Angular CLI.

```bash
ng new my-angular-gantt-app  
```

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

### Calculate Project/Subtask Dates

Source: https://docs.dhtmlx.com/gantt/api/method/getsubtaskdates

Use this method to get the combined start and end dates for the entire project or a specific subtask. The task_id parameter is optional; if omitted, it defaults to the root project's ID. Ensure the task_date template is configured for proper date formatting.

```javascript
// duration of the whole project  
let dates = gantt.getSubtaskDates();  
const dateToStr = gantt.templates.task_date;  
      
console.log(`${dateToStr(dates.start_date)} - ${dateToStr(dates.end_date)}`);  
  
// duration of the subproject  
dates = gantt.getSubtaskDates(1);  
      
console.log(`${dateToStr(dates.start_date)} - ${dateToStr(dates.end_date)}`);  
```

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

### Complete Program.cs Configuration

Source: https://docs.dhtmlx.com/gantt/integrations/dotnet/howtostart-dotnet-core

Full implementation of the Program.cs file including service registration and middleware configuration.

```csharp
using Microsoft.EntityFrameworkCore;
using DHX.Gantt.Models;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

var connectionString = builder.Configuration.GetConnectionString("DefaultConnection");
builder.Services.AddDbContext<GanttContext>(
    options => options.UseSqlServer(connectionString));

builder.Services.AddControllers();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days.
    // You may want to change this for production scenarios, 
    // see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseDefaultFiles();

app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.MapControllers();

app.Run();
```

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

### Show Quick Info for Link on Click

Source: https://docs.dhtmlx.com/gantt/guides/quick-info

This example shows how to display a quick info popup when a link is clicked. It retrieves link details, calculates the position relative to the event, and populates the popup with link type and source/target task information.

```javascript
const quickInfo = gantt.ext.quickInfo;
gantt.attachEvent("onLinkClick", function(id,e){
    //any custom logic here  
    const link = gantt.getLink(id);
    const linksFormatter = gantt.ext.formatters.linkFormatter();

    const domHelpers = gantt.utils.dom;
    const position = domHelpers.getRelativeEventPosition(e, gantt.$task_data);

    const sourceTask = gantt.getTask(link.source);
    const targetTask = gantt.getTask(link.target);
    quickInfo.show(position.x, position.y);

    let linkDescr = "";

    if (link.type === gantt.config.links.start_to_start){
        linkDescr = "Start to start";
    } else if (link.type === gantt.config.links.start_to_finish){
        linkDescr = "Start to finish";
    } else if (link.type === gantt.config.links.finish_to_finish){
        linkDescr = "Finish to Finish";
    } else {
        linkDescr = "Finish to start";
    }

    quickInfo.setContent({
        header: {
            title: `${linkDescr} link`,
            date: ""
        },
        content: `Source: ${sourceTask.text}


                    Target: ${targetTask.text}`,
        buttons: []
    });
});
```

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

### Populate Resource Control from Server

Source: https://docs.dhtmlx.com/gantt/guides/resources

Configure the lightbox sections to fetch resource options from the server using `gantt.serverList`. Initialize Gantt and load data from the server.

```javascript
gantt.config.lightbox.sections = [
 {name: "description", height: 38, map_to: "text", type: "textarea", focus: true},
 {name: "resources", type: "resources", map_to: "owner_id", default_value:8,
     options: gantt.serverList("resourceOptions")},
 {name: "time", type: "duration", map_to: "auto"}
];

gantt.init("gantt_here");
gantt.load("/data");
```

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

### Start Rails server

Source: https://docs.dhtmlx.com/gantt/integrations/other/howtostart-ruby

Command to launch the local development server.

```bash
rails server  
```

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

### Install Firebase Dependency

Source: https://docs.dhtmlx.com/gantt/integrations/react/firebase-integration

Install the Firebase SDK for your React project.

```bash
npm install firebase  
```

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

### Set Project Start Date

Source: https://docs.dhtmlx.com/gantt/guides/auto-scheduling

Optionally set the project's start date using gantt.config.project_start. This date is used as the default start for tasks when forward planning is applied.

```javascript
gantt.config.project_start = new Date(2025, 2, 1);
```

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

### Create Salesforce Project Directory

Source: https://docs.dhtmlx.com/gantt/integrations/salesforce/howtostart-salesforce

Initializes a base directory for the Salesforce project.

```bash
$ mkdir ~/salesforce  
```

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

### Create Database Initialization Extension

Source: https://docs.dhtmlx.com/gantt/integrations/dotnet/howtostart-dotnet-core

Define an extension method to handle database creation and seeding on startup.

```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;
     }
   }
}
```

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

### Install Dependencies

Source: https://docs.dhtmlx.com/gantt/integrations/react/state/mobx

Install MobX and Material UI dependencies using npm or yarn.

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

```bash
yarn add mobx mobx-react-lite @mui/material @mui/icons-material @emotion/react @emotion/styled  
```

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

### Install Node.js Dependencies

Source: https://docs.dhtmlx.com/gantt/integrations/node/howtostart-nodejs

Install all the dependencies listed in the package.json file for your Node.js project.

```bash
npm install  
```

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

### Initialize a Laravel project

Source: https://docs.dhtmlx.com/gantt/integrations/php/howtostart-php-laravel

Create a new Laravel application using Composer.

```bash
composer create-project laravel/laravel gantt-laravel-app
```

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

### Set Project Start Date - DHTMLX Gantt

Source: https://docs.dhtmlx.com/gantt/api/config/project_start

Specify the default start date for the project. This value is used as the default start date for new tasks when auto-scheduling is enabled. Available in PRO edition only.

```javascript
gantt.config.project_start = new Date(2019, 2, 1);
```

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

### Calculate Task Start Date with dhtmlxGantt

Source: https://docs.dhtmlx.com/gantt/api/method/calculateenddate

You can calculate a task's start date by using the calculateEndDate method with a negative duration. This is useful when you know the end date and duration but need to find the start date.

```javascript
//calculate the start date:
task.start_date = gantt.calculateEndDate({
    start_date: task.end_date,
    duration: -task.duration
});
```

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

### Run Database Migration

Source: https://docs.dhtmlx.com/gantt/integrations/other/howtostart-ruby

Apply the migration to the database.

```bash
rake db:migrate  
```

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

### Configure start_on_monday

Source: https://docs.dhtmlx.com/gantt/api/config/start_on_monday

Sets the starting day of the week to Sunday by disabling the default Monday start.

```javascript
// weeks start from Sunday  
gantt.config.start_on_monday = false;  
gantt.init("gantt_here");
```

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

### Install yarn Dependencies

Source: https://docs.dhtmlx.com/gantt/integrations/react/state/zustand

Install the necessary yarn packages for state management and UI components.

```bash
yarn add zustand @mui/material @mui/icons-material @emotion/react @emotion/styled  
```

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

### Equivalent Initialization Methods

Source: https://docs.dhtmlx.com/gantt/api__gantt_init.html

Comparing the use of init parameters versus explicit configuration properties for setting date ranges.

```javascript
gantt.init("gantt_here", new Date(2023, 08, 10), new Date(2023, 08, 20));  
```

```javascript
gantt.config.start_date = new Date(2023, 08, 10);  
gantt.config.end_date = new Date(2023, 08, 20);  
gantt.init("gantt_here");  
```

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

### Install Form Data Dependency

Source: https://docs.dhtmlx.com/gantt/guides/export-nodejs

Install the required form-data component to enable import functionality.

```bash
npm install form-data  
```

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

### Navigate to project directory

Source: https://docs.dhtmlx.com/gantt/integrations/react/js-gantt-react

Change the current working directory to the newly created project folder.

```bash
cd my-react-gantt-app
```

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

### Create a new Rails project

Source: https://docs.dhtmlx.com/gantt/integrations/other/howtostart-ruby

Initializes a new Rails application configured for MySQL.

```bash
rails new gantt-app -d mysql  
```

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

### Time Interval Start Methods

Source: https://docs.dhtmlx.com/gantt/api/other/date

Methods to reset a date object to the start of a specific time interval.

```APIDOC
## Time Interval Start Methods

### Methods
- **minute_start(date)**: Resets seconds to 00.
- **hour_start(date)**: Resets minutes and seconds to 00.
- **week_start(date)**: Returns the first day of the week with time reset to 00:00:00.
- **quarter_start(date)**: Returns the first month of the quarter with time reset to 00:00:00.
- **year_start(date)**: Returns the first day of the year with time reset to 00:00:00.

### Parameters
- **date** (Date) - Required - The date object to process

### Response
- **Returns** (Date) - The formatted date object
```

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

### Configure lightbox with resource connection

Source: https://docs.dhtmlx.com/gantt/desktop__resource_management.html

Define a serverList and map it to a lightbox section to allow resource selection.

```javascript
gantt.serverList("people", [  
    { key: 1, label: "John" },  
    { key: 2, label: "Mike" },  
    { key: 3, label: "Anna" },  
    { key: 4, label: "Bill" },  
    { key: 7, label: "Floe" }  
]);  
  
gantt.locale.labels.section_owner = "Owner";  
  
gantt.config.lightbox.sections = [  
    { name: "description", height: 38, map_to: "text", type: "textarea", focus: true },  
    { name: "owner", map_to: "owner_id", type: "select",  
        options: gantt.serverList("people") },  
    { name: "time", type: "duration", map_to: "auto" }  
];
```