### Install npm Dependencies

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/javascript-npm

Installs the project's dependencies using npm. This command should be run after creating the application and navigating into the project directory.

```shell
cd my-gantt-app
npm install
```

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

### Install Bryntum Gantt Trial Version

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/javascript-npm

Installs the trial version of the Bryntum Gantt component from the npm registry. This command adds the Gantt component to your project's dependencies, allowing you to evaluate its features.

```shell
npm install @bryntum/gantt@npm:@bryntum/gantt-trial@6.3.3
```

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

### Install Bryntum Gantt Trial and React Component

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/react-remix

Installs the trial version of Bryntum Gantt and its React integration package. This is used for evaluating the component before purchasing a license. Requires prior access to the Bryntum private npm registry.

```shell
npm install @bryntum/gantt@npm:@bryntum/gantt-trial @bryntum/gantt-react
```

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

### Create Remix Application

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/react-remix

Command to create a new Remix application. It prompts for project name, git initialization, and dependency installation method. After execution, it creates the project directory and installs initial dependencies.

```shell
npx create-remix@latest
```

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

### Run Bryntum Gantt Application (Shell)

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/javascript-npm

Command to run the Bryntum Gantt application. This is typically executed in the project's root directory to start the development server and make the application accessible.

```shell
npm run dev
```

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

### Run Local Angular Demos

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/integration/angular/guide

Installs dependencies and starts a local development server for Bryntum Gantt Angular demos. Changes made to the example code are automatically reflected in the browser.

```shell
npm install
npm run start
```

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

### Install Bryntum Gantt Licensed Version

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/javascript-npm

Installs the licensed version of the Bryntum Gantt component from the npm registry. This command adds the Gantt component to your project's dependencies, requiring a valid license for use.

```shell
npm install @bryntum/gantt@6.3.3
```

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

### Install Bryntum Gantt (Trial and Licensed)

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/angular

Installs the Bryntum Gantt component and its Angular integration package. Two versions are provided: one for the trial version and one for the licensed version. Ensure correct version numbers are used.

```shell
npm install @bryntum/gantt@npm:@bryntum/gantt-trial@6.3.3 @bryntum/gantt-angular@6.3.3
```

```shell
npm install @bryntum/gantt@6.3.3 @bryntum/gantt-angular@6.3.3
```

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

### Install Remix Utils for Client-Side Rendering

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/react-remix

Installs the 'remix-utils' package, which is necessary for enabling client-side rendering functionalities within the Remix application when using Bryntum Gantt.

```shell
npm install remix-utils
```

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

### Install Node Modules and Sass

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/react

After creating the project, this command installs all necessary Node.js modules and the Sass preprocessor, which is required for styling in Bryntum applications.

```shell
cd bryntum-gantt-app
npm install && npm install sass
```

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

### Example Bryntum Gantt Data (JSON)

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/nextjs

Provides sample data in JSON format for the Bryntum Gantt chart. This includes project details, calendar configurations with intervals, and a hierarchical structure of tasks with properties like name, duration, start date, and baselines.

```json
{
  "success": true,
  "project": {
    "calendar": "general",
    "startDate": "2022-03-14",
    "hoursPerDay": 24,
    "daysPerWeek": 5,
    "daysPerMonth": 20
  },
  "calendars": {
    "rows": [
      {
        "id": "general",
        "name": "General",
        "intervals": [
          {
            "recurrentStartDate": "on Sat",
            "recurrentEndDate": "on Mon",
            "isWorking": false
          }
        ],
        "expanded": true,
        "children": [
          {
            "id": "business",
            "name": "Business",
            "intervals": [
              {
                "recurrentStartDate": "every weekday at 12:00",
                "recurrentEndDate": "every weekday at 13:00",
                "isWorking": false
              },
              {
                "recurrentStartDate": "every weekday at 17:00",
                "recurrentEndDate": "every weekday at 08:00",
                "isWorking": false
              }
            ]
          },
          {
            "id": "night",
            "name": "Night shift",
            "intervals": [
              {
                "recurrentStartDate": "every weekday at 6:00",
                "recurrentEndDate": "every weekday at 22:00",
                "isWorking": false
              }
            ]
          }
        ]
      }
    ]
  },
  "tasks": {
    "rows": [
      {
        "id": 1000,
        "name": "Launch SaaS Product",
        "percentDone": 50,
        "startDate": "2022-03-14",
        "expanded": true,
        "children": [
          {
            "id": 1,
            "name": "Setup web server",
            "percentDone": 50,
            "duration": 10,
            "startDate": "2022-03-14",
            "rollup": true,
            "endDate": "2022-03-23",
            "expanded": true,
            "children": [
              {
                "id": 11,
                "name": "Install Apache",
                "percentDone": 50,
                "startDate": "2022-03-14",
                "rollup": true,
                "duration": 3,
                "color": "teal",
                "endDate": "2022-03-17",
                "cost": 200,
                "baselines": [
                  {
                    "startDate": "2022-03-13T23:00:00",
                    "endDate": "2022-03-16T23:00:00"
                  },
                  {
                    "startDate": "2022-03-13T23:00:00",
                    "endDate": "2022-03-16T23:00:00"
                  },
                  {
                    "startDate": "2022-03-13T23:00:00",
                    "endDate": "2022-03-16T23:00:00"
                  }
                ]
              },
              {
                "id": 12,
                "name": "Propsure firewall",
                "percentDone": 50,
                "startDate": "2022-03-14",
                "rollup": true,
                "duration": 3,
                "endDate": "2022-03-17"
              }
            ]
          }
        ]
      }
    ]
  }
}
```

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

