v7.3.0
SupportExamplesFree Trial

Upgrade guides for Scheduler v6.0.0+

Scheduler v6.0.0

New styling for the Grid header bottom border in timeline-based views

The bottom border styling of the Grid header was moved from the .b-grid-header-container element to .b-grid-headers in non-timeline sub-grids and .b-horizontaltimeaxis in the timeline sub-grid.

Old styling modifying the grid header:

.b-grid-header-container {
    border-bottom : none;
}

New styling:

.b-scheduler:not(.b-sch-vertical) {
    .b-header:not(.b-grid-header-scroller-normal) .b-grid-headers,
    .b-horizontaltimeaxis {
        border-bottom : none;
    }
}

The context and its nested params of beforeEventResizeFinalize/eventPartialResize/eventResizeStart/eventResizeEnd has been removed

Now instead of using context param you should use resizeData param:

Old code

    listeners : {
        beforeEventResizeFinalize({ context }) {
            console.log(context.originalStartDate);
        }
    }

New code

    listeners : {
        beforeEventResizeFinalize({ resizeData }) {
            console.log(resizeData[0].originalStartDate);
        }
    }

Contextualized recurrence rules when setting a non-recurring or newly added event to have recurrence.

By default, the combo which offers selection of recurrence rules now creates an initial set of recurrence rules based on the start day and date of the event you are editing.

So if it's on Thursday the 15th of October, the suggested recurrence rules will include:

  • Weekly on Thursday
  • Monthly on 15th
  • Monthly on the third Thursday
  • Yearly on 15th of October
  • Yearly on the third Thursday of October

Options 1, 2, and 4 are the defaults for Weekly, Monthly and Yearly anyway. The two extra options are just a suggestion in case more granular control is required. This is just to make it easier to start a recurring event.

Once an event has a recurrence rule, the dropdown reverts to displaying the default base set of recurrence options.

To disable this, configure the Scheduler's EventEdit feature with:

useContextualRecurrenceRules : false

Excel export only export events inside the current time axis

If you would like to always export all events, regardless whether they intersect the current time axis or not, set the includeEventsOutsideTimeAxis

Old code:

features : {
    // Exports only events intersecting current time axis
    excelExporter : true
},

New code:

features : {
    excelExporter : {
        // Export all events always
        includeEventsOutsideTimeAxis : true
    }
},

Removed eventBodyTemplate

With this release we removed the eventBodyTemplate function, which was deprecated in v5.6.2. It was originally ported over from our older line of products to ease migration, but it is redundant since an eventRenderer can accomplish the same result. By removing it we have simplified the codebase, and reduced confusion on where to put event bar customization code.

Old code:

const scheduler = new Scheduler({
    eventBodyTemplate : data => StringHelper.xss`
        <div>${data.headerText}</div>
        <div>${data.footerText}</div>
    `,

    eventRenderer({ eventRecord, resourceRecord, renderData }) {
        return {
            headerText : DateHelper.format(eventRecord.startDate, 'HH:mm'),
            footerText : StringHelper.encodeHtml(eventRecord.name || '')
        };
    }
});

New code:

const scheduler = new Scheduler({
    eventRenderer({ eventRecord, resourceRecord, renderData }) {
        return `
            <div>${DateHelper.format(eventRecord.startDate, 'HH:mm')}</div>
            <div>${StringHelper.encodeHtml(eventRecord.name || '')}</div>
        `;
    }
});

Or more efficiently using DomConfigs:

const scheduler = new Scheduler({
    eventRenderer({ eventRecord, resourceRecord, renderData }) {
        return [
            {
                class : 'b-sch-event-header',
                text  : DateHelper.format(eventRecord.startDate, 'HH:mm')
            },
            {
                class : 'b-sch-event-footer',
                text  : eventRecord.name || ''
            }
        ];
    }
});

Note that in some edge cases the new appearance might not be identical to the old. For example if your dataset has icons on the events, but your eventBodyTemplate did not render them, they might now be unexpectedly shown. Please review your UI after upgrading to ensure it looks as expected.

New location for Core.util.helper.Point class

The Core.util.helper.Point class was moved in v5.6.0 to solve circular module dependencies. It is now a named (Point) export of the Core.util.helper.Rectangle module.

Changes are required if you are directly importing the class from sources:

Old code:

import Point from 'path-to-lib/Core/helper/util/Point.js';

New code:

import { Point } from 'path-to-lib/Core/helper/util/Rectangle.js';

Note: No changes required for importing from module or umd bundles.

Milestone CSS

The CSS for milestones was slightly simplified in v5.6.0, thanks the conversion to use grid layout for event bars back in 5.0. If you use custom styling for milestones, you might need to update it

