### Start the export server

Source: https://bryntum.com/products/schedulerpro/docs-llm/api/Scheduler/feature/export/PdfExport

Command line example for starting the export server with specific resource paths.

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

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

### Launch local development server with start script

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/integration/react/guide

Use this command sequence to install dependencies and start the development server using the start script.

```shell
npm install
npm start
```

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

### Remix project setup prompts

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

Example responses for the Remix project initialization prompts.

```bash
- Where should we create your new project?
 my-remix-schedulerpro
- Initialize a new git repository?
 Yes
- Install dependencies with npm?
 Yes
```

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

### AI Prompt for Scheduler Pro Setup

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/quick-start/ai-agents

A comprehensive prompt template designed to guide AI agents through the installation and configuration process of Bryntum Scheduler Pro.

```txt
Set up Bryntum Scheduler Pro in this project.

**Before writing code:**
- **Use TypeScript by default** unless the user has explicitly asked for plain JavaScript. When scaffolding, pick the TypeScript template (e.g. `npm create vite@latest . -- --template react-ts`, `--template vue-ts`, etc.). Angular is TypeScript by default.
- Detect the framework from `package.json` (React, Angular, Vue, or vanilla JS). If there's no app yet, ask the user which framework to scaffold and create it in-place — don't `rm -rf` the directory.
- Look up the latest docs: use the `search_bryntum_docs` MCP tool with `product: "schedulerpro"` if it's already installed, otherwise silently fall back to https://bryntum.com/products/schedulerpro/docs/?utm_source=ai-quickstart.
- Get the current version with `npm view @bryntum/schedulerpro-trial version`. Pin exact versions (no `^`).

**1. Install (trial unless the user has a license):**
- **Detect license first:** check for an existing `.npmrc` (in the project or `~/.npmrc`) pointing at `npm.bryntum.com` (or `npm-us.bryntum.com`) — that signals the user is on a paid license. Otherwise ask the user once: *"Do you have a Bryntum license?"* Present the choice neutrally — **never label "trial" as recommended** in any UI you render. If the user doesn't answer, silently fall back to trial packages so the app still builds, but treat that as a fallback, not a recommendation.
- **Trial:** install the main package via npm alias so imports stay standard: `npm install @bryntum/schedulerpro@npm:@bryntum/schedulerpro-trial@<version>`. No `.npmrc` or auth needed.
- **Licensed:** install the non-trial package directly: `npm install @bryntum/schedulerpro@<version>`.
- Framework wrapper - use the same version (no `-trial` suffix in either case), e.g. `@bryntum/schedulerpro-react`, `@bryntum/schedulerpro-angular`, `@bryntum/schedulerpro-vue-3`. Skip for vanilla JS.

**2. Component, CSS, framework patterns, and verification:**
Read the Bryntum AI Agent skill for all implementation details — component defaults per product, CSS import order, framework-specific patterns, sizing, and verify steps:
- If the `bryntum` skill (https://github.com/bryntum/skills) is installed: use it, and load the matching framework skill (`bryntum-react`, `bryntum-angular`, `bryntum-vue`, or `bryntum-vanilla`)
- If not installed, fetch directly: https://raw.githubusercontent.com/bryntum/skills/refs/heads/main/bryntum/SKILL.md

For richer Bryntum guidance on next steps (advanced features, framework integrations, backend persistence, data binding), suggest the user install the Bryntum AI Agent skills (https://github.com/bryntum/skills) and the Bryntum MCP Server (https://mcp.bryntum.com).
```

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

### Start the project

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/migration/migrate-from-bryntum-scheduler-to-bryntum-schedulerpro

Command to start the server and verify the API endpoint.

```shell
npm start
```

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

### Run Angular demo in development mode

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/integration/angular/guide

Commands to install dependencies and start the local development server.

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

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

### Install project dependencies

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

Navigates to the project directory and installs the default dependencies.

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

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

### Example Nightly Build Version

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/npm/repository/installation

A concrete example of a nightly build version string.

```shell
6.1.8-nightly.20250330
```

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

### Launch local development server with dev script

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/integration/react/guide

Use this command sequence to install dependencies and start the development server using the Vite dev script.

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

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

### Trial login example

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/npm/repository/private-repository-access

Example of the login process for trial users, replacing @ with .. in the email.

```shell
$ npm login --registry=https://npm.bryntum.com
npm notice Log in on https://npm.bryntum.com/
Username: user..yourdomain.com
Password: trial
```

```shell
$ npm login --registry=https://npm-us.bryntum.com
npm notice Log in on https://npm-us.bryntum.com/
Username: user..yourdomain.com
Password: trial
```

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

### Navigate to the SharePoint example directory

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/integration/sharepoint

Use this command to enter the directory containing the SharePoint Fabric drag-from-grid example.

```shell
cd examples/frameworks/react/typescript/sharepoint-fabric-drag-from-grid
```

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

### Licensed login example

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/npm/repository/private-repository-access

Example of the login process for licensed users using Customer Zone credentials.

```shell
$ npm login --registry=https://npm.bryntum.com
npm notice Log in on https://npm.bryntum.com/
Username: user..yourdomain.com
Password: your-customer-zone-password
```

```shell
$ npm login --registry=https://npm-us.bryntum.com
npm notice Log in on https://npm-us.bryntum.com/
Username: user..yourdomain.com
Password: your-customer-zone-password
```

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