### Install Bryntum Gantt - Trial Version

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/vue-3

Installs the trial version of Bryntum Gantt and its Vue 3 integration package. This command fetches the specified versions from the npm registry and adds them as project dependencies. It's intended for users evaluating the Bryntum Gantt component.

```shell
npm install @bryntum/gantt@npm:@bryntum/gantt-trial@6.3.3 @bryntum/gantt-vue-3@6.3.3
```

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

### Create Next.js Application with `create-next-app`

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/nextjs

Initializes a new Next.js project using the `create-next-app` command. It guides the user through a series of prompts to configure the project, including options for TypeScript, ESLint, Tailwind CSS, and directory structure. The output is a new Next.js project ready for further development.

```shell
npx create-next-app@latest
```

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

### Install Bryntum Gantt Licensed and React Component

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/react-remix

Installs the licensed version of Bryntum Gantt and its React integration package. This requires a valid license and prior access to the Bryntum private npm registry.

```shell
npm install @bryntum/gantt @bryntum/gantt-react
```

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

### Install Bryntum Gantt Trial (NPM)

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/ionic

Installs the trial version of the Bryntum Gantt component and its Angular integration package. This command assumes access to the Bryntum npm registry.

```npm
npm install @bryntum/gantt@npm:@bryntum/gantt-trial@6.3.3 @bryntum/gantt-angular@6.3.3
```

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

### Install Angular CLI

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/angular

Installs the Angular Command Line Interface globally, which is used for creating and managing Angular applications. Ensure Node.js is installed prior to running this command.

```shell
npm install -g @angular/cli
```

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

### Install Ionic CLI (Shell)

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/ionic

Installs the Ionic Command Line Interface globally using npm. This tool is essential for creating and managing Ionic applications.

```shell
npm install -g @ionic/cli
```

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

### Install and Run Local Bryntum Gantt React Demos

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/integration/react/guide

Commands to install dependencies and start a local development server for Bryntum Gantt React demos. Uses npm and Vite. Automatically rebuilds on code changes. Accessible at http://localhost:5173.

```shell
npm install
npm start
```

```shell
npm install
npm run dev
```

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

### PDF Export Server: Resource Handling Example

Source: https://bryntum.com/products/gantt/docs-llm/api/Gantt/feature/export/PdfExport

This command-line example illustrates how to start the PDF export server with a specified host and port, and how to configure it to serve resources from a specific directory. This is crucial when using the `translateURLsToAbsolute` option in the Gantt configuration.

```bash
node ./src/server.js -h 8080 -r web/application/styles
```

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

### Create Vite Vanilla JavaScript App

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/javascript-npm

Initializes a new Vite project with a vanilla JavaScript template. This command sets up the basic file structure and build configuration for a new web application.

```shell
npm create vite@latest my-gantt-app -- --template vanilla
```

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

### Build and Run Bryntum Ionic Demos Locally

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/integration/ionic/guide

Commands to install dependencies and start a local development server for Bryntum Ionic demos. Modifications to the code are automatically reflected in the browser. This is useful for development and testing.

```shell
npm install
npm run start
```

```shell
npm install
npm run build
```

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

### Create React App with Vite (JavaScript)

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/react

This command initializes a new React project using Vite with JavaScript as the primary language. It sets up the basic project structure and dependencies.

```shell
npm create vite@latest bryntum-gantt-app -- --template react
```

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

### Install Bryntum Gantt - Licensed Version

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/vue-3

Installs the licensed version of Bryntum Gantt and its Vue 3 integration package. This command fetches the specified versions from the npm registry and adds them as project dependencies. It's intended for users with a commercial license for Bryntum Gantt.

