Bryntum Scheduler Pro 5.0.4

Bryntum Scheduler Pro

Welcome to the Bryntum Scheduler Pro, a combination of the Scheduler with the powerful Gantt scheduling engine. Bryntum Scheduler Pro integrates easily with popular frameworks. Click logo to open framework integration guide:

ReactReactAngularAngularVueVueIonicIonicSalesforceSalesforceNode.jsNode. js

This document contains very brief info on the SchedulerPro's structure and how to get started. For more information, please view the guides and API Docs (open SchedulerPro in API docs).

Live demo

Here you can try out the Scheduler Pro and some of its main features. For more demos please refer to the example browser.

Framework agnostic

The Bryntum Scheduler Pro does not require any framework but works perfectly with popular frameworks such as React, Angular, Vue, Ionic and Ext JS. It also ships with frameworks demos which can be found in the examples/frameworks and examples-scheduler/frameworks folders.

Including Scheduler Pro in your app

Include the distributed bundles using a script tag or as an ES module. Source maps are included so debugging should be a breeze :) For info on other use cases please view the guides found under /docs.

Folder structure

The project has the following folders:

FolderContents
/buildDistribution folder, contains js bundles, css themes, locales and fonts. More info below.
/docsDocumentation, open it in a browser (needs to be on a web server) to view guides & API docs.
/examplesDemos, open it in a browser (needs to be on a web server)
/examples-schedulerDemos from Scheduler, open it in a browser (needs to be on a web server)
/libSource code, can be included in your ES6+ project using import.
/resourcesSCSS files to build our themes or your own custom theme.
/testsOur complete test suite, including Siesta Lite to allow you to run them in a browser.

Using bundles

The bundles are located in /build. Bundle files are:

FileContents
package.jsonImportable npm package
schedulerpro.lite.umd.jsUMD-format bundle without transpilation and WebComponents included
schedulerpro.module.jsES module bundle for usage with modern browsers or in build process
schedulerpro.lwc.module.jsES module bundle for usage with Lightning Web Components
schedulerpro.umd.jsTranspiled (babel -> ES5) bundle in UMD-format

All bundles are also available in minified versions, denoted with a .min.js file extension. Typings for TypeScripts can be found in files with a .d.ts file extension.

Example inclusion of UMD bundle with material theme:

<link rel="stylesheet" type="text/css" href="build/schedulerpro.material.css" data-bryntum-theme>

<script type="text/javascript" src="build/schedulerpro.umd.js"></script>

Basic Scheduler Pro example

Below is a simple demo creating a simple scheduler with a few resources and linked events:

const scheduler = new SchedulerPro({
    project : {
        resourcesData: [
            { id: 1, name: 'Dan Stevenson' },
            { id: 2, name: 'Talisha Babin' }
        ],

        eventsData: [
            // the date format used is configurable, defaults to the simplified ISO format (e.g. 2017-10-05T14:48:00.000Z)
            // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString
            { id: 1, startDate: '2017-01-01', duration : 3, durationUnit : 'd', name : 'Event 1' },
            { id: 2, duration : 4, durationUnit : 'd', name : 'Event 2' }
        ],

        assignmentsData : [
            { event : 1, resource : 1 },
            { event : 2, resource : 2 }
        ],

        dependenciesData : [
            { fromEvent : 1, toEvent : 2 }
        ]
    },

    appendTo: targetElement,
    autoHeight : true,
    rowHeight : 50,

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

    startDate  : new Date(2017, 0, 1),
    endDate    : new Date(2017, 0, 10)
});

In the above sample:

  • Scheduler Pro uses a Project entity to consume inline data
  • Due to the absence of a start date for Event 2, the Scheduling Engine calculates it using Event 1 start date and duration
  • Assignment store holds information about which events are assigned to which resources.

A few good-to-know details

Code and technologies

  • The Scheduler Pro is written in ECMAScript 2020 using modules. The modules are built into a bundle using WebPack + Babel. These bundles work in all supported browsers (Chrome, Firefox, Safari and Edge).
  • The Scheduling Engine is written in TypeScript and transpiled into ECMAScript 2020 modules, which are included into resulting Scheduler Pro bundle as well.
  • The Scheduler Pro is internally styled using SASS. During the build it generates CSS themes from the SASS files. In most cases you include one of the themes in your app. For more details on styling, see the guides under guides/styling.

Scheduler Pro class structure

  • The Scheduler Pro is a subclass of Bryntum Scheduler which in its turn is based on the Bryntum Grid. The Grid provides a lot of the necessary data table infrastructure. Most of the features and options for the Grid can be used in the Scheduler too.
  • For performance reasons scheduled event elements are reused when scrolling, meaning you should never manipulate DOM elements directly (do it from eventRenderers etc. instead).

External dependencies

Bryntum Scheduler has very few third party dependencies, you can always find our up-to-date dependencies in the licenses.md file

Copyright © 2009 - 2022, Bryntum

All rights reserved.

License

Last modified on 2022-05-11 13:42:24

Contents