### Install trial packages via package manager

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/npm/repository/public-repository-access

Use npm or yarn to install the trial package with an alias and the corresponding framework wrapper.

```shell
npm install @bryntum/schedulerpro@npm:@bryntum/schedulerpro-trial@7.3.3
npm install @bryntum/schedulerpro-angular@7.3.3
```

```shell
yarn add @bryntum/schedulerpro@npm:@bryntum/schedulerpro-trial@7.3.3
yarn add @bryntum/schedulerpro-angular@7.3.3
```

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

### Install remix-utils

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

Install the remix-utils package to support client-side rendering.

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

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

### Example 403 Forbidden installation error

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/npm/repository/troubleshooting

Output indicating an attempt to install a licensed package without proper permissions or license.

```text
npm error 403 403 Forbidden - GET https://npm.bryntum.com/@bryntum/schedulerpro/-/schedulerpro-7.3.3.tgz -
npm error 403
npm error 403 --------------------------------------------------------
npm error 403                   BRYNTUM NPM REGISTRY
npm error 403 --------------------------------------------------------
npm error 403 "user..yourdomain.com" only has access for trial packages
npm error 403 It is not allowed to install licensed package "@bryntum/schedulerpro"
npm error 403 Use "@bryntum/schedulerpro-trial" package instead or contact support
npm error 403 --------------------------------------------------------
npm error 403   Npm server login guide: https://npm.bryntum.com/help
npm error 403   Get support at: https://forum.bryntum.com/
npm error 403 --------------------------------------------------------
```

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

### Navigate to SharePoint Example Directory

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/integration/sharepoint

Change the current working directory to the SharePoint Fabric example folder.

```shell
cd examples/frameworks/react/typescript/sharepoint-fabric
```

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

### start()

Source: https://bryntum.com/products/schedulerpro/docs-llm/api/Grid/feature/export/consumer/ConsumerBase

Initiates the consumer operation. The exporter will wait for the consumer to be ready before proceeding.

```APIDOC
### start()

Initiates consumer operation. Exporter will wait for consumer to be ready.
```

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

### Install Dependencies

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/integration/sharepoint

Install the required project dependencies using npm.

```shell
npm i
```

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

### Install SQLite and EF Core Packages

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/integration/backends/dotnet/guide

Commands to install SQLite and the required Entity Framework Core packages for .NET.

```sh
brew install sqlite
```

```sh
dotnet add package Microsoft.EntityFrameworkCore.Sqlite
dotnet add package Microsoft.EntityFrameworkCore.Design
```

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

### Install project dependencies

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/quick-start/react

Commands to navigate to the project directory and install required Node.js modules including Sass.

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

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

### Run .NET Development Server

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/integration/backends/dotnet/guide

Command to start the .NET application.

```shell
dotnet run
```

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

### setup(provider)

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

Initializes the default StateProvider instance for the page. Accepts 'local' for localStorage or 'memory' for in-memory storage.

```APIDOC
### setup(provider)

Initializes the default `StateProvider` instance. 

**Parameters:**
- **provider** (string|object) - The provider type ('local' or 'memory') or an instance.
```

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

### getStartEndDatesFromRectangle

Source: https://bryntum.com/products/schedulerpro/docs-llm/api/Scheduler/view/mixin/TimelineDateMapper

Gets the start and end dates for an element Region.

```APIDOC
## getStartEndDatesFromRectangle(rectangle)

### Description
Gets the start and end dates for an element Region.
```

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

### Install Bryntum AI Agent Skills

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/ai-features/skills

Commands to install all available skills or specific framework-based skills into the local Claude configuration directory.

```bash
npx degit bryntum/skills/bryntum ~/.claude/skills/bryntum
npx degit bryntum/skills/bryntum-react ~/.claude/skills/bryntum-react
npx degit bryntum/skills/bryntum-angular ~/.claude/skills/bryntum-angular
npx degit bryntum/skills/bryntum-vue ~/.claude/skills/bryntum-vue
npx degit bryntum/skills/bryntum-vanilla ~/.claude/skills/bryntum-vanilla
npx degit bryntum/skills/bryntum-crud ~/.claude/skills/bryntum-crud
```

```bash
npx degit bryntum/skills/bryntum ~/.claude/skills/bryntum
npx degit bryntum/skills/bryntum-react ~/.claude/skills/bryntum-react
```

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

### dragStart

Source: https://bryntum.com/products/schedulerpro/docs-llm/api/Core/mixin/Draggable

Fired when a drag gesture has officially started.

```APIDOC
## dragStart

### Description
Fired when a drag gesture has started. This occurs after the dragThreshold amount of movement has been exceeded.
```

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

### Retrieve or Create Store Instances

Source: https://bryntum.com/products/schedulerpro/docs-llm/api/Core/data/Store

Demonstrates how to fetch an existing store by ID, create one from raw data, or instantiate a specific subclass using a configuration object.

```javascript
// Get a store by id
const store = Store.getStore('myStoreId');
```

```javascript
const store = Store.getStore([
    { id : 1, name : 'Linda', city : 'NY' },
    { id : 2, name : 'Olivia', city : 'Paris' },
    ...
]);
```

```javascript
const store = Store.getStore({
    type       : 'tree',
    modelClass : MyModel,
    data       : [
        { id : 1, name : 'Linda', city : 'NY' },
        { id : 2, name : 'Olivia', city : 'Paris' },
        ...
    ]
});
```

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