```shell
npm install @bryntum/gantt@6.3.3 @bryntum/gantt-vue-3@6.3.3
```

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

### Create React App with Vite (TypeScript)

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/react

This command initializes a new React project using Vite with TypeScript. It scaffolds a project with TypeScript support, ready for integration with Bryntum Gantt.

```shell
npm create vite@latest bryntum-gantt-app -- --template react-ts
```

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

### Sample Data for Bryntum Gantt (JSON)

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/react-remix

Provides the data structure for initializing the Bryntum Gantt component. It includes project details, calendars, and task information, defining the content and layout of the Gantt chart.

```json
{
  "success": true,
  "project": {
    "calendar": "general",
    "startDate": "2022-03-14",
    "hoursPerDay": 24,
    "daysPerDay": 5,
    "daysPerMonth": 20
  },
  "calendars": {
    "rows": [
      {
        "id": "general",
        "name": "General",
        "intervals": [
          {
            "recurrentStartDate": "on Sat",
            "recurrentEndDate": "on Mon",
            "isWorking": false
          }
        ],
        "expanded": true,
        "children": [
          {
            "id": "business",
            "name": "Business",
            "intervals": [
              {
                "recurrentStartDate": "every weekday at 12:00",
                "recurrentEndDate": "every weekday at 13:00",
                "isWorking": false
              },
              {
                "recurrentStartDate": "every weekday at 17:00",
                "recurrentEndDate": "every weekday at 08:00",
                "isWorking": false
              }
            ]
          },
          {
            "id": "night",
            "name": "Night shift",
            "intervals": [
              {
                "recurrentStartDate": "every weekday at 6:00",
                "recurrentEndDate": "every weekday at 22:00",
                "isWorking": false
              }
            ]
          }
        ]
      }
    ]
  },
  "tasks": {
    "rows": [
      {
        "id": 1000,
        "name": "Launch SaaS Product",
        "percentDone": 50,
        "startDate": "2022-03-14",
        "expanded": true,
        "children": [
          {
            "id": 1,
            "name": "Setup web server",
            "percentDone": 50,
            "duration": 10,
            "startDate": "2022-03-14",
            "rollup": true,
            "endDate": "2022-03-23",
            "expanded": true,
            "children": [
              {
                "id": 11,
                "name": "Install Apache",
                "percentDone": 50,
                "startDate": "2022-03-14",
                "rollup": true,
                "duration": 3,
                "color": "teal",
                "endDate": "2022-03-17",
                "cost": 200,
                "baselines": [
                  {
                    "startDate": "2022-03-13T23:00:00",
                    "endDate": "2022-03-16T23:00:00"
                  },
                  {
                    "startDate": "2022-03-13T23:00:00",
                    "endDate": "2022-03-16T23:00:00"
                  },
                  {
                    "startDate": "2022-03-13T23:00:00",
                    "endDate": "2022-03-16T23:00:00"
                  }
                ]
              },
              {
                "id": 12,
                "name": "Propsure firewall",
                "percentDone": 50,
                "startDate": "2022-03-14",
                "rollup": true,
                "duration": 3,
                "endDate": "2022-03-17",
                "showInTimeline": true,
                "cost": 1000,
                "baselines": [
                  {
                    "startDate": "2022-03-13T23:00:00",
                    "endDate": "2022-03-16T23:00:00"
                  },
                  {
                    "startDate": "2022-03-13T23:00:00",
                    "endDate": "2022-03-16T23:00:00"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}
```

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

### NPM Project and User Configuration Example

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/npm-repository

An example showing combined user and project npm configurations. This output includes settings from both the user's home directory .npmrc and the project's local .npmrc file, demonstrating merged configurations.

```ini
; "user" config from /Users/user/.npmrc

@bryntum:registry = "https://npm.bryntum.com"
//npm.bryntum.com/:_authToken = (protected)

; "project" config from /Users/Shared/data/devel/bryntum-suite/.npmrc

legacy-peer-deps = true

; node bin location = /Users/user/.nvm/versions/node/v12.22.1/bin/node
; cwd = /Users/Shared/data/devel/bryntum-suite
; HOME = /Users/user
; Run `npm config ls -l` to show all defaults.

```

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

### Initialize Bryntum Gantt Component with Project Data (JavaScript)

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/javascript-npm

Initializes the Bryntum Gantt component and configures it with project data, including tasks and dependencies. It sets up the Gantt instance, specifies the container, date range, columns, and project details. The `autoSetConstraints` option is demonstrated to manage task scheduling.