ScrollOptions has been renamed to BryntumScrollOptions

If you use TypeScript in your application rename imported type ScrollOptions to BryntumScrollOptions.

Old code:

import { ScrollOptions } from '@bryntum/scheduler'

New code:

import { BryntumScrollOptions } from '@bryntum/scheduler'

Restructured RowReorder feature

Internal development made it necessary in v5.5.9 to define a feature specifically for Scheduler Grid.feature.RowReorder -> Scheduler.feature.RowReorder

If you extended that feature to add some custom logic, you need change base class to the new one.

EventCopyPaste was made asynchronous

The EventCopyPaste feature's copyEvents and pasteEvents was made asynchronous in v5.4.0. That made the beforeCopy and beforePaste events asynchronously preventable, and allowed for native Clipboard API support.

If your code relies on a copy or paste action to complete, you will need to wait for the promise to be resolved.

Old code:

function copyPaste()
{
    scheduler.copyEvents();
    doSomethingElse();
    scheduler.pasteEvents();
    finishDoingSomethingElse();
}

New code:

async function copyPaste()
{
    await scheduler.copyEvents();
    doSomethingElse();
    await scheduler.pasteEvents();
    finishDoingSomethingElse();
}

…or…

function copyPaste()
{
    return scheduler.copyEvents().then(() => {
        doSomethingElse();
        scheduler.pasteEvents().then(() => {
            finishDoingSomethingElse();
            return true;
        });
    });
}

The getEvents() function of ResourceModel was removed

It was deprecated in v5.36 and has now been removed. Use the events property instead.

Old code:

const events = resource.getEvents();

New code:

const { events } = resource;

Angular View Engine wrappers for Angular 11 and older versions

In v5.3.3 a new @bryntum/scheduler-angular-view package designed to work with Angular 11 and older versions was added, which use the View Engine for rendering. If you are using one of the legacy Angular versions, please follow these steps to use the package:

Install the package using npm:

npm install @bryntum/scheduler-angular-view@6.0.0

Import the component in your Angular application:

import { BryntumSchedulerComponent } from '@bryntum/scheduler-angular-view';

Do not forget to remove previously used @bryntum/scheduler-angular package which requires Angular 12 or newer version.

Please check Angular integration guide for additional information.

Event style & color CSS changes

The CSS used to support eventStyle and eventColor was changed in v5.3.0 - instead of letting SASS generate CSS for each style and color combination it now uses internal CSS variables.

The upside of this change is that it removes thousands of lines of CSS (the unminified Scheduler specific CSS dropped from almost 500kB down to 110kB), while also making it easier for us to add more colors and styles in the future.

The downside is that CSS variables does not allow for scaled (perceived change instead of absolute change) color adjustments as SASS does, so the resulting colors are in some cases slightly different.

If your application uses the built-in styles and colors as is you should not need to adjust your styling, but if it uses custom styles and colors for the events you might need to adjust the specificity of some selectors (we had to adjust one demo out of the roughly 80 available for Scheduler).

Localization update

LocaleManager.registerLocale was deprecated in 5.3.0 and has now been removed. LocaleHelper.publishLocale should be used instead.

Old code:

LocaleManager.registerLocale('Es', {
    desc : 'Spanish', locale : {
        localeName : 'Es',
        localeDesc : 'Spanish',
        locale     : {
            /* localization */
        }
    }
});

New code:

LocaleHelper.publishLocale({
    localeName : 'Es',
    localeDesc : 'Spanish',
    localeCode : 'es',
    /* localization */
});

LocaleManager.extendLocale was deprecated in 5.3.0 and has now been removed. LocaleManager.applyLocale should be used instead.

Old code:

LocaleManager.extendLocale('Es', {
    desc : 'Spanish', locale : {
        locale : {
            /* localization */
        }
    }
});

New code:

LocaleManager.applyLocale({
    localeName : 'Es',
    localeDesc : 'Spanish',
    localeCode : 'es',
    /* localization */
});

Check our localization guide for the details.

Removed the event property of time range mouse events

It was deprecated in v5.3.0 and has now been removed, replaced with domEvents to reduce risk of confusion with Bryntum events and event records. Applies to thetimeRangeHeaderClick, timeRangeHeaderDblClick and timeRangeContextMenu events.

Old code:

scheduler.on({
    timeRangeHeaderClick({ event }) {
        console.log(event);
    }
});

New code:

scheduler.on({
    timeRangeHeaderClick({ domEvent }) {
        console.log(domEvent);
    }
});

The event property of the EventDrag feature's events beforeEventDrag and eventDragStart was renamed

