Upgrade guides for Scheduler Pro v5.0.0+
Scheduler Pro v5.0.0
Delaying calculations for faster initial render
Scheduler Pro now by default renders events quicker than previously for the initial load. This is achieved by postponing the initial calculations to after rendering, using the raw data as is for the events. Thus, it requires loading pre-normalized data to render correctly. When given un-normalized data it will render what it can and transition to the normalized result when calculations are finished.
If you run into issues with this new "early rendering" mode, you can turn it off at the project level using the delayCalculation config:
new ProjectModel({
// Do not postpone calculations to after rendering, calculate first and delay rendering instead
delayCalculation : false
})
In applications that have code to manipulate event records directly after load, the calculations (and setting up references etc) might not yet have finished when your code executes. If this causes issues in your app, try waiting for them to finish before manipulating the events (or dependencies / resources / assignments):
// Wait for delayed initial calculations to be performed
await project.commitAsync();
// Events are now normalized, references and buckets are set up, etc.
// Perform your custom logic now...
if (project.eventStore.first.resources.length > 1) {
...
}
New scheduling issues handling popup
With this release Scheduler Pro starts displaying a special popup informing user of scheduling conflicts, cycles and calendar misconfigurations found.
In order to prevent the popup from showing please set displaySchedulingIssueResolutionPopup to false.
new SchedulerPro({
// disable default resolution popup
displaySchedulingIssueResolutionPopup : false
});
DependencyModel.active field has been made persistable
The change means that the field will be sent to the server with other dependency data when persisting. It also means that the field will take part in undo/redo operations (since StateTrackingManager tracks persistable fields only).
In order to revert to previous behavior please override the field and set its persist config to false:
export class MyDependency extends DependencyModel {
static get fields() {
return [
{ name : 'active', persist : false }
];
}
}
Dependency "Active" field has been added to the dependency editor
New Active field has been added to the dependency editor. It allows disabling a dependency so it won't take part in the scheduling process.
To revert to old editor look and get rid of the field please use this code:
new SchedulerPro({
...
features : {
dependencyEdit : {
// configure dependency editor to hide "Active" field
editorConfig : {
items : {
activeField : false
}
}
},
Dependency editor "Lag" field has been made visible by default
Lag field has been made visible in the dependency editor by default.
To hide the field please use this code:
new SchedulerPro({
...
features : {
dependencyEdit : {
// hide "Lag" field
editorConfig : {
items : {
lagField : false
}
}
},
Task editor "Constraint type" field "keepTime" config has been changed to "entered"
This was done to not loose user provided time value. Previously it was false by default which resulted in stripping of time info of the provided value.
To revert to the old behavior please use this code:
new SchedulerPro({
...
features : {
taskEdit : {
items : {
advancedTab : {
items : {
// adjust constraint type so it would strip time info
constraintDateField : {
keepTime : false
}
}
}
}
},
The Engine ResourceAllocationInfo class changes
The Engine ResourceAllocationInfo class allocation property has been changed from an Array to an Object with two properties total and byAssignments. The total property contains an array of the resource allocation intervals. And the byAssignments is a Map keeping individual assignment allocation intervals with assignments as keys and arrays of allocation intervals as values.
Basically the old allocation property content has been moved to the new allocation.total property so you need to adjust your code accordingly.
Old code:
allocationInfo.allocation
New code:
allocationInfo.allocation.total
Manually scheduled events do not skip non-working time anymore
Manually scheduled events have been changed to not skip non-working time for their proposed start/end date values. This behavior is regulated by a new project skipNonWorkingTimeWhenSchedulingManually which is false by default. In order to revert to the previous behaviour when non-working time was skipped please set the config to true:
new SchedulerPro({
project : {
skipNonWorkingTimeWhenSchedulingManually : true,
...
}
});
DurationColumn moved to Scheduler
DurationColumn was moved to the Scheduler package. If you used translations for this class, make sure to review your localization files. If you import from sources, you will have to update the path.
ResourceHistogram tooltip change
The histogram getBarTip config has been deprecated in favor of new barTooltipTemplate config.
There are several differences between the two functions interfaces. The new barTooltipTemplate function accepts a single Object type argument whose properties provide the tooltip related info:
tip- The tooltip instanceactiveTarget- The target bar-element that triggered the showdatum- The hovered histogram bar info (third argument of deprecatedgetBarTipfunction)datum.rectConfig- The rectangle DOM configuration object (second argument of deprecatedgetBarTipfunction)
And the first argument (series) of deprecated getBarTip function is not supported by new barTooltipTemplate. Since it was decided it's not used.
Please change your code accordingly.
Old code:
new ResourceHistogram({
getBarTip : (series, rectConfig, datum, index) => {
return `<div class="my-tooltip">${datum.effort}</div>`;
}
})
New code:
new ResourceHistogram({
barTooltipTemplate : ({ datum, index }) => {
return `<div class="my-tooltip">${datum.effort}</div>`;
}
})
React wrappers now use module bundle
The React wrappers previously used the UMD bundle to import required classes:
Old code:
import { EventModel } from '@bryntum/schedulerpro/schedulerpro.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/schedulerpro';
Imports from @bryntum/schedulerpro-react remain same.
Scheduler Pro v5.0.3
Validating backend responses by default
The validateResponse flag on ProjectModel has been changed to default to true. When enabled, it validates 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 SchedulerPro({
project : {
// 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 Pro 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-pro
:relayStoreEvents="true"
>
The config option applies to both Vue 2 and Vue 3.
Scheduler Pro v5.0.4
EventCopyPaste enabled by default
The EventCopyPaste feature was unintentionally not enabled by default in Scheduler Pro, with this release it is enabled. If that has some negative effect on your application you can turn it off:
const scheduler = new SchedulerPro({
features : {
eventCopyPaste : false
}
});
Scheduler Pro v5.1.0
New module bundle for Angular
Bryntum Scheduler Pro 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 schedulerpro.module.js bundle in favor of removed schedulerpro.lite.umd.js one.
Your Angular applications should be upgraded to use the new schedulerpro.module.js bundle which is set as main for @bryntum/schedulerpro NPM package.
Replace all application imports from Bryntum packages as shown below:
Old code:
import { SchedulerPro } from '@bryntum/schedulerpro/schedulerpro.lite.umd.js';
New code:
import { SchedulerPro } from '@bryntum/schedulerpro';
New module bundle with WebComponents
Bryntum Scheduler Pro is now delivered with new schedulerpro.wc.module.js ES Module bundle with WebComponents.
Your applications which use WebComponents and modules bundle should be upgraded to import from new schedulerpro.wc.module.js instead of schedulerpro.module.js.
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 Pro v5.3.0
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.
New effort field in task editor
Task editor has got a new Effort field on the Ganeral tab. If you don't need it, it can be removed like this:
const scheduler = new SchedulerPro({
features : {
taskEdit : {
items : {
generalTab : {
items : {
// get rid of effort field
effortField : false
}
}
}
}
},
...
})
Scheduler Pro v5.3.3
Angular View Engine wrappers
New @bryntum/schedulerpro-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/schedulerpro-angular-view@5.3.3
Import the component in your Angular application:
import { BryntumSchedulerProComponent } from '@bryntum/schedulerpro-angular-view';
Do not forget to remove previously used @bryntum/schedulerPro-angular package which requires Angular 12 or newer version.
Please check Angular integration guide for additional information.
Scheduler Pro v5.5.0
Restructuring features
Internal development made it necessary to define two features specifically for Scheduler Pro and one for Scheduler:
Grid.feature.RowReorder->Scheduler.feature.RowReorderGrid.feature.CellEdit->SchedulerPro.feature.CellEditScheduler.feature.Dependencies->SchedulerPro.feature.Dependencies
If you extended those features to add some custom logic or imported feature directly from source, you need change base classes to the new ones and use correct import path.
Scheduler Pro 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.
BryntumProjectModel component has been renamed to BryntumSchedulerProProjectModel
The non-visual framework component representing a ProjectModel has been renamed to BryntumSchedulerProProjectModel to match component name from new thin bundles.
Update imported class name and html tag accordingly.
Note: The old BryntumProjectModel component is still available too, it will be removed in version 6.0.0.
Angular
app.component.ts
import { BryntumSchedulerProProjectModelComponent } from '@bryntum/schedulerpro-angular';
app.component.html:
<bryntum-scheduler-pro-project-model
...
/>
React
App.ts:
import { BryntumSchedulerProProjectModel } from '@bryntum/schedulerpro-react';
...
return (
<>
<BryntumSchedulerProProjectModel
...
/>
</>
);
}
Vue
App.vue:
<template>
<div>
<bryntum-scheduler-pro-project-model
...
/>
</div>
</template>
...
import { BryntumSchedulerProProjectModel } from '@bryntum/schedulerpro-vue-3';
Scheduler Pro 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 SchedulerPro({
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 SchedulerPro({
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 SchedulerPro({
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.
Scheduler Pro v5.6.6
[DEPRECATED] BryntumProjectModel framework wrapper is deprecated
BryntumProjectModel framework wrapper will be removed starting from 6.0.0 version. Use BryntumSchedulerProProjectModel instead.
Angular
app.component.ts:
import { BryntumSchedulerProProjectModelComponent } from '@bryntum/schedulerpro-angular';
app.component.html:
<bryntum-schedulerpro-project-model
#project
// Project properties
/>
React
App.tsx:
import { BryntumSchedulerProProjectModelComponent } from '@bryntum/schedulerpro-react';
...
function App() {
return (
<>
<BryntumSchedulerProProjectModel
ref={project}
// Project properties
/>
</>
);
}
Vue
App.vue:
<template>
<bryntum-schedulerpro-project-model
ref="project"
// Project properties
/>
</template>
<script>
import { BryntumSchedulerProProjectModel } from '@bryntum/schedulerpro-vue-3';
export default {
components : {
BryntumSchedulerProProjectModel
}
};
</script>
Scheduler Pro v5.6.7
CalendarModel intervals field is switched to sub-store
The intervals field of CalendarModel was changed in v5.3.0, but the change was not listed in the upgrade guide. Since v5.3.0 it behaves as a store when performing CRUD operations. The change should not affect you unless you have implemented calendars persisting on your backend.
After this change the calendars store CrudManager sync-response should change to this form:
"calendars" : {
"rows" : [
{
"id" : "business",
"intervals" : {
"rows" : [
{
"isWorking" : true,
"id" : 2,
"recurrentEndDate" : "on Mon at 09:00",
"recurrentStartDate" : "on Fri at 17:00"
}
]
}
}
]
}
As you can see intervals field response conforms to a regular stores's format.
You can revert that field change back this way:
// Override CalendarModel to change "intervals" field
class MyCalendarModel extends CalendarModel {
static fields = [
{ name : 'intervals', subStore : false },
]
}
new Gantt({
project : {
// tell project to use the overridden model
calendarModelClass : MyCalendarModel
...
}
...
});