```javascript
import { Gantt } from '@bryntum/gantt';
import './style.css';

const gantt = new Gantt({
    appendTo  : 'app',
    startDate : new Date(2022, 0, 1),
    endDate   : new Date(2022, 0, 10),
    columns   : [
        { type : 'name', width : 160 }
    ],
    project : {

        // Automatically introduces a `startnoearlier` constraint for tasks that (a) have no predecessors,
        // (b) do not use constraints and (c) aren't `manuallyScheduled`
        autoSetConstraints : true,
        tasks              :
            [
            {
                id       : 1,
                name     : 'Write docs',
                expanded : true,
                children :
                    [
                    { id : 2, name : 'Proof-read docs', startDate : '2022-01-02', endDate : '2022-01-09' },
                    { id : 3, name : 'Release docs', startDate : '2022-01-09', endDate : '2022-01-10' }
                    ]
            }
        ],

        dependencies : [
            { fromTask : 2, toTask : 3 }
        ]
    }
});
```

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

### Create Vite Application

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/migration/migrating_from_extjs

Shell commands to create a new Vite application using the 'create-vite' package. It prompts for project name and template, then installs dependencies and starts the development server.

```shell
npm create vite@latest ext-migration
cd ext-migration
npm i
npm run dev
```

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

### NPM User Configuration Example

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/npm-repository

An example of the output from 'npm config ls', illustrating the user-level npm configuration. This includes registry settings for the '@bryntum' namespace and authentication details.

```ini
; "user" config from /Users/user/.npmrc

@bryntum:registry = "https://npm.bryntum.com"
//npm.bryntum.com/:_authToken = (protected)

; node bin location = /Users/user/.nvm/versions/node/v12.22.1/bin/node
; cwd = /Users/Shared/data/devel/bryntum-suite
; HOME = /Users/user
; Run `npm config ls -l` to show all defaults.

```

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

### Install Sass Dependency

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/vue-3

This command installs the Sass compiler as a development dependency in your project. It is necessary if you choose to use SCSS files for theming the Bryntum Gantt chart or for any other SCSS preprocessing needs.

```shell
npm install sass@1.42.0 --save-dev --save-prefix=~
```

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

### Install Bryntum Gantt Licensed (NPM)

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/ionic

Installs the licensed version of the Bryntum Gantt component and its Angular integration package. This command assumes you have a valid license and access to the Bryntum npm registry.

```npm
npm install @bryntum/gantt@6.3.3 @bryntum/gantt-angular@6.3.3
```

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

### Configure HintFlow for User Onboarding (JavaScript)

Source: https://bryntum.com/products/gantt/docs-llm/api/Core/widget/Hint

Demonstrates how to instantiate and configure the HintFlow class to create a guided onboarding experience. It includes default configurations for hints and defines multiple hint steps with target selectors, content, and next actions. This is useful for guiding users through specific features of the Gantt chart.

```javascript
new HintFlow({
    // Default configs to apply to all hints
    defaults : {
        modal : true
    },
    hints : [{
        // CSS selector to find the target element
        target  : '.b-tabpanel-tab[data-item-index="1"]',

        // Action to take when the 'Next' button is clicked
        nextAction : {
            click : '.b-tabpanel-tab[data-item-index="1"]'
        }

        // Config props for the displayed Hint popup
        title   : 'Change tab',
        content : 'Click here to move to the next tab',
        align   : 't-n'
    }, {
        target  : '.b-button:contains(Save)',
        title   : 'Save',
        content : 'Click here to save the changes',
        nextAction : {
           click : '.b-button:contains(Save)'
        }
   }]
});
```

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

### Example: Inactive Tasks and Progress Line (JavaScript)

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/basics/inactive_tasks

This example illustrates how the progress line feature interacts with inactive tasks. It shows that inactive tasks are treated as not started, and the progress line is rendered accordingly.

```javascript
// Content of Gantt/guides/whats-new/4.3.0/inactive_tasks_progress_line.js
// (Actual code not provided in input, this is a placeholder for the file reference)
```

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

### React App Component Setup (TSX)

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/react

This TypeScript version of the App component integrates the Bryntum Gantt. It utilizes `useRef` to potentially access the Gantt instance, though it's not strictly required for basic rendering. This setup is suitable for projects using TypeScript.

```typescript
import { FunctionComponent, useRef } from 'react';
import { BryntumGantt } from '@bryntum/gantt-react';
import { ganttProps } from './GanttConfig';
import './App.scss';

const App: FunctionComponent = () => {
  const gantt = useRef<BryntumGantt>(null);

  return <BryntumGantt ref={gantt} {...ganttProps} />;
};

export default App;
```

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

### Navigate to Ionic App Directory (Shell)

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/ionic

Changes the current directory to the newly created Ionic application folder. This is a necessary step before installing project dependencies or running the application.

```shell
cd IonicApp
```

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

