Getting Started With The Bryntum Scheduler

The Bryntum class system and configuration system is very simple. To instantiate any class, such as a Scheduler, just pass an object containing the configuration properties to its constructor. The properties in the configuration object are applied to the class’s properties, and it initializes itself as instructed.

First, you must include the Scheduler classes, and the Scheduler’s CSS in your page. This will be done by adding <script> and <link rel=”stylesheet”> elements to your page which import the Scheduler classes and stylesheet.

In our case, we use the files from the online examples:

<link rel="stylesheet" href="/build/scheduler.material.css">
<script src="/build/scheduler.umd.js"></script>

Instantiating the Scheduler

In a DOMContentLoaded event handler we instantiate our Scheduler. Let’s walk through the configuration options that we pass to our bryntum.scheduler.Scheduler constructor.

We pass an appendTo property which is either an element, or the id of an element into which the Scheduler’s elements is appended.

new bryntum.scheduler.Scheduler({
    appendTo: 'scheduler-container',

Adding features

There are many features included in the Bryntum Scheduler suite which enhance the functionality of a Scheduler, many of which are turned on by default. Out of the box, we get event editing (see screenshot below), event resizing and moving by drag and drop. In our case, grouping resources is not desired so we turn that feature off. The configuration of a feature is done by either setting it to false to disable it, true to enable or by passing an object with configuration properties.

In this example we are displaying time ranges which are named ranges of time displayed as vertical stripes behind the event blocks. The TimeRanges feature uses its own store which is loaded and synced by the CrudManager (see below)

features : {
    group : false,
    timeRanges : {
        showHeaderElements : true,
        enableResizing : true
    }
},

When events overlap for one resource

If events coincide in time for a resource, the events stack vertically by default. The barMargin config lets you control the spacing between them in pixels. For other layout options, please see this demo.

// Vertical spacing between stacked event bars when they overlap in time
barMargin: 2,

Defining columns

The rows in a Scheduler represent “resources” to which events can be assigned. We can display any field from our resource in a set of frozen columns to the left of the Scheduler’s schedule area. This is a familiar part of grid configuration:

columns : [{
    text : 'Staff',
    field : 'name',
    width : 150
}],

Loading and syncing data

Data for the time ranges, resources, and the events assigned to them are loaded from a remote URL, and changes are synced to a remote URL. The two stores are encapsulated by a CrudManager class which takes care of the transport, and encodes any changes into JSON form for sending back to the server. We tell our CrudManager to auto load from the load URL. In this simplest case, we have turned autoSync off so that it does not attempt to sync every change with a backend. We have no backend in this example.

crudManager : {
    autoLoad : true,
    autoSync : false,
    transport : {
        load : {
            url : 'data.json'
        },
        sync : {
            url : 'sync.php'
        }
    }
},

Configuring the Scheduler header

We need to tell the Scheduler the time range which it should encompass in its horizontal range:

startDate : new Date(2017, 1, 7, 8),
endDate : new Date(2017, 1, 7, 18),

And finally, we tell the Scheduler in what units we would like the time to be divided. There are many “presets” available which divide the time range in different ways appropriate for different scales of time.

viewPreset : 'hourAndDay'

That’s it. A configuration object containing seven properties is all it takes to get a Scheduler up and running in your web app.

The final result

Below you can see the result of running this example in a browser:

 

When you drag an event or add a new one, the changes you just made will appear in JSON form just as would be seen by a server. The popup will hide after a few seconds. If you want to take a longer look at it, clicking on it will cancel that timer.

 

 

And if you double click on an event, it will display the provided event editor like this:

 

 

Below is the full source code for this simple example:

document.addEventListener('DOMContentLoaded', function() {
    new bryntum.scheduler.Scheduler({
        // Element into which the Scheduler's DOM will be appended
        appendTo: 'scheduler-container',
        features : {
            group : false,

            // The TimeRanges store is taken care of by the CrudManager
            timeRanges : {
                showHeaderElements : true,
                enableResizing : true
            }
        },

        // Vertical spacing between stacked event bars when they overlap in time
        barMargin: 2,

        // Data fields from resources in frozen column set
        columns : [{
            text : 'Staff',
            field : 'name',
            width : 150
        }],

        // A CrudManager auto creates Resource and Event Stores
        // and takes care of loading and syncing data.
        crudManager : {
            autoLoad : true,
            autoSync : false,
            transport : {
                load : {
                    url : 'data.json'
                },
                sync : {
                    url : 'sync.php'
                }
            }
        },

        // The initial time range the Scheduler encompasses
        startDate : new Date(2017, 1, 7, 8),
        endDate : new Date(2017, 1, 7, 18),

        // Presets dictate the scale of the time units across
        // the top of the Scheduler
        viewPreset : 'hourAndDay'
    });
});

Adding Interaction

No application is any fun unless it has at least one button. So, let’s create a button to the header which adds a new task (you can also double click or drag in an empty area to create events). In the button click handler, we instantiate a new Event task, and ask the Scheduler’s EventEdit feature to edit it.

// Add a task when clicking 'Add task' button
document.getElementById('addTask').addEventListener('click', function (ev) {
    var event = new scheduler.eventStore.modelClass({
        resourceId: scheduler.resourceStore.first.id,
        startDate: scheduler.startDate,
        duration: 1,
        durationUnit: 'h',
        name: 'New task'
    });

    scheduler.features.eventEdit.editEvent(event);
});

Summing up

It just takes one single configuration statement to add a Scheduler into your web application. The main part of the demo is not even 50 lines of code. We hope you found this tutorial useful and if you have any feedback on our API we would love to hear it.

View example

Additional Resources

Comments ( 4 )

  • Hendrik Bulens

    What are the implications for Ext Scheduler? Will you keep on actively developing new features?

    • Mats Bryntse

      No implications, we’ll continue development of Ext Scheduler in parallel. Any specific feature that you’re looking for?

  • Courtney

    Does this version remove the dependencies on EXT-JS?

    • Mats Bryntse

      Yes, this is a new Scheduler component built with pure vanilla JavaScript.

Leave a Comment