v7.3.0
SupportExamplesFree Trial

Upgrade guide for Scheduler Pro v7.3.0

ResourceHistogram and ResourceUtilization DOM structure changed

The DOM structure of ResourceHistogram and ResourceUtilization (subclasses of TimelineHistogram) has changed. Histogram bars are now rendered in a shared SVG canvas (<svg>) overlaying the time axis, instead of individual SVGs inside each row cell. Custom CSS selectors targeting histogram bars may need updating.

Old structure (per-row SVG):

<div>
    <div>
        <svg>
            <rect ... />
        </svg>
    </div>
</div>

New structure (shared canvas):

<svg>
    <g data-record-id="...">
        <rect ... />
    </g>
</svg>

If you have custom CSS or JavaScript targeting .b-histogram svg rect or similar selectors, update them to target .b-histogram-canvas g rect instead.

Removed content: var(--fa) convenience rule from .b-icon / .b-fw-icon

The CSS convenience rule content: var(--fa) has been removed from the .b-icon::before and .b-fw-icon::before selectors. This rule previously allowed using Font Awesome icon classes like fa-book without also specifying the fa base class, but it interfered with using custom icon fonts alongside Bryntum products.

If you use Font Awesome icons with b-icon or b-fw-icon classes, you now need to include the fa base class.

Old code

// Button icon (still works - Button auto-adds `fa` class)
new Button({ icon : 'fa-book' });

// Direct HTML (BROKEN - needs `fa` class)
'<i class="fa-book"></i>'

// DomClassList (BROKEN - needs `fa` class)
domConfig.className['fa-book'] = 1;

New code

// Button icon (still works, but recommended to include `fa`)
new Button({ icon : 'fa fa-book' });

// Direct HTML (fixed)
'<i class="fa-book"></i>'

// DomClassList (fixed)
domConfig.className['fa'] = domConfig.className['fa-book'] = 1;
The `Button` and `MenuItem` widgets automatically add the `fa` base class when the icon starts with `fa-`, so existing code using these widgets will continue to work. However, we recommend updating to include `fa` explicitly for clarity and consistency.
If you set `iconCls` on event, resource, or timeRange records (e.g., `iconCls: 'fa-cog'`), you must now include the `fa` base class: `iconCls: 'fa fa-cog'`. Calendar, Scheduler, and other products that render these icons with the `b-icon` class will no longer display them correctly without the `fa` base class.

Scheduler Pro now has own EventDrag feature class

Since this release Scheduler Pro has its own EventDrag feature class. The change should not affect your application unless it explicitly deals with the class imported from basic Scheduler (which now should not be used for SchedulerPro).

Old code

import { EventDrag } from '@bryntum/scheduler-thin';

New code

import { EventDrag } from '@bryntum/schedulerpro-thin';

Contents