### ViewPresetCombo Usage Examples

Source: https://bryntum.com/products/gantt/docs-llm/api/Scheduler/widget/ViewPresetCombo

Examples demonstrating how to integrate the ViewPresetCombo into a Scheduler component's toolbar or connect it directly to a Scheduler instance.

```APIDOC
## ViewPresetCombo Integration Examples

### Description
Illustrates common methods for integrating the `ViewPresetCombo` widget with Bryntum Gantt and Scheduler components.

### Example 1: Adding to Toolbar

Add the `ViewPresetCombo` to a component's toolbar for automatic connection to the parent Scheduler component.

```javascript
new Scheduler({
   tbar : {
       viewPresetCombo: {
           type: 'viewpresetcombo',
           width: '7em'
       }
   }
});
```

### Example 2: Connecting to a Specific Client

Manually connect the `ViewPresetCombo` to a specific Scheduler, SchedulerPro, or Gantt component instance using the `client` configuration.

```javascript
const scheduler = new Scheduler({ ... });
const viewPresetCombo = new ViewPresetCombo({
    appendTo : 'someElementClassName',
    client   : scheduler
});
```

### Example 3: Customizing Selectable Presets

Specify a custom array of preset IDs to be displayed in the combo box. The presets must be available to the client component.

```javascript
viewPresetCombo: {
   presets: ['weekAndDay', 'dayAndMonth', 'myCustomPreset']
}
```
```

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

### Gantt Chart Task Baselines Example (JSON)

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/vue-3

This JSON snippet illustrates the 'baselines' property within a Gantt chart task object. It's an array where each element represents a historical snapshot of the task's start and end dates. This is useful for tracking planned vs. actual progress over time.

```json
{
  "startDate": "2024-01-20T00:00:00",
  "endDate": "2024-01-25T00:00:00"
}
```

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

### Create a Basic Panel with Items and Header

Source: https://bryntum.com/products/gantt/docs-llm/api/Core/widget/Panel

Demonstrates the creation of a basic Panel widget with placeholder items and a header title. This is a fundamental example for initializing a Panel and defining its initial content and structural elements.

```javascript
let panel = new Panel({
  items : {
      customerName : { type : 'text', placeholder: 'Text' },
  },
  header : {
      title : 'Customer Details'
  }
});
```

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

### Run PDF Export Server with Resource Path

Source: https://bryntum.com/products/gantt/docs-llm/api/Grid/feature/export/PdfExport

Provides an example command for starting the Bryntum PDF export server with a specified resource path (`-r web/application/styles`). This path is used in conjunction with the `translateURLsToAbsolute` client-side configuration to serve application resources to the export server.

```bash
# Following path would be served by this address: http://localhost:8080/resources/
node ./src/server.js -h 8080 -r web/application/styles
```

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

### StateProvider Setup Examples

Source: https://bryntum.com/products/gantt/docs-llm/api/Core/state/StateProvider

Examples demonstrating how to set up the StateProvider with different storage configurations.

```APIDOC
## StateProvider Setup Examples

### Description
Examples of configuring the global StateProvider for different storage mechanisms.

### Method
N/A (Configuration/Setup)

### Endpoint
N/A

### Parameters
N/A

### Request Example

#### Using Local Storage (Default Prefix)
```javascript
StateProvider.setup('local');
```

#### Using Local Storage (Custom Prefix)
```javascript
StateProvider.setup({
    storage : 'local',
    prefix  : 'myApp-v1:'
});
```

#### Using Memory Storage
```javascript
StateProvider.setup('memory');
```

### Response
N/A
```

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

### Start Development Server

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/migration/migrate-dhtmlx-to-bryntum

This bash command starts the development server for the project. It assumes an npm script 'start' is defined in the project's package.json, which is typically used to run the server.

```bash
npm run start
```

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

### HTML Structure for Bryntum Gantt Integration

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/integration/backends/express/guide

This HTML file sets up the basic structure for a webpage that will host the Bryntum Gantt component. It includes necessary meta tags, links to Bryntum and custom stylesheets, and a `div` element with the ID 'app' where the Gantt chart will be rendered. A script tag points to the main JavaScript file for Gantt configuration.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="icon" type="image/png" href="/bryntum.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>How to use Bryntum Gantt with Express and SQLite</title>
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Poppins" />
    <link rel="stylesheet" href="./gantt.stockholm.css" data-bryntum-theme>
    <link rel="stylesheet" href="./style.css">
    <script type="module" src="./index.js" defer></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