### Configure recurrentStartDate

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

Examples of defining recurrent start dates using string formats or the later.parse library.

```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 a ProjectModel instance

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/basics/project_data

Instantiate a project with a start date and initial inline data for events and dependencies.

```javascript
const project = new ProjectModel({
    startDate  : '2020-01-01',

    events : [
        { id : 1, name : 'Proof-read docs', startDate : '2020-01-02', endDate : '2020-01-09' },
        { id : 2, name : 'Release docs', startDate : '2020-01-09', endDate : '2020-01-10' }
    ],

    dependencies : [
        { fromEvent : 1, toEvent : 2 }
    ]
});
```

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

### getWidgetByRef(ref)

Source: https://bryntum.com/products/schedulerpro/docs-llm/api/Core/widget/Widget

Get a widget by ref, starts on self and traverses up the owner hierarchy checking widgetMap at each level.

```APIDOC
## getWidgetByRef(ref)

### Description
Get a widget by ref, starts on self and traverses up the owner hierarchy checking widgetMap at each level.
```

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

### Nested Events Data Structures

Source: https://bryntum.com/products/schedulerpro/docs-llm/api/SchedulerPro/feature/NestedEvents

Examples of defining parent-child event relationships using either explicit delayFromParent or calculated start dates.

```json
{
  "name" : "Parent",
  "startDate" : "2023-08-21", // Monday
  "children" : [
    { "name" : "Child 1", "delayFromParent" : 0 }
    { "name" : "Child 2", "delayFromParent" : 2 }
  ]
}
```

```json
{
 "name" : "Parent",
 "startDate" : "2023-08-21", // Monday
 "children" : [
   { "name" : "Child 1", "startDate" : "2023-08-21" },
   { "name" : "Child 2", "startDate" : "2023-08-23" }
 ]
}
```

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

### Initialize Next.js Project

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/quick-start/nextjs

Run this command to start the Next.js project creation process.

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

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

### Define dayColumnIndex mapping

Source: https://bryntum.com/products/schedulerpro/docs-llm/api/Core/util/Month

Example array mapping canonical day numbers to 0-6 column indices for a standard week starting on Monday.

```javascript
[ 6, 0, 1, 2, 3, 4, 5]
```

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

### Configure initial filters

Source: https://bryntum.com/products/schedulerpro/docs-llm/api/Core/data/mixin/StoreFilter

Examples showing how to define initial filters using property-based comparisons or custom filter functions.

```javascript
 // Configure the store to filter in clients over the age of 30
 new Store({
     ...,
     filters : [{
         property : 'age',
         value    : 30,
         operator : '>'
     }],
     ...
 })
```

```javascript
 // Configure the store to filter based on a complex operation
 new Store({
     ...,
     filters : [{
         filterBy(record) {
             // Return true or false for filtering in or out
             return shouldClientBeVisible(record);
         }
     }],
     ...
 })
```

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

### Install IVY wrapper package

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/integration/angular/guide

Install the recommended package for Angular 12 and newer.

```shell
npm install @bryntum/schedulerpro-angular@7.3.3
```

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

### Apply UI styling

Source: https://bryntum.com/products/schedulerpro/docs-llm/api/Core/widget/Widget

Examples of applying UI suffixes and targeting them with CSS.

```javascript
 new Panel({
     text : 'OK',
     ui   : 'light'
 });
```

```css
 .b-panel-content.b-panel-ui-light {
     background-color : #eee;
 }
```

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

### Example search_bryntum_docs response

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/ai-features/mcp-server

A sample output format returned by the search_bryntum_docs tool, including product metadata, relevance scores, and documentation links.

```txt
## Result 1
**Product:** schedulerpro
**Version:** 7.2.1
**File:** 
**Relevance:** 0.466