The EventDrag feature triggers beforeEventDrag and eventDragStart when dragging events in the Scheduler. In the event data object the property previously named event was replaced by domEvent in v5.2.7.

Simply use the new property name instead:

Old code:

const scheduler = new Scheduler({
    listeners : {
        beforeEventDrag ({ eventRecord, event }){
            return event.ctrlKey
        }
    }
});

New code:

const scheduler = new Scheduler({
    listeners : {
        beforeEventDrag ({ eventRecord, domEvent }){
            return domEvent.ctrlKey
        }
    }
});

Configurable handle sizes for the EventResize removed

The size of handle zones for resizing events is determined by CSS since v5.2.7. If you are using the handleSize or touchHandleSize configs, those should be replaced by CSS rules.

The highlightWeekends config of the NonWorkingTime feature was removed

Previoulsy deprecated in v5.2.0 for being superfluous, it has now been removed. Disabling the feature will yield the same result as the config did.

Old code:

const scheduler = new Scheduler({
    features : {
        nonWorkingTime : {
            highlightWeekends : false
        }
    }
});

New code:

// To be able to toggle it at runtime:

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

// Or if you don't want to use the feature at all:

const scheduler = new Scheduler({
    features : {
        nonWorkingTime : false
    }
});

SchedulerDatePicker's events property removed

The events config in SchedulerDatePicker was renamed to showEvents in v5.1.4. The events property is now no longer available.

Old code:

javascript new SchedulerDatePicker({ events : 'count' ... })

New code:

new SchedulerDatePicker({
   showEvents : 'count'
   ...
})

scrollResourceEventIntoView and scrollAssignmentIntoView function signatures changed

The 3rd param of the scrollResourceEventIntoView was deprecated in v5.1.4 and is now no longer available. The 2nd param of the scrollAssignmentIntoView was also deprecated in v5.1.4 and is no longer available.

Old code:

scheduler.scrollResourceEventIntoView(resourceRecord, eventRecord, null, { block : start });

New code:

scheduler.scrollResourceEventIntoView(resourceRecord, eventRecord, { block : start });

New module bundle for Angular

Bryntum Scheduler is since v5.1.0 delivered with a new ES Module bundle without WebComponents. This was done to avoid conflicts with Angular which also uses WebComponents for applications.

Angular wrappers use scheduler.module.js bundle in favor of removed scheduler.lite.umd.js one.

Your Angular applications should be upgraded to use the new scheduler.module.js bundle which is set as main for @bryntum/scheduler NPM package.

Replace all application imports from Bryntum packages as shown below:

Old code:

import { Scheduler } from '@bryntum/scheduler/scheduler.lite.umd.js';

New code:

import { Scheduler } from '@bryntum/scheduler';

New module bundle with WebComponents

Bryntum Scheduler is since v5.1.0 delivered with a new grid.wc.module.js ES Module bundle with WebComponents.

Your applications which use WebComponents and modules bundle should be upgraded to import from new scheduler.wc.module.js instead of scheduler.module.js.

Dependencies feature refactored, part #1

The draw(), drawDependency(), getConnectorEndSide(), getConnectorStartSide(), refreshDependency() and releaseDependency() functions on the Dependencies feature has mistakenly been public ever since the feature was created. Since the refactoring in v5.1.0 they are no longer available.

Under normal circumstances you should never have to do draw/refresh dependencies manually, if you have to do that it is likely a bug that we would appreciate a report of. After the refactoring the only available option to draw/refresh is by calling: scheduler.features.dependencies.refresh().

Dependencies feature refactored, part #2 - drawForEvent() not needed v5.1.0

As a result of a large refactoring of the Dependencies feature the drawForEvent() fn was deprecated in v5.1.0 and has now been removed.

Old code:

//... some action
scheduler.features.dependencies.drawForEvent(scheduler.eventStore.first);

New code:

//... some action

EventCopyPaste event property removal

The events triggered by the EventCopyPaste feature (beforeCopy, beforePaste) now passes both eventRecords and assignmentsRecords. The old records param was because of this deprecated in v5.0.4 and has now been removed. Please adjust your code accordingly.

Old code:

scheduler.on({
    beforeCopy({ records }) {
        console.log(records.map(r => r.name).join(', '));
    }
})

New code:

scheduler.on({
    beforeCopy({ eventRecords }) {
        console.log(eventRecords.map(r => r.name).join(', '));
    }
})

Validating CrudManager responses by default

The validateResponse flag on CrudManager was changed in v5.0.3 to default to true. When enabled, it validates CrudManager responses from the backend and outputs a message on console if the format isn't valid. This is helpful during the development phase, but can be turned off in production:

const scheduler = new Scheduler({
   crudManager : {
       // Turn response validation off
       validateResponse : false,
       ...
   } 
});

New Vue wrapper config option relayStoreEvents

This option was introduced in v5.0.3 to allow relaying of store events to the Scheduler instance. It defaults to false (no events relayed) which when introduced changed the default behavior so if your application relies on relayed events, configure it as true.

Example:

<bryntum-scheduler
    :relayStoreEvents="true"
>

The config option applies to both Vue 2 and Vue 3.

horizontalEventSorterFn() renamed to overlappingEventSorter()

Renamed in v5.0.0 since the old name was misleading, the function is called to sort overlapping events vertically. The functionality remains the same, only the name changed. If you are using it, you should rename the usages in your code:

Old code:

const scheduler = new Scheduler({
    horizontalEventSorterFn(a, b) {
        // Your custom logic here
    }
})

New code:

const scheduler = new Scheduler({
    overlappingEventSorter(a, b) {
        // Your custom logic here
    }
})

React wrappers now use module bundle

Prior to v5.0.0 the React wrappers used the UMD bundle to import required classes:

Old code:

import { EventModel } from '@bryntum/scheduler/scheduler.umd.js';

UMD bundle is not used anymore in the wrappers so the import line in the above code needs to be changed:

New code:

import { EventModel } from '@bryntum/scheduler';

Imports from @bryntum/scheduler-react remain same.

Argument order of TimeSpan.shift() corrected

The documented order of the arguments of TimeSpan.shift() has been incorrect since v2.0.0. Docs have been updated to reflect the correct order (amount, unit, not unit, amount) and the code that handled the incorrect order has been removed. If you are using this method with the incorrect order (unit, amount) you should change it to the correct order (amount, unit):

Old code:

eventRecord.shift('d', 1);

New code:

eventRecord.shift(1, 'd');

Store now defaults to use raw data for remotely loaded data

The useRawData setting on Store is now enabled by default when data is loaded remotely using an AjaxStore or a CrudManager, but with all sub-settings disabled. This will boost load performance slightly, by not cloning the incoming data objects.

If you want to restore the previous behavior, you can set useRawData : false on the store:

const scheduler = new Scheduler({
    eventStore : {
        useRawData : false
    }
});

Or for all project stores:

const scheduler = new Scheduler({
    project : {
        useRawData : false
    }
});

Layout locked by default during event resize & drag create

Previously apps had to opt in to locking the layout during event resizing and during drag creation, but now it is locked by default. If you want to opt out, you can set lockLayout : false on the specific feature:

const scheduler = new Scheduler({
    features : {
        eventDragCreate : {
            lockLayout : false
        },
        eventResize : {
            lockLayout : false
        }
    }
});

Start/end parameters are now passed by default

Scheduler now by default passes the time axis start & end dates as parameters to fetch requests (from the EventStore or from the CrudManager). If you want to opt out, you can set the passStartEndParameters to false:

const scheduler = new Scheduler({
    passStartEndParameters : false
});

Automatic refresh when resuming refresh

When calling Scheduler.resumeRefresh() the scheduler will now automatically refresh (if it leads to refresh no longer being suspended) unless you pass false as the argument:

scheduler.suspendRefresh();

// A lot of changes that would cause the UI to refresh
// ...

scheduler.resumeRefresh(false);
// UI not refreshed here...

Removed fetchOptions and requestConfig from CrudManager.transport

The previously (in v5.0.0) deprecated fetchOptions and requestConfig properties of CrudManager.transport.load and CrudManager.transport.sync were removed in v6.0.0. Any settings passed in those properties can instead be passed directly on the upper level (in the load or sync configuration objects).

Old code:

const crudManager = new CrudManager({
    transport : {
        load : {
            fetchOptions : {
                credentials : 'include'
            }
        },
        sync : {
            requestConfig : {
                credentials : 'include'
            }
        }
    }
});

New code:

const crudManager = new CrudManager({
    transport : {
        load : {
            credentials : 'include'
        },
        sync : {
            credentials : 'include'
        }
    }
});

EventDrag copyKey property default value changed from SHIFT to OS default

The copyKey property of the EventDrag feature now defaults to the default copy key of the native OS (Meta-key for Mac and Ctrl for Windows).

Old code:

const scheduler = new Scheduler({
    features : {
        eventDrag : true // copyKey value is `SHIFT` by default
    }
});

New code to keep using SHIFT as copyKey value:

const scheduler = new Scheduler({
    features : {
        eventDrag : {
            copyKey : 'SHIFT'
        }
    }
});