```

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

### Setup App.vue for Bryntum Gantt (Vue 3)

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/vue-3

This snippet shows how to import and use the BryntumGantt component in a Vue 3 application's main file. It includes necessary imports from '@bryntum/gantt-vue-3' and references a configuration object. Supports both JavaScript and TypeScript.

```javascript
<script setup>
import { BryntumGantt } from '@bryntum/gantt-vue-3';
import { ganttConfig } from './AppConfig.js';
</script>

<template>
    <bryntum-gantt
        v-bind="ganttConfig"
    />
</template>

<style lang="scss">
@import './App.scss';
</style>
```

```typescript
<script setup lang="ts">
import { BryntumGantt } from '@bryntum/gantt-vue-3';
import { ganttConfig } from './AppConfig.ts';
</script>

<template>
    <bryntum-gantt
        v-bind="ganttConfig"
    />
</template>

<style lang="scss">
@import './App.scss';
</style>
```

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

### Create a Basic NumberField Instance

Source: https://bryntum.com/products/gantt/docs-llm/api/Core/widget/NumberField

Demonstrates how to create a basic instance of the NumberField widget with minimum, maximum, and initial value configurations. This is a foundational example for using the NumberField.

```javascript
const number = new NumberField({
    min   : 1,
    max   : 5,
    value : 3
});
```

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

### Gantt Data Structure Example

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/vue-3

This JSON object represents the data model for the Bryntum Gantt chart. It includes nested objects for tasks, resources, assignments, and time ranges, defining relationships and attributes for each. This structure is essential for initializing and populating the Gantt component.

```json
{
  "tasks": {
    "rows": [
      {
        "id": 17,
        "fromTask": 42,
        "toTask": 45
      },
      {
        "id": 18,
        "fromTask": 43,
        "toTask": 45
      },
      {
        "id": 19,
        "fromTask": 44,
        "toTask": 45
      },
      {
        "id": 20,
        "fromTask": 4034,
        "toTask": 4035
      },
      {
        "id": 21,
        "fromTask": 4035,
        "toTask": 4036
      },
      {
        "id": 22,
        "fromTask": 45,
        "toTask": 46
      }
    ]
  },
  "resources": {
    "rows": [
      {
        "id": 1,
        "name": "Celia",
        "city": "Barcelona",
        "calendar": null,
        "image": "celia.jpg"
      },
      {
        "id": 2,
        "name": "Lee",
        "city": "London",
        "calendar": null,
        "image": "lee.jpg"
      },
      {
        "id": 3,
        "name": "Macy",
        "city": "New York",
        "calendar": null,
        "image": "macy.jpg"
      },
      {
        "id": 4,
        "name": "Madison",
        "city": "Barcelona",
        "calendar": null,
        "image": "madison.jpg"
      },
      {
        "id": 5,
        "name": "Rob",
        "city": "Rome",
        "calendar": "business",
        "image": "rob.jpg"
      },
      {
        "id": 6,
        "name": "Dave",
        "city": "Barcelona",
        "calendar": "night",
        "image": "dave.jpg"
      },
      {
        "id": 7,
        "name": "Dan",
        "city": "London",
        "calendar": "night",
        "image": "dan.jpg"
      },
      {
        "id": 8,
        "name": "George",
        "city": "New York",
        "calendar": null,
        "image": "george.jpg"
      },
      {
        "id": 9,
        "name": "Gloria",
        "city": "Rome",
        "calendar": null,
        "image": "gloria.jpg"
      },
      {
        "id": 10,
        "name": "Henrik",
        "city": "London",
        "calendar": null,
        "image": "henrik.jpg"
      }
    ]
  },
  "assignments": {
    "rows": [
      {
        "id": 1,
        "event": 11,
        "resource": 1
      },
      {
        "id": 2,
        "event": 4033,
        "resource": 1
      },
      {
        "id": 3,
        "event": 12,
        "resource": 9
      },
      {
        "id": 4,
        "event": 13,
        "resource": 2
      },
      {
        "id": 5,
        "event": 13,
        "resource": 3
      },
      {
        "id": 6,
        "event": 13,
        "resource": 6
      },
      {
        "id": 7,
        "event": 13,
        "resource": 7
      },
      {
        "id": 8,
        "event": 13,
        "resource": 8
      },
      {
        "id": 9,
        "event": 21,
        "resource": 5
      },
      {
        "id": 10,
        "event": 21,
        "resource": 9
      },
      {
        "id": 11,
        "event": 22,
        "resource": 8
      },
      {
        "id": 12,
        "event": 25,
        "resource": 3
      }
    ]
  },
  "timeRanges": {
    "rows": [
      {
        "id": 1,
        "name": "Important date",
        "startDate": "2024-01-30",
        "duration": 0,
        "durationUnit": "d",
        "cls": "b-fa b-fa-diamond"
      }
    ]
  }
}
```

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

### Recurrent Start Date Examples (JavaScript)

Source: https://bryntum.com/products/gantt/docs-llm/api/SchedulerPro/model/CalendarIntervalModel

Demonstrates various ways to specify recurrent start dates using string formats and the 'later' library for complex scheduling rules. These examples are intended for use with the recurrentStartDate field.

```javascript
// occurs at 10:15am every day
recurrentStartDate  : 'at 10:15 am'

