Upgrade guides for Scheduler v5.0.0+
Scheduler v5.0.0
horizontalEventSorterFn() renamed to overlappingEventSorter()
Renamed 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
The React wrappers previously 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.
Scheduler v5.0.3
Validating CrudManager responses by default
The validateResponse flag on CrudManager has been changed 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 to allow relaying of store events to the Scheduler instance. It defaults to false (no events relayed) which changes 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.
Scheduler v5.0.4
EventCopyPaste event deprecations
The events triggered by the EventCopyPaste feature (beforeCopy, beforePaste) now passes both eventRecords and assignmentsRecords. The old records param was because of this deprecated and will be removed in 6.0. Please adjust your code accordingly to avoid surprises down the road.
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(', '));
}
})
Scheduler v5.1.0
New module bundle for Angular
Bryntum Scheduler is now delivered with 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 now delivered with new scheduler.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. With the refactoring described in the changelog they are all now either removed or made private.
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
As a result of a large refactoring of the Dependencies feature the drawForEvent() fn was deprecated. Calling it should no longer be necessary.
Old code:
//... some action
scheduler.features.dependencies.drawForEvent(scheduler.eventStore.first);
New code:
//... some action
New keyboard shortcuts functionality
KeyMap is a mixin that allows for standardized and customizable keyboard shortcuts functionality. KeyMap is mixed in to Widget by default and therefore available to all Widget child classes. There is a new guide describing how to customize currently integrated keyboard shortcuts.
Scheduler v5.1.4
SchedulerDatePicker's events property deprecated
The events config in SchedulerDatePicker has been renamed to showEvents. The events property is deprecated but will continue to work during its deprecation period below 6.0.0 version.
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 and will be removed in a future release. The 2nd param of the scrollAssignmentIntoView was deprecated and will be removed in a future release.
Old code:
scheduler.scrollResourceEventIntoView(resourceRecord, eventRecord, null, { block : start });
New code:
scheduler.scrollResourceEventIntoView(resourceRecord, eventRecord, { block : start });
Scheduler v5.2.0
The highlightWeekends config of the NonWorkingTime feature was deprecated
It is superfluous, disabling the feature will yield the same result. It has been deprecated and will be removed in 6.0.
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
}
});
Scheduler v5.2.7
The event property of the EventDrag feature's events beforeEventDrag and eventDragStart is being renamed
The EventDrag feature triggers beforeEventDrag and eventDragStart when dragging events in the Scheduler. In the event data object the property previously named event is replaced by domEvent.
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 feature deprecated
The size of handle zones for resizing events is determined from CSS now. No code changes are necessary.
Scheduler v5.3.0
Event style & color CSS changes
The CSS used to support eventStyle and eventColor was changed - 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 has been deprecated. 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 has been deprecated. 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.
Deprecated the event property of time range mouse events
It was replaced with domEvents to reduce risk of confusion with Bryntum events and event records. Applies to the timeRangeHeaderClick, timeRangeHeaderDblClick and timeRangeContextMenu events.
Old code:
scheduler.on({
timeRangeHeaderClick({ event }) {
console.log(event);
}
});
New code:
scheduler.on({
timeRangeHeaderClick({ domEvent }) {
console.log(domEvent);
}
});
Scheduler v5.3.3
Resource time ranges now support recurrence natively
Previously, you had to mixin recurrence support to enable recurring resource time ranges. This is now supported natively, so you can safely remove any such code. See updated resourcetimeranges demo for reference.
Old code:
class MyResourceTimeRange extends RecurringTimeSpan(ResourceTimeRangeModel) {};
class MyResourceTimeRangeStore extends RecurringTimeSpansMixin(ResourceTimeRangeStore) {
static get defaultConfig() {
return {
// use our new MyResourceTimeRange model
modelClass : MyResourceTimeRange
};
}
};
const resourceTimeRangeStore = new MyResourceTimeRangeStore({
data : resourceTimeRanges
});
const scheduler = new Scheduler({
appendTo : 'container',
features : {
resourceTimeRanges : {}
},
resourceTimeRangeStore,
});
New code:
const scheduler = new Scheduler({
appendTo : 'container',
features : {
resourceTimeRanges : {}
},
resourceTimeRanges : new ResourceTimeRangeStore({
data : resourceTimeRanges
})
});
Angular View Engine wrappers
New @bryntum/scheduler-angular-view is designed to work with Angular 11 and older versions, 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@5.3.3
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.
Scheduler v5.3.6
The getEvents() function of ResourceModel is deprecated
It will be removed in version 6.0.0. Use the events property instead.
Old code:
const events = resource.getEvents();
New code:
const { events } = resource;
Scheduler v5.4.0
EventCopyPaste has been made asynchronous
The EventCopyPaste feature's copyEvents and pasteEvents has been made asynchronous. This makes the beforeCopy and beforePaste events asynchronously preventable and allows 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;
});
});
}
Scheduler v5.5.0
Restructuring features
Internal development made it necessary 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.
Scheduler v5.6.0
New location for Core.util.helper.Point class
The Core.util.helper.Point class has been moved 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.
Recurring TimeRanges
There is a new TimeRangeModel class which includes a recurrenceRule field, and a new TimeRangeStore class which implements delivering occurrences of recurring TimeRanges. These are now used by default in your Project when the data loaded includes a timeRanges property.
You do not have to implement your own subclass of TimeSpan any more (unless you add your own custom fields in which case, you should now extend the TimeRangeModel class)
Where in old versions you would have used
class MyTimeRange extends TimeSpan.mixin(RecurringTimeSpan) {
static fields = [{
name : 'myExtraField'
}]
}
...
new Scheduler({
...
project
:
{
timeRangeStore : {
modelClass : MyTimeRange
}
}
...
})
;
Now, you would only need
class MyTimeRange extends TimeRange {
static fields = [{
name : 'myExtraField'
}]
}
...
new Scheduler({
...
project
:
{
timeRangeStore : {
modelClass : MyTimeRange
}
}
...
})
;
If you do not add your own custom fields, you do not need any special configurations of subclasses.
The recurringtimeranges example code shows the reduced coding now possible to use recurring TimeRanges.
Milestone CSS
The CSS for milestones was slightly simplified 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'
Scheduler v5.6.2
Deprecated eventBodyTemplate
With this release we deprecated the eventBodyTemplate function. 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 can simplify the codebase, and reduce confusion on where to put event bar customization code.
It is scheduled for removal in 6.0, please update your code before that to avoid breakage.
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.