Scheduler v6.0.2

TimelineHistogram class getRectClass config is deprecated

TimelineHistogram class getRectClass config is deprecated in favor of new getBarClass config to make naming more consistent. The old config is still there but will be eliminated in v7.0.0 release so please make sure you code is updated respectively.

Old code:

new TimelineHistogram({
    getRectClass : () => {
        ...
    }
})

New code:

new TimelineHistogram({
    getBarClass : () => {
        ...
    }
})

Scheduler v6.1.6

Setting Scheduler stepUnit deprecated

Setting the SchedulerstepUnit property has been deprecated in favor of new shiftIncrement. stepUnit is a read-only property which produces a human readable version of the shiftIncrement for UIs. The old config is still there but will be eliminated in v7.0.0 release so please make sure you code is updated respectively.

Old code:

new Scheduler({
    // Had to be just a unit name
    stepUnit : 'week'
})

New code:

new Scheduler({
    // May contain a magnitude as well as unit name
    shiftIncrement : '2 days'
})

Scheduler v6.1.8

CrudManager event param responseOptions was renamed

The responseOptions event param in CrudManager load/sync events (load, loadFail, sync, syncFail, requestDone, requestFail) was renamed to requestOptions. Please review your CrudManager event handlers and update the param name accordingly.

Old code:

new Scheduler({
    crudManager : {
        loadUrl   : 'url.php',
        listeners : {
            requestDone({ responseOptions }) {

            },
            loadFail({ responseOptions }) {

            }
        }
    }
})

New code:

new Scheduler({
    crudManager : {
        loadUrl   : 'url.php',
        listeners : {
            requestFail({ rawResponse, requestOptions }) {

            },
            loadFail({ rawResponse, requestOptions }) {

            }
        }
    }
})

createEventOnDblClick deprecated

A new config, autoCreate takes the place of the createEventOnDblClick config (though that will still work until version 7.0).

autoCreate allows you to configure the DOM event name which creates an event. This defaults to dblclick as before. It also allows other parameters of the new event to be specified.

No code changes are necessary unless you have set this to false. In which case, make the following change before 7.0 arrives:

Old code:

    createEventOnDblClick : false

New code:

    autoCreate : false

Scheduler v6.2.0

EventColorPicker record config is deprecated

The record config of EventColorPicker has been deprecated in favor of the new records config, which allows changing the color property for multiple selected records. The old record config is still there, but it will be removed in the v7.0.0 release. Please update your code accordingly.

Old code:

new EventColorPicker({
    record : firstEvent
})

New code:

new EventColorPicker({
    records : [firstEvent]
})

AjaxHelper.fetch credentials change

The AjaxHelper.fetch() utility function is used by AjaxStore and CrudManager to fetch data from the server. Previously it by default used the credentials: 'include' option, which meant that cookies were always sent with the request. To better match the default behavior of the native fetch API, our default value has been removed (thus it instead uses 'same-origin', which is the native default). If you want to restore the old behavior, you can do so using AjaxHelper.DEFAULT_FETCH_OPTIONS:

Old code

new CrudManager({
    loadUrl  : 'load.php',
    autoLoad : true
})

New code

AjaxHelper.DEFAULT_FETCH_OPTIONS = { credentials : 'include' };

new CrudManager({
    loadUrl  : 'load.php',
    autoLoad : true
})

Scheduler v6.3.0

Naming simplification for project data properties

The ProjectModel can consume inline data for the different sorts of entities it supports: events, resources, assignments, dependencies, time ranges and resource time ranges.

In the past, the configs and properties related to this has been named according to [entityName]Data: eventsData, resourcesData, assignmentsData, dependenciesData, timeRangesData and resourcetimeRangesData.

This has been simplified to only [entityName]: events, resources, assignments, dependencies, timeRanges and resourceTimeRanges.

The old properties are still available but are marked as deprecated and will be removed in a future release. We recommend you update the names used in your code to avoid breakage later.

Old code

const scheduler = new Scheduler({
    project : {
        eventsData : [ ... ],
        resourcesData : [ ... ],
        assignmentsData : [ ... ]
    }
})

New code

const scheduler = new Scheduler({
    project : {
        events : [ ... ],
        resources : [ ... ],
        assignments : [ ... ]
    }
})

This change also applies to APIs that get or set the data on the ProjectModel, such as inlineData, and json. For example:

Old code

const { inlineData } = scheduler.project;

// inlineData would previously have `eventsData`, `resourcesData` etc. properties

New code

const { inlineData } = scheduler.project;

// inlineData now has `events`, `resources` etc. properties. 
// Note that the old properties are still included too

Contents