// occurs everyday at 13:00 starting from 28 Feb.
recurrentStartDate  : 'at 13:00 every 1 day of the year starting on the 59'

// For advanced use cases
// occurs the 2nd minute every hour
recurrentStartDate  : later.parse.recur().on(2).minute()

// fires on the last day of every month at 5am
recurrentStartDate  : later.parse.recur().on(5).hour().last().dayOfMonth()
```

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

### Create Bryntum Gantt Project Structure

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/migration/migrate-syncfusion-to-bryntum

This command initializes a new directory structure for a Bryntum Gantt project. It creates essential files like server.js, package.json, .env, and sets up a public directory with index.html and app.js. This is the starting point for setting up a new Bryntum Gantt application.

```bash
mkdir bryntum-gantt && { cd bryntum-gantt; touch server.js package.json .env; mkdir public; cd public; touch index.html app.js; cd ..;}
```

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

### Bryntum TaskBoard Configuration for React (TypeScript)

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/integration/react/multiple-products

Demonstrates the configuration of Bryntum TaskBoard properties in a React application using TypeScript. It covers importing the required types and setting up the configuration object.

```typescript
import { BryntumTaskBoardProps } from '@bryntum/taskboard-react-thin';

const taskBoardProps : TaskBoardPropsBryntumTaskBoardProps = {
    // TaskBoard configuration
};
```

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

### Example: Inactive Tasks in Bryntum Gantt (JavaScript)

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/basics/inactive_tasks

This example likely demonstrates the visual and functional aspects of inactive tasks within a Bryntum Gantt chart. It serves as a practical illustration of the concepts discussed in the guide.

```javascript
// Content of Gantt/guides/whats-new/4.3.0/inactive_tasks.js
// (Actual code not provided in input, this is a placeholder for the file reference)
```

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

### Initialize Prisma Database Configuration

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/migration/migrate-devexpress-to-bryntum

Initializes the Prisma database configuration, creating a `prisma` folder with a `schema.prisma` file. This is the first step after installing Prisma to set up database connectivity.

```shell
npx prisma init
```

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

### Hierarchical Gantt Task with Children

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/nextjs

This example demonstrates how the data structure represents parent tasks that contain child tasks. The 'children' array allows for nested task organization, crucial for project breakdown in Gantt charts. Each child follows the same task data structure.

```json
{
  "id": 2,
  "name": "Website Design",
  "percentDone": 60,
  "startDate": "2022-03-23",
  "rollup": true,
  "endDate": "2022-04-13",
  "expanded": true,
  "children": [
    {
      "id": 21,
      "name": "Contact designers",
      "percentDone": 70,
      "startDate": "2022-03-23",
      "rollup": true,
      "duration": 5,
      "endDate": "2022-03-30",
      "cost": 500,
      "baselines": [
        {
          "startDate": "2022-03-22T23:00:00",
          "endDate": "2022-03-25T23:00:00"
        },
        {
          "startDate": "2022-03-22T23:00:00",
          "endDate": "2022-03-28T23:00:00"
        },
        {
          "startDate": "2022-03-22T23:00:00",
          "endDate": "2022-03-29T23:00:00"
        }
      ]
    }
  ]
}
```

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

### Import Gantt Module and Initialize

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/gettingstarted/es6bundle

Demonstrates importing the Gantt class from the ES module bundle and initializing a new Gantt instance. This is the standard way to start using Gantt in modern JavaScript applications. Configuration options are passed during instantiation.

```javascript
import { Gantt } from '../build/gantt.module.js';

const gantt = new Gantt({
    /* Gantt configuration options */
})
```

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

### React App Component Setup (JSX)

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/react

This code snippet shows the basic structure for integrating the Bryntum Gantt component into a React application using JSX. It imports the Gantt component and its configuration, then renders it within the App function. No external state management is shown here.

```javascript
import { BryntumGantt } from '@bryntum/gantt-react';
import { ganttProps } from './GanttConfig';
import './App.scss';

function App() {
  return <BryntumGantt {...ganttProps} />;
}

