v7.3.0
SupportExamplesFree Trial

What's new in Scheduler v4.0.0+

Scheduler v4.2.0

Infinite time axis scroll

This release adds a long awaited feature for Scheduler (and Scheduler Pro) - infinite scroll along the time axis. To enable it, configure your scheduler with infiniteScroll : true. When a user scrolls to near the start or end of the time axis, it will be seamlessly extended.

Try it out in the new infinite-scroll demo.

Data driven event resizing

Previously resizing an event in Scheduler was an operation that acted on the DOM element level, translating the width change to a date/time change on the fly.

With this release, resizing instead directly affects the underlying data, using the normal rendering paths to update the DOM element. This change has two big upsides:

  • It works in combination with the new infinite scroll feature, allowing you to resize events towards infinity ∞
  • Since it uses the normal rendering paths, what you see during resize is much closer to what you will get when you release the mouse - fewer surprises from layout calculations coming into play

On a related note, EventResize can now be configured to allow resizing an event to be zero duration, using the allowResizeToZero config.

Easier to create dependencies using drag and drop

Dependencies can now be created by dropping anywhere on the event bar element, whereas in previous versions you had to hit a specific side circle element to define it. This new behaviour is controlled using the allowDropOnEventBar config of the Dependencies feature. It is enabled by default.

Scheduler v4.2.3

Configurable ExportDialog widget

In previous releases it was difficult to configure the export dialog widget. In the new release we applied the approach which proved itself to be very flexible. You can customize widgets using the new public config exportDialog:

const scheduler = new Scheduler({
    features : {
        pdfExport : {
            exportDialog : {
                items : {
                    // hide the field
                    orientationField  : { hidden : true },

                    // move the field up
                    exporterTypeField : { weight : 150 },

                    // change default format in exporter
                    fileFormatField   : { value : 'png' },

                    // configure nested items
                    rangesContainer : {
                        layoutStyle : {
                            flexDirection : 'column'
                        },
                        items : {
                            rangeStartField : { value : new Date() }
                        }
                    }
                }
            }
        }
    }
});

scheduler.features.pdfExport.showExportDialog();

You can add new fields, buttons, containers (any widget, essentially) and use their values in the export listeners. For more info please refer to the updated Export Dialog documentation.

Also, export dialog has become publicly available on the feature instance, which allows adding listeners directly to it:

const scheduler = new Scheduler({
    features : {
        pdfExport : true
    }
});

scheduler.features.pdfExport.exportDialog.on({
    show() {
        const { columnsField } = this.widgetMap;
        // When dialog opens all columns with name matching 'date' would
        // be selected in the columns field 
        columnsField.value = scheduler.columns.query(c => c.name.match(/date/i));
    }
})

Compared to previous releases export dialog is always there when you refer to it.

Controlling default duration when creating events with double click

You can now define the default new event duration when user double clicks the schedule area. By setting config createEventOnDblClick : { useEventModelDefaults : true }, the default duration and durationUnit will be read from the default values of the duration and durationUnit fields.

Scheduler v4.2.4

Project data change event

Schedulers underlying project now triggers a change event when the data changes in any of its stores. This event is for convenience also relayed by the Scheduler, as dataChange. The event could for example be useful when syncing changes in Scheduler with an external data model:

const scheduler = new Scheduler({
    listeners : {
        dataChange({ store, action, records }) {
            const { $name } = store.constructor;

            if (action === 'add') {
                externalDataModel.add($name, records);
            }

            if (action === 'remove') {
                externalDataModel.remove($name, records);
            }
        }
    }
});

Scheduler v4.3.0

Changes to TimeAxisColumn

TimeAxisColumn now subclasses WidgetColumn (before it was a Column), this should not affect your code. This opens up for rendering widgets embedded in row cells, see this demonstrated in the new embedded-chart demo in Scheduler Pro.

Contents