[zoomToSpan](https://bryntum.com/docs/schedulerpro/api/Scheduler/view/mixin/TimelineZoomable#function-zoomToSpan)
Sets time frame to specified range and applies zoom level which allows to fit all columns to this range.

The given time span will be centered in the scheduling view, in the same time, the start/end date of the whole time axis will be extended in the same way as [zoomToLevel](https://bryntum.com/docs/schedulerpro/api/#Scheduler/view/mixin/TimelineZoomable#function-zoomToLevel) method does, to allow scrolling for user.
...
```

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

### Perform a GET request

Source: https://bryntum.com/products/schedulerpro/docs-llm/api/Core/helper/AjaxHelper

Basic usage of the get method to retrieve data from a URL.

```javascript
const response = await AjaxHelper.get('some-url');
const data     = await response.json();
```

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

### Install Vue CLI

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

Execute the official Vue project scaffolding tool to initialize a new application.

```shell
npm create vue@latest
```

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

### Initialize Scheduler with ResourceStore

Source: https://bryntum.com/products/schedulerpro/docs-llm/api/Scheduler/view/Scheduler

Demonstrates how to instantiate a Scheduler with a pre-existing ResourceStore instance.

```javascript
let resourceStore = new ResourceStore({
  // ResourceStore config object
})

const scheduler = new Scheduler({
   // EventStore config object
   eventStore : {
      ...
   },

   // Already existing ResourceStore instance
   resourceStore
});
```

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

### setTimeSpan(start, end)

Source: https://bryntum.com/products/schedulerpro/docs-llm/api/Scheduler/data/TimeAxis

Changes the time axis timespan to the specified start and end dates.

```APIDOC
### setTimeSpan(start, end)

Changes the time axis timespan to the supplied start and end dates. Note: This does not preserve the temporal scroll position.
```

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

### Comprehensive StoreProxy usage example

Source: https://bryntum.com/products/schedulerpro/docs-llm/api/Core/data/mixin/StoreProxy

Demonstrates initialization, retrieval, addition, and deletion of records using the StoreProxy mixin.

```javascript
const store = new Store({
   objectify : true,
   data      : [
       { id : 'batman', name : 'Bruce' }
   ]
});

// retrieve using id as property
const record = store.batman;

// add as property
store.superman = { name : 'Clark' };

// delete to remove
delete store.batman;
```

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

### select(start, end)

Source: https://bryntum.com/products/schedulerpro/docs-llm/api/Core/widget/Field

Selects the field contents. Optionally may be passed a start and end.

```APIDOC
## select(start, end)

### Description
Selects the field contents. Optionally may be passed a start and end.
```

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

### Initialize with a project model

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/data/displayingdata

Use a ProjectModel to manage resources, events, and assignments collectively.

```javascript
// Inline project data
const schedulerpro = new SchedulerPro({
  project : {
    events      : [/*...*/],
    resources   : [/*...*/],
    assignments : [/*...*/]
  }
});

// - or -

const project = new ProjectModel({
  events      : [/*...*/],
  resources   : [/*...*/],
  assignments : [/*...*/]
});

const schedulerpro = new SchedulerPro({
  project
});
```

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

### Install Sass Dependency

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

Install the required sass package to support SCSS files in your project.

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

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

### Install Angular CLI

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/quick-start/angular

Global installation of the Angular CLI tool required for project scaffolding.

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

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

### Initialize Vite Project

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/integration/backends/dotnet/guide

Commands to create a new vanilla Vite project and install dependencies.

```sh
npm create vite@latest schedulerpro-frontend -- --template vanilla
cd schedulerpro-frontend
npm install
```

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

### Initialize a Store with data

Source: https://bryntum.com/products/schedulerpro/docs-llm/api/Core/data/Store

Demonstrates initializing a Store instance with an array of data objects.

```javascript
const store = new Store({
    data : [
        { id : 1, name : 'Linda', city : 'NY' },
        { id : 2, name : 'Olivia', city : 'Paris' },
        ...
    ]
});
```

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

### Install Bryntum SchedulerPro

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/integration/backends/dotnet/guide

Commands to install the SchedulerPro package for either trial or licensed versions.

```shell
npm install @bryntum/schedulerpro@npm:@bryntum/schedulerpro-trial
```

```shell
npm install @bryntum/schedulerpro
```

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

### Install View Engine wrapper package

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/integration/angular/guide

Install the legacy package for Angular 11 and older.

```shell
npm install @bryntum/schedulerpro-angular-view@7.3.3
```

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

### Example 404 Not Found error

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/npm/repository/troubleshooting

Output indicating the package manager is looking in the public registry instead of the private Bryntum registry.

```shell
Not Found - GET https://registry.npmjs.org/@bryntum%2fschedulerpro"
npm ERR! 404
npm ERR! 404 '@bryntum/schedulerpro@7.3.3' is not in the npm registry.
```

```shell
> YN0000: | Resolution step
> YN0035: | @bryntum/schedulerpro@npm:7.3.3: Package not found
> YN0035: |   Response Code: 404 (Not Found)
> YN0035: |   Request Method: GET
> YN0035: |   Request URL: https://registry.yarnpkg.com/@bryntum%schedulerpro
> YN0000: | Completed in 0s 303ms
```

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

### Initialize Toolbar with Items

Source: https://bryntum.com/products/schedulerpro/docs-llm/api/Core/widget/Toolbar

Demonstrates creating a Toolbar instance with a defined set of child widgets using an object configuration.

```javascript
 new Toolbar({
     appendTo : document.body
     items    : {
         button : {
             type : 'button',
             onClick() { ... }
         }
     }
 })
```

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

### Configure week start day

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/customization/localization

Sets the starting day of the week by modifying the DateHelper locale configuration.

```javascript
const locale = {
    DateHelper : {
        weekStartDay : 1 // 0-6 (0: Sunday, 1: Monday etc.)
    }
}
```

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

### Configuring Container values and bindings

Source: https://bryntum.com/products/schedulerpro/docs-llm/api/Core/widget/Container

Demonstrates initializing a container with items and setting their values using defaultBindProperty.

```javascript
const container = new Container({
    appendTo : document.body,
    items    : {
        firstName : {
            type : 'textfield
        },
        surName : {
            type : 'textfield
        }
        saveButton : {
            type                : 'button',
            text                : 'Save',
            defaultBindProperty : 'href'
            href                : '#'
        }
    }
});

container.values = {
    firstName  : 'Clark',
    surname    : 'Kent',
    saveButton : '#save-route'
};
```

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

### Install cross-env dependency

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/integration/angular/troubleshooting

Install the cross-env library to manage environment variables across different platforms.

```shell
nmp install cross-env --save-dev
```

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

### Initialize projects for synchronization

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/revisions/queue

Sets up two identical ProjectModel instances and waits for their initial calculations to complete.

```javascript
const sourceProject = new ProjectModel({ /* config */ });
const targetProject = new ProjectModel({ /* config */ });

await Promise.all([sourceProject.commitAsync(), targetProject.commitAsync()])
```

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

### GridSelection Configuration and Usage

Source: https://bryntum.com/products/schedulerpro/docs-llm/api/Grid/view/mixin/GridSelection

Examples of how to configure selection modes during Grid initialization and how to programmatically set selections.

```APIDOC
## GridSelection API

### Overview
The GridSelection mixin provides properties to manage selection state and a configuration object to define selection behavior.

### Properties
- **selectedRow** (number) - Sets or gets the selected row index.
- **selectedCell** (object) - Sets or gets the selected cell using { id, columnId }.
- **selectedRecord** (Model) - Sets or gets the selected record instance.
- **selectedRecords** (Array) - Sets or gets an array of selected record IDs.

### Configuration: selectionMode
Controls how selection functions within the grid.

- **cell** (boolean) - Enables cell selection.
- **dragSelect** (boolean) - Enables selection by dragging.
- **column** (boolean) - Enables column selection via header click.
- **rowNumber** (boolean) - Shows a row number column for selection.
- **checkboxOnly** (boolean) - Restricts selection to checkbox column only.
- **selectOnKeyboardNavigation** (boolean) - Toggles automatic selection during keyboard navigation.

### Usage Example
```javascript
// Programmatic selection
grid.selectedRow = 7;
grid.selectedCell = { id: 5, columnId: 'column1' };

// Configuration during initialization
new Grid({
    selectionMode : {
       cell       : true,
       dragSelect : true,
       column     : true,
       rowNumber  : true
    }
});
```
```

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

### Short Sync Response Examples

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/data/crud_manager_in_depth

Examples of minimal and standard short sync responses for the Crud Manager.

```json
{
  "success": true,
  "requestId": 576,
  "revision": 61
}
```

```json
{
  "requestId": 576,
  "revision": 61
}
```

```json
{
  "requestId": 576
}
```

```json
{
  "success": true,
  "requestId": 124,
  "revision": 6,
  "assignments": {
    "rows": [
      { "$PhantomId": "assignment-321", "id": 17, "assignedDT": "2024-02-15T08:47:33.345Z" }
    ],
    "removed": [
      { "id": 12 },
      { "id": 13 }
    ]
  },
  "events": {
    "removed": [
      { "id": 10001 }
    ]
  }
}
```

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

### Unsupported Calendar Rule Example

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/basics/calendareditor

An example of a composite schedule rule that is currently unsupported by the Calendar Editor.

```json
{
    "recurrentStartDate" : "at 8:00 except on Saturday and Sunday",
    "recurrentEndDate"   : "at 17:00 except on Saturday and Sunday",
    "isWorking"          : true
},
```

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

### Access store at runtime

Source: https://bryntum.com/products/schedulerpro/docs-llm/api/Grid/view/GridBase

Demonstrates interacting with the grid's store instance after initialization.

```javascript
grid.store.sort('powers');
```

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

### Initialize Scheduler with Default Features and Settings

Source: https://bryntum.com/products/schedulerpro/docs-llm/api/Scheduler/view/Scheduler

Demonstrates the instantiation of a Scheduler instance with a comprehensive list of enabled features and configuration properties.

```javascript
const scheduler = new Scheduler({
   // The following features are enabled by default:
   features : {
       cellEdit            : true, // Cell editing in the columns part
       columnLines         : true, // Column lines in the schedule part
       columnPicker        : true, // Header context menu item to toggle visible columns
       columnReorder       : true, // Reorder columns in grid part using drag and drop
       columnResize        : true, // Resize columns in grid part using the mouse
       cellMenu            : true, // Context menu for cells in the grid part
       eventMenu           : true, // Context menu for events
       eventDrag           : true, // Dragging events
       eventDragCreate     : true, // Drag creating events
       eventEdit           : true, // Event editor dialog
       eventFilter         : true, // Filtering events using header context menu
       eventCopyPaste      : true, // Allow using [Ctrl/CMD + C/X] and [Ctrl/CMD + V] to copy/cut and paste events
       eventResize         : true, // Resizing events using the mouse
       eventTooltip        : true, // Tooltips for events
       group               : true, // Row grouping
       headerMenu          : true, // Context menu for headers in the grid part
       timeAxisHeaderMenu  : true, // Header context menu for schedule part
       scheduleMenu        : true, // Context menu for empty parts of the schedule
       scheduleTooltip     : true, // Tooltip for empty parts of the schedule
       sort                : true  // Row sorting
   },

   // From Grid
   autoHeight                : false, // Grid needs to have a height supplied through CSS (strongly recommended) or by specifying `height
   columnLines               : true,  // Grid part, themes might override it to hide lines anyway
   emptyText                 : 'No rows to display',
   enableTextSelection       : false, // Not allowed to select text in cells by default,
   fillLastColumn            : true,  // By default the last column is stretched to fill the grid
   fullRowRefresh            : true,  // Refreshes entire row when a cell value changes
   loadMask                  : 'Loading...',
   resizeToFitIncludesHeader : true,  // Also measure header when auto resizing columns
   responsiveLevels : {
     small : 400,
     medium : 600,
     large : '*'
   },
   rowHeight                  : 60,    // Scheduler specifies a default rowHeight in pixels
   showDirty                  : false, // No indicator for changed cells

   // Scheduler specific
   autoAdjustTimeAxis             : true,      // startDate & endDate will be adjusted to display a suitable range
   allowOverlap                   : true,      // Events are allowed to overlap (overlays, stacks or packs depending on eventLayout)
   barMargin                      : 10,        // Space above + below each event
   createEventOnDblClick          : true,      // Allow creating new events by double clicking empty space
   enableDeleteKey                : true,      // Allow deleting events with delete / backspace keys
   eventBarTextField              : 'name',    // Field on EventModel to display in events
   eventColor                     : 'green',   // Use green as default color for events
   eventLayout                    : 'stack',   // Stack overlapping events by default
   eventStyle                     : 'plain',   // Use plain as default style for events
   managedEventSizing             : true,      // Calculate event sizes based on rowHeight & barMargin
   milestoneCharWidth             : 10,
   milestoneLayoutMode            : 'default',
   useInitialAnimation            : true,      // Fade in events initially
   viewPreset                     : 'weekAndDayLetter',
   zoomOnMouseWheel               : true,
   zoomOnTimeAxisDoubleClick      : true
});
```

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

### Install Specific Nightly Version

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/npm/repository/installation

Command to install a specific nightly build using the package name and version.

```shell
npm install @bryntum/schedulerpro@6.1.8-nightly.20250330
```

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

### Enable and Control QuickFind

Source: https://bryntum.com/products/schedulerpro/docs-llm/api/Grid/feature/QuickFind

Shows how to enable the QuickFind feature in the Grid configuration and how to programmatically navigate to the next search hit.

```javascript
// enable QuickFind
const grid = new Grid({
  features: {
    quickFind: true
  }
});

// navigate to next hit programmatically
grid.features.quickFind.gotoNextHit();
```

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

### CSS Class Emulation Example

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/integration/angular/guide

Example of how Angular's Emulated encapsulation modifies CSS class names.

```css
.b-button {
  color : var(--b-color-blue);
}
```

```css
.b-button[_ngcontent-ng-c2992155993] {
    color : var(--b-color-blue);
}
```

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

### Initialize .NET Web API Project

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/integration/backends/dotnet/guide

Commands to create a new .NET Web API project and navigate into the directory.

```sh
dotnet new webapi -n dotnet-sqlite-schedulerpro
cd dotnet-sqlite-schedulerpro
```

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

### Configuring Selection Mode

Source: https://bryntum.com/products/schedulerpro/docs-llm/api/Grid/view/mixin/GridSelection

Shows how to initialize the Grid with specific selection behaviors.

```javascript
new Grid({
    selectionMode : {
       // Enables cell selection
       cell       : true,
       // Enabled cell and record selection by dragging
       dragSelect : true,
       // Enables selection of a column's cells by clicking the column header
       column     : true,
       // Shows a row number column which, when clicked, selected the row/record
       rowNumber  : true
    }
});
```

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

### Populate stores with example data

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/data/displayingdata

Example of calling loadCrudManagerData with a populated data object containing events, resources, and assignments.

```javascript
schedulerpro.crudManager.loadCrudManagerData({
   events : {
      rows : [
         { id : 1, name : 'Important meeting', startDate : '2053-10-23', duration : 1 }, 
         { id : 2, name : 'Travel', startDate : '2053-10-24', duration : 4 }
      ]
   },
   resources : {
      rows : [
         { id : 1, name : 'Hillinghead' },
         { id : 2, name : 'Hasan' }
      ]
   },
   assignments : {
      rows : [
         { id : 1, resourceId : 1, eventId : 1 },
         { id : 2, resourceId : 1, eventId : 2 },
         { id : 3, resourceId : 2, eventId : 2 }
      ]
   }
});
```

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

### Map Ext Scheduler configuration to Bryntum Scheduler

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/Scheduler/migration/extscheduler-to-bryntumscheduler

Examples showing the transformation of configuration objects from the legacy Ext JS version to the modern Bryntum Scheduler format.

```javascript
    title                 : 'Scheduler with event editor',
    rowHeight             : 40,
    snapToIncrement       : true,
    border                : false,
    colorResources        : false,
    forceFit              : true,
    viewPreset            : 'hourAndDay',
    createEventOnDblClick : true,
    lockedGridConfig      : {
        width : 300
    },
```

```javascript
    appendTo   : 'container', // scheduler container element id
    rowHeight  : 50,
    barMargin  : 5,
    snap       : true,
    viewPreset : 'hourAndDay',
    subGridConfigs : { locked : { width : 300 } }
```

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

### StateProvider.setup(config)

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

Configures and creates the global state provider instance. The storage type can be set to 'local' for browser storage or 'memory' for custom server-side persistence.

```APIDOC
## StateProvider.setup(config)

### Description
Initializes the global state provider. This method determines how stateful components persist their data.

### Parameters
- **config** (String|Object) - Required. If a string, it sets the storage type ('local' or 'memory'). If an object, it can contain 'storage' and 'prefix' properties.

### Usage Example
```javascript
// Using local storage with default prefix
StateProvider.setup('local');

// Using local storage with custom prefix
StateProvider.setup({
    storage : 'local',
    prefix  : 'myApp-v1:'
});

// Using memory storage
StateProvider.setup('memory');
```
```

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

### Full Sync Response Example

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/data/crud_manager_in_depth

Example of a full sync response, which requires all records sent in the sync request to be listed.

```json
{
  "success": true,
  "requestId": 124,
  "revision": 6,
  "events": {
    "rows": [
      { "id": 65 }
    ],
    "removed": [
      { "id": 9000 }
    ]
  },
  "assignments": {
    "rows": [
      { "$PhantomId": "assignment-321", "id": 17, "assignedDT": "2024-02-15T08:47:33.345Z" }
    ],
    "removed": [
      { "id": 3 },
      { "id": 4 }
    ]
  }
}
```

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

### Create a Remix application

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

Initialize a new Remix project using the create-remix CLI.

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

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

### DST Adjustment Examples

Source: https://bryntum.com/products/schedulerpro/docs-llm/api/SchedulerPro/model/ProjectModel

Examples demonstrating how adjustDurationToDST affects event duration and end date calculations during DST transitions.

```javascript
{
    startDate    : '2020-10-20',
    duration     : 10 * 24 + 1,
    durationUnit : 'hour'
}
```

```javascript
{
    calendar         : 1,
    calendars    : [
        {
            id           : 1,
            startDate    : '2020-10-26',
            endDate      : '2020-10-27',
            isWorking    : false
        }
    ],
    events       : [
        {
            id           : 1,
            startDate    : '2020-10-20',
            endDate      : '2020-10-30'
        },
        {
            id           : 2,
            startDate    : '2020-10-20',
            duration     : 10 * 24 + 1,
            durationUnit : 'hour'
        }
    ]
}
```

```javascript
eventStore.getById(1).getDuration('day')  // 10.041666666666666
eventStore.getById(1).getDuration('hour') // 241
```

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

### Install Scheduler Pro package

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

Installs the Scheduler Pro package. Choose the trial version or the licensed version based on your access.

```shell
npm install @bryntum/schedulerpro@npm:@bryntum/schedulerpro-trial@7.3.3
```

```shell
npm install @bryntum/schedulerpro@7.3.3
```

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

### Accessing and iterating over VersionStore

Source: https://bryntum.com/products/schedulerpro/docs-llm/api/SchedulerPro/data/VersionStore

Demonstrates how to enable the versions feature and access the versionStore to list saved project snapshots.

```javascript
const schedulerPro = new SchedulerPro({
    features : {
        versions : true
    }
});

// Access the version store via the Versions feature
const { versionStore } = schedulerPro.features.versions;

// List saved versions
versionStore.forEach(version => {
    console.log(version.name, version.savedAt);
});
```

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

### Initialize ProjectModel with JSON

Source: https://bryntum.com/products/schedulerpro/docs-llm/api/Scheduler/model/mixin/ProjectModelCommon

Populate project stores using a JSON string.

```javascript
const project = new ProjectModel({
    json : '{"events":[...],"resources":[...],...}'
}
```

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

### Revision Synchronization Example

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/revisions/protocol

Example showing how the client sends revisions with phantom IDs and how the server responds with assigned real IDs.

```javascript
// client sends two revisions with the same record
[
    {
        localRevisionId: 'local-1',
        clientId: 'client-1',
        changes: {
            tasks: {
                added: [
                    { $PhantomId: 'phantom-1', name: 'Task 1' }
                ]
            }
        }
    },
    {
        localRevisionId: 'local-2',
        clientId: 'client-1',
        changes: {
            tasks: {
                added: [
                    { $PhantomId: 'phantom-1', name: 'Task 1 (updated)' }
                ]
            }
        }
    }
]

// Server should broadcast these two revsions in response
[
    {
        revisionId: 'server-1',
        localRevisionId: 'local-1',
        clientId: 'client-1',
        changes: {
            tasks: {
                added: [
                    { $PhantomId: 'phantom-1', id : 1, name: 'Task 1' }
                ]
            }
        }
    },
    {
        revisionId: 'server-2',
        localRevisionId: 'local-2',
        clientId: 'client-1',
        changes: {
            tasks: {
                added: [
                    { $PhantomId: 'phantom-1', id : 1, name: 'Task 1 (updated)' }
                ]
            }
        }
    }
]
```

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

### Implement feature setup logic

Source: https://bryntum.com/products/schedulerpro/docs-llm/api/Grid/feature/GridFeatureManager

Use the construct method to initialize event listeners or other setup logic after the feature is plugged into the component.

```javascript
   construct(client, config) {
+      EventHelper.on({
+          element   : client.element,
+          thisObj   : this,
+          click     : this.clickCounter,
+          mouseover : this.trackMouse,
+      });
   }

+   clickCounter() {}

+   trackMouse() {}
```

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

### Configuring postinstall for theme assets

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/integration/react/guide

Use the postinstall script in package.json to copy theme files to the public directory.

```json
{
  "scripts"         : {
    "postinstall" : "postinstall"
  },
  "postinstall"     : {
    "node_modules/@bryntum/schedulerpro/*.css*" : "copy public/themes/",
    "node_modules/@bryntum/schedulerpro/fonts"  : "copy public/themes/fonts"
  },
  "devDependencies" : {
    "postinstall" : "~0.7.0"
  }
}
```

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

### Configure resourceMargin with start and end values

Source: https://bryntum.com/products/schedulerpro/docs-llm/api/Scheduler/model/mixin/ResourceModelMixin

Define specific margins for the start and end of a resource row or column using an object configuration.

```javascript
scheduler = new Scheduler({
    resourceMargin : {
        start : 15,
        end   : 1
    }
});
```

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

### Create index.html structure

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/quick-start/javascript

The base HTML file required to host the Bryntum Scheduler Pro component.

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

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

### Start Local Workbench

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/integration/sharepoint

Launch the local SharePoint workbench to test the web part.

```shell
npx gulp serve
```

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

### Install Scheduler Pro via Package Manager

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/npm/repository/installation

Commands to install specific versions of the Scheduler Pro core and Angular wrapper packages.

```shell
npm install @bryntum/schedulerpro@7.3.3
npm install @bryntum/schedulerpro-angular@7.3.3
```

```shell
yarn add @bryntum/schedulerpro@7.3.3
yarn add @bryntum/schedulerpro-angular@7.3.3
```

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

### Using UMD Bundles

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/integration/javascript/multiple-products

Demonstrates loading the legacy UMD bundle via a script tag and accessing classes from the global window object.

```html
<!-- Script tag in your html file -->
<script src="scheduler.umd.js"></script>
```

```javascript
// No imports needed, classes are exposed to window.bryntum.scheduler
const { Store, Grid, SchedulerPro } = window.bryntum.scheduler;
```

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

### Install View Engine with npm aliasing

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/integration/angular/guide

Install the View Engine package using npm aliasing to maintain standard import paths.

```shell
npm install @bryntum/schedulerpro-angular@npm@bryntum/schedulerpro-angular-view@7.3.3
```

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

### Date Formatting Examples

Source: https://bryntum.com/products/schedulerpro/docs-llm/api/Grid/column/DateColumn

Demonstrates how date formatting behaves based on browser locale using Intl.DateTimeFormat and the Bryntum DateHelper utility.

```javascript
// These options represent `L` format
const options = { year : 'numeric', month : '2-digit', day : '2-digit' };

new Intl.DateTimeFormat('en-US', options).format(new Date(2021, 6, 1)); // "07/01/2021"
new Intl.DateTimeFormat('ru-RU', options).format(new Date(2021, 6, 1)); // "01.07.2021"

// Formatting using Bryntum API
LocaleManager.applyLocale('En');
DateHelper.format(new Date(2021, 6, 1), 'L'); // "07/01/2021"
LocaleManager.applyLocale('Ru');
DateHelper.format(new Date(2021, 6, 1), 'L'); // "01.07.2021"
```

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

### Initialize GridBase with specific features

Source: https://bryntum.com/products/schedulerpro/docs-llm/api/Grid/view/GridBase

Demonstrates how to instantiate GridBase while explicitly enabling only the required features to maintain a smaller bundle size.

```javascript
import GridBase from 'lib/Grid/view/GridBase.js';
import Sort from 'lib/Grid/feature/Sort.js';

const grid = new GridBase({
    appendTo : document.body,
    features : {
        sort : true  // Only this feature is included in the bundle
    },
    columns : [
        { field : 'name', text : 'Name' }
    ],
    data : [
        { name : 'Dan' },
        { name : 'Steve' }
    ]
});
```

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

### Handle drag start event

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/Scheduler/dragdrop/drag_from_grid

Configures the drag start process by storing the dragged task reference, disabling tooltips, and enabling edge scrolling.

```javascript
onDragStart({ context }) {
    const
        me                          = this,
        { schedule }                = me,
        { eventTooltip, eventDrag } = schedule.features;

    // save a reference to the task so we can access it later
    context.task = me.grid.getRecordFromElement(context.grabbed);
  
    // Prevent tooltips from showing while dragging
    eventTooltip.disabled = true;
  
    schedule.enableScrollingCloseToEdges(schedule.timeAxisSubGrid);
}
```

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

### Chaining and ordering queue steps

Source: https://bryntum.com/products/schedulerpro/docs-llm/guide/SchedulerPro/revisions/queue

Examples of how queue steps are executed and how to ensure specific ordering by wrapping promise chains.

```javascript
await project.queue(() => console.log(1))
await project.queue(() => console.log(2))
// logs: 1, 2

// this will log: 1, 2, 3, 4
await project.queue(() => console.log(1)).then(() => console.log(2));
await project.queue(() => console.log(3)).then(() => console.log(4));

// however, if you create a chain of promises and don't await for them order might be
// other than you expect. this one would log: 1, 2, 4, 3, 5, 6
project.queue(() => console.log(1)).then(() => console.log(2)).then(() => console.log(3));
project.queue(() => console.log(4)).then(() => console.log(5)).then(() => console.log(6));

// if you want specific order you should wrap entire promise chain to a step
// this will log: 1, 2, 3, 4, 5, 6
project.queue(() => {
    return Promise.resolve().then(() => console.log(1)).then(() => console.log(2)).then(() => console.log(3));
});
project.queue(() => {
    return Promise.resolve().then(() => console.log(4)).then(() => console.log(5)).then(() => console.log(6));
});
```

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

### getRowFromElement

Source: https://bryntum.com/products/schedulerpro/docs-llm/api/Grid/row/RowManager

Get a Row from an HTMLElement.

```APIDOC
### getRowFromElement

Get a Row from an HTMLElement.
```

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

### setStartDate

Source: https://bryntum.com/products/schedulerpro/docs-llm/api/Scheduler/view/TimelineBase

Sets the timeline start date.

```APIDOC
## setStartDate(date)

### Description
Sets the timeline start date. If keepDuration is false and new start date is greater than end date, it will throw an exception.
```

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

### Create a new Vite project

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

Initializes a new vanilla JavaScript project using the Vite CLI.

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