export default App;
```

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

### Initialize HintFlow with Sequential Hints

Source: https://bryntum.com/products/gantt/docs-llm/api/Core/util/HintFlow

This JavaScript code demonstrates how to initialize the HintFlow class. It configures a series of hints, each targeting a specific DOM element and providing instructional content. Default configurations can be applied to all hints.

```javascript
new HintFlow({
    // Default configs to apply to all hints
    defaults : {
        modal : true
    },
    hints : [{
        // CSS selector to find the target element
        target  : '.b-tabpanel-tab[data-item-index="1"]',

        // Action to take when the 'Next' button is clicked
        nextAction : {
            click : '.b-tabpanel-tab[data-item-index="1"]'
        }

        // Config props for the displayed Hint popup
        title   : 'Change tab',
        content : 'Click here to move to the next tab',
        align   : 't-n'
    }, {
        target  : '.b-tabpanel .b-tabpanel-body :nth-child(2) input',
        title   : 'Change name',
        content : 'Enter the new name here',
        nextAction : {
              text : 'New name[Enter]'
        }
    }, {
        target  : '.b-button:contains(Save)',
        title   : 'Save',
        content : 'Click here to save the changes',
        nextAction : {
           click : '.b-button:contains(Save)'
        }
   }]
});
```

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

### Apply Stockholm Theme to Gantt Component (CSS)

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/javascript-npm

Applies the Stockholm theme to the Bryntum Gantt component by importing the corresponding CSS file. This ensures the Gantt chart renders with the correct visual styles. The example shows importing directly from `node_modules`, suggesting build tools for production.

```css
@import "./node_modules/@bryntum/gantt/gantt.stockholm.css";
```

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

### HTML Structure for Bryntum Gantt Application

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/javascript

This HTML file sets up the basic structure for a Bryntum Gantt application. It includes a placeholder div for the Gantt component and links to the main JavaScript file. Ensure this file is placed in your project's root directory.

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bryntum Gantt App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>
```

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

### Including Bryntum Gantt via Script Tag (UMD)

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/javascript

This example shows how to include the Bryntum Gantt UMD bundle using a `<script>` tag in your HTML. JavaScript code can then access the Gantt class through the global `bryntum` namespace. This method is considered legacy, and a corresponding `.js.map` file is recommended.

```html
<script src="gantt.umd.js"></script>
```

```javascript
const gantt = new bryntum.gantt.Gantt({/*...*/ });
```

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

### Initialize Gantt Component with Project Data (JavaScript)

Source: https://bryntum.com/products/gantt/docs-llm/guide/Gantt/quick-start/javascript

Initializes the Bryntum Gantt component with project data, including tasks and dependencies. It assumes an EcmaScript module bundle setup. The component automatically schedules tasks considering constraints and calendars. The startDate and endDate configs define the accessible timespan.

```javascript
import { Gantt } from './gantt.module.js';

const gantt = new Gantt({
    appendTo  : 'app',
    startDate : new Date(2022, 0, 1),
    endDate   : new Date(2022, 0, 10),
    columns   : [
        { type : 'name', width : 160 }
    ],
    project : {

        // Automatically introduces a `startnoearlier` constraint for tasks that (a) have no predecessors,
        // (b) do not use constraints and (c) aren't `manuallyScheduled`
        autoSetConstraints : true,
        tasks              :
            [
            {
                id       : 1,
                name     : 'Write docs',
                expanded : true,
                children :
                    [
                    { id : 2, name : 'Proof-read docs', startDate : '2022-01-02', endDate : '2022-01-09' },
                    { id : 3, name : 'Release docs', startDate : '2022-01-09', endDate : '2022-01-10' }
                    ]
            }
        ],

        dependencies :
            [
            { fromTask : 2, toTask : 3 }
        ]
    }
});
```

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

### Basic SchedulerPro Instance Configuration

Source: https://bryntum.com/products/gantt/docs-llm/api/SchedulerPro/view/SchedulerPro

This JavaScript code snippet demonstrates how to create and configure an instance of SchedulerPro. It includes settings for project data loading, date ranges, resource image paths, view presets, features like column lines and dependencies, and column definitions.

```javascript
const scheduler = new SchedulerPro({
   // A Project holds the data and the calculation engine for Scheduler Pro. It also acts as a CrudManager, allowing
   // loading data into all stores at once
   project : {
       autoLoad  : true,
       transport : {
           load : {
               url : './data/data.json'
           }
      }
   },

   adopt             : 'container',
   startDate         : '2020-05-01',
   endDate           : '2020-09-30',
   resourceImagePath : '../_shared/images/users/',
   viewPreset        : 'dayAndWeek',
   features : {
      columnLines  : false,
      dependencies : true
  },

  columns : [
      {
          type           : 'resourceInfo',
          text           : 'Worker',
          showEventCount : true
      }
  ]
});
```