Bryntum Scheduler (Trial)

Bryntum Scheduler 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, visit the Bryntum Scheduler site

Highlights

• Resource-aware scheduling with horizontal timeline or vertical day-view layouts
• Powerful drag-and-drop resizing and dragging from external sources like grids
• Virtual rendering handles massive datasets efficiently with only visible content in DOM
• Event dependencies visualize task relationships with dependency lines
• Export to PDF/PNG, Excel, ICS calendar files, or print formats
• Group and summarize events by resource properties with custom aggregations
• Tree resource structure displays hierarchical resources with parent/child relationships
• Merge overlapping events automatically combines adjacent events for cleaner displays
• Fully responsive with configurable breakpoints for any screen size
• Custom event rendering controls appearance with renderers and templates
• Multiple built-in themes or create your own using CSS variables
• React, Vue, and 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 | | scheduler.module.js, scheduler.umd.js | JavaScript bundles (ES module and UMD formats) | | scheduler.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: >= 20.0.0
• TypeScript: >= 3.6.0
• Angular: >= 9.0.0
• React: >= 16.0.0
• Vue: >= 3.0.0
• Vite: >= 4.0.0
• Webpack: >= 4.0.0

Try Bryntum Online Demos

Explore our comprehensive collection of demos:

• View Online Demos
• JavaScript Demos
• React Demos
• Vue Demos
• Angular Demos

Installation

This is a trial package with limited functionality.

Why Use npm Aliasing?

Trial packages use npm aliasing to install @bryntum/scheduler-trial under the @bryntum/scheduler 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:

npm install @bryntum/scheduler@npm:@bryntum/scheduler-trial@latest

Or using yarn:

yarn add @bryntum/scheduler@npm:@bryntum/scheduler-trial@latest

Alternatively, add to package.json dependencies:

"dependencies": {
  "@bryntum/scheduler": "npm:@bryntum/scheduler-trial@latest"
}

Visit our npm repository guide to learn more about installation and migrating from trial to licensed packages.

Using an AI agent?

The fastest path for an AI assistant to write working Bryntum Scheduler code:

1. MCP server. Configure your agent with the Bryntum MCP server for grounded, version-correct answers: setup guide.
2. Agent skills. Install the Bryntum skill for Claude Code, Cursor, or Codex — it bundles the conventions below.

Common trial-package pitfalls for agents:

• Stale training data. Bryntum ships breaking changes; do not trust API shapes you remember. Check https://bryntum.com/products/scheduler/docs first.
• You are on the trial. The package is installed as @bryntum/scheduler-trial but aliased to @bryntum/scheduler — import paths must use the aliased name (@bryntum/scheduler). To upgrade to a licensed package, change the alias to "npm:@bryntum/scheduler@latest"; do not rewrite imports.
• Trial bundles are not minified and contain a watermark; that is expected, not a bug.
• CSS. Import FontAwesome, scheduler.css (structural), and a theme.
• Framework wrappers (@bryntum/scheduler-react, -angular, -vue-3) require the core @bryntum/scheduler package; installing only the wrapper fails at runtime.
• TypeScript types are bundled in *.d.ts next to each entry point; do not hand-roll interfaces.

Quick Start

Vanilla JavaScript

import { Scheduler } from '@bryntum/scheduler';
import './style.css';

