<br>
<br>

<p align="center">
  <a href="https://bryntum.com/" rel="noopener" target="_blank"><img height="50" src="https://bryntum.com/resources/bryntum_logo_blue.svg" alt="Bryntum logo"></a>
</p>

<br>

# Bryntum Scheduler Pro (Trial)

Bryntum Scheduler Pro is a full-featured resource scheduler supporting a wide range of functionality. It integrates smoothly with React, Vue, Angular, or plain vanilla JS.

For more information about Bryntum Scheduler Pro, visit the [Bryntum Scheduler Pro site](https://bryntum.com/products/schedulerpro/)

<p align="center">
    <img src="https://bryntum.com/products/schedulerpro/examples/meta/thumb.2048.png" alt="Bryntum Scheduler Pro Screenshot" width="600">
</p>

## Highlights

* Professional [scheduling engine](https://bryntum.com/products/schedulerpro/examples/inline-data) runs in browser or server-side on Node.js for complex constraint-based scheduling
* [Automatic dependency management](https://bryntum.com/products/schedulerpro/examples/dependencies) with cascading updates through task networks
* [Resource histogram](https://bryntum.com/products/schedulerpro/examples/resourcehistogram) visualizes allocation peaks and highlights overloaded resources
* [Skill-based assignments](https://bryntum.com/products/schedulerpro/examples/skill-matching) match tasks to resources by required capabilities
* [Nested event support](https://bryntum.com/products/schedulerpro/examples/nested-events-dependencies) for parent-child relationships and complex workflows
* [Travel time accounting](https://bryntum.com/products/schedulerpro/examples/travel-time) factors in commute between locations for realistic planning
* [Conflict resolution](https://bryntum.com/products/schedulerpro/examples/conflicts) detects scheduling conflicts with smart resolution suggestions
* [Calendar-aware scheduling](https://bryntum.com/products/schedulerpro/examples/calendar-editor) with work hours, holidays, and shift constraints
* [Constraint handling](https://bryntum.com/products/schedulerpro/examples/constraints) enforces start-no-earlier-than and other project rules
* [Customizable task editor](https://bryntum.com/products/schedulerpro/examples/taskeditor) with tabs for events, resources, and dependencies
* [Heatmap visualization](https://bryntum.com/products/schedulerpro/examples/tree-summary-heatmap) shows resource utilization intensity in tree summaries
* [React](https://bryntum.com/products/schedulerpro/examples/?framework=react), [Vue](https://bryntum.com/products/schedulerpro/examples/?framework=vue), and [Angular](https://bryntum.com/products/schedulerpro/examples/?framework=angular) wrappers with native framework patterns

## Package Contents

| Path                                  | Description                                    |
|---------------------------------------|------------------------------------------------|
| `fonts/`                              | Poppins, Montserrat, and RobotoFlex fonts      |
| `fontawesome/`                        | FontAwesome icons and webfonts                 |
| `locales/`                            | Localization files for 30+ languages           |
| `schedulerpro.module.js`, `schedulerpro.umd.js` | JavaScript bundles (ES module and UMD formats) |
| `schedulerpro.css`                         | Structural CSS (required)                      |
| `*.d.ts`                              | TypeScript type definitions                    |
| `*.css`                               | Theme stylesheets                              |

**Note:** Trial packages do not include minified bundles, source maps, or source files.

## Supported Versions

* [NodeJS](https://nodejs.org/en): `>= 20.0.0`
* [TypeScript](https://www.typescriptlang.org/): `>= 3.6.0`
* [Angular](https://angularjs.org/): `>= 9.0.0`
* [React](https://react.dev/): `>= 16.0.0`
* [Vue](https://vuejs.org/): `>= 3.0.0`
* [Ionic](https://ionicframework.com/): `>= 5.0.0`
* [Vite](https://vite.dev/): `>= 4.0.0`
* [Webpack](https://webpack.js.org/): `>= 4.0.0`

## Try Bryntum Online Demos

Explore our comprehensive collection of demos:

* [View Online Demos](https://bryntum.com/products/schedulerpro/examples/)
* [JavaScript Demos](https://bryntum.com/products/schedulerpro/examples/?framework=javascript)
* [React Demos](https://bryntum.com/products/schedulerpro/examples/?framework=react)
* [Vue Demos](https://bryntum.com/products/schedulerpro/examples/?framework=vue)
* [Angular Demos](https://bryntum.com/products/schedulerpro/examples/?framework=angular)

## Installation

This is a **trial package** with limited functionality.

### Why Use npm Aliasing?

Trial packages use npm aliasing to install `@bryntum/schedulerpro-trial` under the `@bryntum/schedulerpro` name. This approach
provides a seamless upgrade path - when you purchase a license, you only need to update the alias in `package.json`
without changing any application code.

Install using `npm`:

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

Or using `yarn`:

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

Alternatively, add to `package.json` dependencies:

```json
"dependencies": {
  "@bryntum/schedulerpro": "npm:@bryntum/schedulerpro-trial@latest"
}
```

Visit our [npm repository guide](https://bryntum.com/products/schedulerpro/docs/guide/SchedulerPro/npm-repository) to learn more about installation and migrating from
trial to licensed packages.

## Quick Start

### Vanilla JavaScript

```javascript
import { SchedulerPro } from '@bryntum/schedulerpro';
import './style.css';

const schedulerPro = new SchedulerPro({
    appendTo  : 'app',
    startDate  : new Date(2026, 0, 1),
    endDate    : new Date(2026, 1, 10),
    rowHeight  : 60,
    barMargin  : 15,
    eventStyle : 'colored',
    viewPreset : 'hourAndDay',
    columns    : [
        { text : 'Name', field : 'name', width : 160 }
    ],
    project : {

        resources : [
            { id : 1, name : 'Dan Stevenson' },
            { id : 2, name : 'Talisha Babin' },
            { id : 3, name : 'Michael Chen' },
            { id : 4, name : 'Sophia Rodriguez' },
            { id : 5, name : 'Arjun Mehta' }
        ],
        events : [
            { id : 1,  startDate : '2026-01-01', duration : 3, durationUnit : 'd', name : 'Project Kickoff' },
            { id : 2,  startDate : '2026-01-04', duration : 4, durationUnit : 'd', name : 'Requirement Gathering' },
            { id : 3,  startDate : '2026-01-08', duration : 5, durationUnit : 'd', name : 'UI/UX Design' },
            { id : 4,  startDate : '2026-01-13', duration : 7, durationUnit : 'd', name : 'Backend Development' },
            { id : 5,  startDate : '2026-01-20', duration : 6, durationUnit : 'd', name : 'Frontend Development' },
            { id : 6,  startDate : '2026-01-26', duration : 4, durationUnit : 'd', name : 'API Integration' },
            { id : 7,  startDate : '2026-01-30', duration : 3, durationUnit : 'd', name : 'Testing & QA' },
            { id : 8,  startDate : '2026-02-02', duration : 2, durationUnit : 'd', name : 'Client Review' },
            { id : 9,  startDate : '2026-02-04', duration : 3, durationUnit : 'd', name : 'Bug Fixing' },
            { id : 10, startDate : '2026-02-07', duration : 2, durationUnit : 'd', name : 'Final Deployment' }
        ],
        assignments : [
            { event : 1,  resource : 1 },
            { event : 2,  resource : 2 },
            { event : 3,  resource : 3 },
            { event : 4,  resource : 4 },
            { event : 5,  resource : 5 },
            { event : 6,  resource : 3 },
            { event : 7,  resource : 2 },
            { event : 8,  resource : 1 },
            { event : 9,  resource : 4 },
            { event : 10, resource : 5 }
        ],
        dependencies : [
            { fromEvent : 1, toEvent : 2 },
            { fromEvent : 2, toEvent : 3 },
            { fromEvent : 3, toEvent : 4 },
            { fromEvent : 4, toEvent : 5 },
            { fromEvent : 5, toEvent : 6 },
            { fromEvent : 6, toEvent : 7 },
            { fromEvent : 7, toEvent : 8 },
            { fromEvent : 8, toEvent : 9 },
            { fromEvent : 9, toEvent : 10 }
        ]
    }
});
```

In the `style.css`:

```css
/* FontAwesome is used for icons */
@import "@bryntum/schedulerpro/fontawesome/css/fontawesome.css";
@import "@bryntum/schedulerpro/fontawesome/css/solid.css";
/* Structural CSS */
@import "@bryntum/schedulerpro/schedulerpro.css";
/* Bryntum theme of your choice */
@import "@bryntum/schedulerpro/svalbard-light.css";
```

Visit our JavaScript [Quick Start guide](https://bryntum.com/products/schedulerpro/docs/guide/SchedulerPro/quick-start/javascript-npm) to learn more.

## Themes

### Svalbard (default)

| Light                                                                                      | Dark                                                                                     |
|--------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------|
| <a href="https://bryntum.com/products/schedulerpro/examples/skill-matching/?theme=svalbard-light"><img src="https://bryntum.com/products/scheduler/docs/data/Scheduler/images/themes/thumb.svalbard-light.png" alt="Svalbard Light" width="300"></a> | <a href="https://bryntum.com/products/schedulerpro/examples/skill-matching/?theme=svalbard-dark"><img src="https://bryntum.com/products/scheduler/docs/data/Scheduler/images/themes/thumb.svalbard-dark.png" alt="Svalbard Dark" width="300"></a> |

### Stockholm

| Light                                                                                        | Dark                                                                                       |
|----------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------|
| <a href="https://bryntum.com/products/schedulerpro/examples/skill-matching/?theme=stockholm-light"><img src="https://bryntum.com/products/scheduler/docs/data/Scheduler/images/themes/thumb.stockholm-light.png" alt="Stockholm Light" width="300"></a> | <a href="https://bryntum.com/products/schedulerpro/examples/skill-matching/?theme=stockholm-dark"><img src="https://bryntum.com/products/scheduler/docs/data/Scheduler/images/themes/thumb.stockholm-dark.png" alt="Stockholm Dark" width="300"></a> |

### Visby

| Light                                                                                | Dark                                                                               |
|--------------------------------------------------------------------------------------|------------------------------------------------------------------------------------|
| <a href="https://bryntum.com/products/schedulerpro/examples/skill-matching/?theme=visby-light"><img src="https://bryntum.com/products/scheduler/docs/data/Scheduler/images/themes/thumb.visby-light.png" alt="Visby Light" width="300"></a> | <a href="https://bryntum.com/products/schedulerpro/examples/skill-matching/?theme=visby-dark"><img src="https://bryntum.com/products/scheduler/docs/data/Scheduler/images/themes/thumb.visby-dark.png" alt="Visby Dark" width="300"></a> |

### Material 3

| Light                                                                                         | Dark                                                                                        |
|-----------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------|
| <a href="https://bryntum.com/products/schedulerpro/examples/skill-matching/?theme=material3-light"><img src="https://bryntum.com/products/scheduler/docs/data/Scheduler/images/themes/thumb.material3-light.png" alt="Material 3 Light" width="300"></a> | <a href="https://bryntum.com/products/schedulerpro/examples/skill-matching/?theme=material3-dark"><img src="https://bryntum.com/products/scheduler/docs/data/Scheduler/images/themes/thumb.material3-dark.png" alt="Material 3 Dark" width="300"></a> |

### High Contrast

| Light                                                                                                | Dark                                                                                               |
|------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------|
| <a href="https://bryntum.com/products/schedulerpro/examples/skill-matching/?theme=high-contrast-light"><img src="https://bryntum.com/products/scheduler/docs/data/Scheduler/images/themes/thumb.high-contrast-light.png" alt="High Contrast Light" width="300"></a> | <a href="https://bryntum.com/products/schedulerpro/examples/skill-matching/?theme=high-contrast-dark"><img src="https://bryntum.com/products/scheduler/docs/data/Scheduler/images/themes/thumb.high-contrast-dark.png" alt="High Contrast Dark" width="300"></a> |

### Fluent 2

| Light                                                                                     | Dark                                                                                    |
|-------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------|
| <a href="https://bryntum.com/products/schedulerpro/examples/skill-matching/?theme=fluent2-light"><img src="https://bryntum.com/products/scheduler/docs/data/Scheduler/images/themes/thumb.fluent2-light.png" alt="Fluent 2 Light" width="300"></a> | <a href="https://bryntum.com/products/schedulerpro/examples/skill-matching/?theme=fluent2-dark"><img src="https://bryntum.com/products/scheduler/docs/data/Scheduler/images/themes/thumb.fluent2-dark.png" alt="Fluent 2 Dark" width="300"></a> |

For more information on customizing themes, see the [Styling guide](https://bryntum.com/products/schedulerpro/docs/guide/SchedulerPro/customization/styling).

## Framework Integrations

Bryntum Scheduler Pro provides first-class wrappers for popular frameworks. Each wrapper follows native framework patterns
and lifecycle management.

**Note:** The framework wrappers are public and can be installed normally. They require the core package to be present.

### React

```shell
npm install @bryntum/schedulerpro-react@latest
```

Visit our [React Quick Start guide](https://bryntum.com/products/schedulerpro/docs/guide/SchedulerPro/quick-start/react) to learn more.

### Angular

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

Visit our [Angular Quick Start guide](https://bryntum.com/products/schedulerpro/docs/guide/SchedulerPro/quick-start/angular) to learn more.

### Vue 3

```shell
npm install @bryntum/schedulerpro-vue-3@latest
```

Visit our [Vue Quick Start guide](https://bryntum.com/products/schedulerpro/docs/guide/SchedulerPro/quick-start/vue-3) to learn more.

## Explore All Bryntum Products

* [Bryntum Grid](https://bryntum.com/products/grid/) - High-performance data grid
* [Bryntum Scheduler](https://bryntum.com/products/scheduler/) - Resource scheduling component
* [Bryntum Scheduler Pro](https://bryntum.com/products/schedulerpro/) - Advanced scheduling with dependencies
* [Bryntum Gantt](https://bryntum.com/products/gantt/) - Project planning and management
* [Bryntum Calendar](https://bryntum.com/products/calendar/) - Full-featured calendar component
* [Bryntum TaskBoard](https://bryntum.com/products/taskboard/) - Kanban-style task management

Explore our comprehensive collection of demos:

| Product           |   <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/js.svg" alt="JavaScript" width="30"><br>JavaScript    |  <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/react.svg" alt="React" width="30"><br>React  |   <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/vue.svg" alt="Vue" width="30"><br>Vue   | <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/angular.svg" alt="Angular" width="30"><br>Angular |
|-------------------|:------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------:|:----------------------------------------------------------------------:|:------------------------------------------------------------------------------:|
| **Grid**          |         [Grid JavaScript demos](https://bryntum.com/products/grid/examples/?framework=javascript)          |         [Grid React demos](https://bryntum.com/products/grid/examples/?framework=react)          |         [Grid Vue demos](https://bryntum.com/products/grid/examples/?framework=vue)          |         [Grid Angular demos](https://bryntum.com/products/grid/examples/?framework=angular)          |
| **Scheduler**     |    [Scheduler JavaScript demos](https://bryntum.com/products/scheduler/examples/?framework=javascript)     |    [Scheduler React demos](https://bryntum.com/products/scheduler/examples/?framework=react)     |    [Scheduler Vue demos](https://bryntum.com/products/scheduler/examples/?framework=vue)     |    [Scheduler Angular demos](https://bryntum.com/products/scheduler/examples/?framework=angular)     |
| **Scheduler Pro** | [Scheduler Pro JavaScript demos](https://bryntum.com/products/schedulerpro/examples/?framework=javascript) | [Scheduler Pro React demos](https://bryntum.com/products/schedulerpro/examples/?framework=react) | [Scheduler Pro Vue demos](https://bryntum.com/products/schedulerpro/examples/?framework=vue) | [Scheduler Pro Angular demos](https://bryntum.com/products/schedulerpro/examples/?framework=angular) |
| **Gantt**         |        [Gantt JavaScript demos](https://bryntum.com/products/gantt/examples/?framework=javascript)         |        [Gantt React demos](https://bryntum.com/products/gantt/examples/?framework=react)         |        [Gantt Vue demos](https://bryntum.com/products/gantt/examples/?framework=vue)         |        [Gantt Angular demos](https://bryntum.com/products/gantt/examples/?framework=angular)         |
| **Calendar**      |     [Calendar JavaScript demos](https://bryntum.com/products/calendar/examples/?framework=javascript)      |     [Calendar React demos](https://bryntum.com/products/calendar/examples/?framework=react)      |     [Calendar Vue demos](https://bryntum.com/products/calendar/examples/?framework=vue)      |     [Calendar Angular demos](https://bryntum.com/products/calendar/examples/?framework=angular)      |
| **TaskBoard**     |    [TaskBoard JavaScript demos](https://bryntum.com/products/taskboard/examples/?framework=javascript)     |    [TaskBoard React demos](https://bryntum.com/products/taskboard/examples/?framework=react)     |    [TaskBoard Vue demos](https://bryntum.com/products/taskboard/examples/?framework=vue)     |    [TaskBoard Angular demos](https://bryntum.com/products/taskboard/examples/?framework=angular)     |

## Online references

* [Bryntum Scheduler Pro documentation](https://bryntum.com/products/schedulerpro/docs/)
* [Bryntum Scheduler Pro examples](https://bryntum.com/products/schedulerpro/examples/)

* [Bryntum Support Forum](https://forum.bryntum.com/)
* [Contact us](https://bryntum.com/contact/)

## License and copyright

Bryntum Scheduler Pro is commercial software and requires a paid license.
Please visit the [Bryntum Scheduler Pro End User License](https://bryntum.com/products/schedulerpro/license/) for the full text of the license.

Copyright © 2009-2026, Bryntum
All rights reserved.

