v7.3.0
SupportExamplesFree Trial

Upgrade guide for Scheduler v7.3.0

TimelineHistogram DOM structure changed

The DOM structure 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.

Dependencies feature clickWidth now defaults to 5

The clickWidth config on the Dependencies feature previously defaulted to null (disabled). It now defaults to 5, which draws an invisible but wider clickable line along each dependency path, making it much easier to click and hover dependency lines.

Old code

// No clickWidth configured — dependency lines used their visible width for click detection
new Scheduler({
    features : {
        dependencies : true
    }
});

New code

// To keep the old behavior, explicitly disable the wider click area
new Scheduler({
    features : {
        dependencies : {
            clickWidth : null
        }
    }
});
This doubles the number of SVG lines drawn for dependencies. If you have a large number of visible dependencies and notice a performance impact, you can revert to the previous behavior by setting `clickWidth: null`.

Contents