const scheduler = new Scheduler({
    appendTo         : 'app',
    startDate        : new Date(2026, 0, 1),
    endDate          : new Date(2026, 0, 30),
    autoHeight       : true,
    rowHeight        : 50,
    barMargin        : 5,
    multiEventSelect : true,

    columns : [
        { text : 'Name', field : 'name', width : 160 }
    ],

    resources : [
        { id : 1,  name : 'Dan Stevenson'  },
        { id : 2,  name : 'Talisha Babin'  },
        { id : 3,  name : 'Ravi Kumar'     },
        { id : 4,  name : 'Aisha Khan'     },
        { id : 5,  name : 'Michael Chen'   },
        { id : 6,  name : 'Sofia Lopez'    },
        { id : 7,  name : 'James Anderson' },
        { id : 8,  name : 'Eddie Johnson'  },
        { id : 9,  name : 'Ethan Wright'   },
        { id : 10, name : 'Liu Wei'        }
    ],
    events : [
        { resourceId : 1,  startDate : '2026-01-01', endDate : '2026-01-05', name : 'Kickoff Meeting' },
        { resourceId : 1,  startDate : '2026-01-06', endDate : '2026-01-10', name : 'Scope Definition' },
        { resourceId : 1,  startDate : '2026-01-12', endDate : '2026-01-29', name : 'Project Plan Review' },
        { resourceId : 2,  startDate : '2026-01-02', endDate : '2026-01-06', name : 'Requirement Gathering' },
        { resourceId : 2,  startDate : '2026-01-07', endDate : '2026-01-21', name : 'Stakeholder Interviews' },
        { resourceId : 2,  startDate : '2026-01-22', endDate : '2026-01-27', name : 'Requirement Signoff' },
        { resourceId : 3,  startDate : '2026-01-05', endDate : '2026-01-14', name : 'System Design' },
        { resourceId : 3,  startDate : '2026-01-10', endDate : '2026-01-20', name : 'Database Modeling' },
        { resourceId : 3,  startDate : '2026-01-23', endDate : '2026-01-28', name : 'API Design' },
        { resourceId : 4,  startDate : '2026-01-08', endDate : '2026-01-15', name : 'Backend Setup' },
        { resourceId : 4,  startDate : '2026-01-15', endDate : '2026-01-22', name : 'Authentication Module' },
        { resourceId : 4,  startDate : '2026-01-21', endDate : '2026-01-27', name : 'Data Services' },
        { resourceId : 5,  startDate : '2026-01-02', endDate : '2026-01-14', name : 'UI Wireframes' },
        { resourceId : 5,  startDate : '2026-01-15', endDate : '2026-01-19', name : 'Frontend Components' },
        { resourceId : 5,  startDate : '2026-01-20', endDate : '2026-01-27', name : 'Styling & Theme' },
        { resourceId : 6,  startDate : '2026-01-12', endDate : '2026-01-16', name : 'API Integration' },
        { resourceId : 6,  startDate : '2026-01-17', endDate : '2026-01-21', name : 'GraphQL Setup' },
        { resourceId : 6,  startDate : '2026-01-22', endDate : '2026-01-25', name : 'Integration Testing' },
        { resourceId : 7,  startDate : '2026-01-05', endDate : '2026-01-10', name : 'Unit Testing' },
        { resourceId : 7,  startDate : '2026-01-12', endDate : '2026-01-19', name : 'Automation Scripts' },
        { resourceId : 7,  startDate : '2026-01-18', endDate : '2026-01-27', name : 'Performance Testing' },
        { resourceId : 8,  startDate : '2026-01-10', endDate : '2026-01-22', name : 'Bug Fix Round 1' },
        { resourceId : 8,  startDate : '2026-01-23', endDate : '2026-01-26', name : 'UI Fixes' },
        { resourceId : 8,  startDate : '2026-01-27', endDate : '2026-01-30', name : 'Regression Testing' },
        { resourceId : 9,  startDate : '2026-01-03', endDate : '2026-01-14', name : 'Client Demo Prep' },
        { resourceId : 9,  startDate : '2026-01-15', endDate : '2026-01-19', name : 'Client Review' },
        { resourceId : 9,  startDate : '2026-01-20', endDate : '2026-01-24', name : 'Feedback Implementation' },
        { resourceId : 10, startDate : '2026-01-02', endDate : '2026-01-16', name : 'Deployment Setup' },
        { resourceId : 10, startDate : '2026-01-19', endDate : '2026-01-22', name : 'Go-Live' },
        { resourceId : 10, startDate : '2026-01-23', endDate : '2026-01-27', name : 'Post-Deployment Support' }
    ]
});

In the style.css:

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

Visit our JavaScript Quick Start guide to learn more.

Themes

Svalbard (default)

| Light | Dark | |--------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------| | | |

Stockholm

| Light | Dark | |----------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------| | | |

Visby

| Light | Dark | |--------------------------------------------------------------------------------------|------------------------------------------------------------------------------------| | | |

Material 3

| Light | Dark | |-----------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------| | | |

High Contrast

| Light | Dark | |------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------| | | |

Fluent 2

| Light | Dark | |-------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------| | | |

For more information on customizing themes, see the Styling guide.

Framework Integrations

Bryntum Scheduler 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

npm install @bryntum/scheduler-react@latest

Visit our React Quick Start guide to learn more.

Angular

npm install @bryntum/scheduler-angular@latest

Visit our Angular Quick Start guide to learn more.

Vue 3

npm install @bryntum/scheduler-vue-3@latest

Visit our Vue Quick Start guide to learn more.

Explore All Bryntum Products

• Bryntum Grid - High-performance data grid
• Bryntum Scheduler - Resource scheduling component
• Bryntum Scheduler Pro - Advanced scheduling with dependencies
• Bryntum Gantt - Project planning and management
• Bryntum Calendar - Full-featured calendar component
• Bryntum TaskBoard - Kanban-style task management

Explore our comprehensive collection of demos:

| Product | JavaScript | React | Vue | Angular | |-------------------|:------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------:|:----------------------------------------------------------------------:|:------------------------------------------------------------------------------:| | Grid | Grid JavaScript demos | Grid React demos | Grid Vue demos | Grid Angular demos | | Scheduler | Scheduler JavaScript demos | Scheduler React demos | Scheduler Vue demos | Scheduler Angular demos | | Scheduler Pro | Scheduler Pro JavaScript demos | Scheduler Pro React demos | Scheduler Pro Vue demos | Scheduler Pro Angular demos | | Gantt | Gantt JavaScript demos | Gantt React demos | Gantt Vue demos | Gantt Angular demos | | Calendar | Calendar JavaScript demos | Calendar React demos | Calendar Vue demos | Calendar Angular demos | | TaskBoard | TaskBoard JavaScript demos | TaskBoard React demos | TaskBoard Vue demos | TaskBoard Angular demos |

Online references

• Bryntum Scheduler documentation

• Bryntum Scheduler examples

• Bryntum Support Forum

• Contact us

License and copyright

Bryntum Scheduler is commercial software and requires a paid license. Please visit the Bryntum Scheduler End User License for the full text of the license.

Copyright © 2009-2026, Bryntum All rights reserved.