v7.3.0

What's new in Scheduler v7.0.0

New themes & CSS

All products in the Bryntum suite now has new themes:

  • Svalbard Light & Dark
  • Stockholm Light & Dark
  • Visby Light & Dark
  • Material3 Light & Dark
  • High Contrast Light & Dark

The new themes are based on CSS variables and are easier to customize than the old themes. The themes only change CSS variable (CSS custom properties) values, there are no custom selectors etc. in them. A single theme file has the custom values for all products.

The structural CSS for each product is separated from the theme CSS, making the theme files much smaller than before.

To for example include the "Material3 Light" theme in your app for Scheduler, you need to include the following CSS files:

<!-- Structural CSS -->
<link rel="stylesheet" href="build/scheduler.css">
<!-- Theme CSS -->
<link rel="stylesheet" href="build/material3-light.css">

Also note that none of the new themes applies any font-family. The demo styling does, but the themes themselves do not. Previously the Material theme pulled in Roboto.

No built-in FontAwesome Free

The themes also no longer include FontAwesome Free, so you need to include it yourself if you want to use icons. This change was made to not bloat the CSS files for apps that do not use our default icons.

This also means that we no longer re-scope FontAwesome (there are no b-fa-xx rules). Instead, use FontAwesome classes as you normally would.

There is still a version of FontAwesome Free included in the build folder of the Scheduler package for your convenience. Include it in your app with something like this:

<!-- Optionally include FontAwesome Free -->
<link rel="stylesheet" href="build/fontawesome/css/fontawesome.css">
<link rel="stylesheet" href="build/fontawesome/css/solid.css">

If you chose to not include it (or your own version of FontAwesome), your app will need to override our b-icon-xx rules to show the icons you are using instead.

CSS variables

As mentioned above, the styling is now based on CSS variables (CSS custom properties). All Bryntum CSS variables are prefixed with --b- to avoid conflicts with other CSS variables in your app. For example, the background of a Panel is set using the --b-panel-background variable:

.my-custom-panel {
  --b-panel-background : #ccc;
}

Available CSS variables are listed in the docs. Make sure to also check the updated customization guides.

Selector normalization

Previously we used a somewhat random mix of single words and kebab-casing for the CSS selectors (for example b-celledit, but b-grid-cell). This has been normalized to use kebab-case. For example the CellEdit features no longer adds the .b-celledit class, but instead correctly kebab cased .b-cell-edit.

This will likely affect any custom styling you have, please check your selectors.

Advanced - Loading from sources

When loading from sources, the CSS is pulled in automatically. Each imported class adds a <link> tag to the head of the document. This should not be used in production, and it might lead to some timing issues. But, it lets you create custom structural CSS files with only the components you need. We will be adding a guide on this later.

New event styles

The built-in set of event styles have been reworked for the new themes. The following event styles are available now:

  • 'tonal' (default) - flat pale look with text in darker shade of events color
  • 'filled' - flat look (similar to old 'plain' style)
  • 'bordered' - has border in darker shade of events color (similar to old 'border' style)
  • 'traced' - has border in darker shade of events color with a pale fill
  • 'outlined' - only border + text until hovered (similar to old 'hollow' style)
  • 'indented' - has colored text and wide left border in same color (similar to old 'colored' style)
  • 'rounded' - minimalistic style with rounded corners
  • 'line' - as a line with the text below it
  • 'dashed' - as a dashed line with the text below it
  • 'minimal' - as a thin line with small text above it
  • 'gantt' - The default style used for Gantt task bars

New transition config

Scheduler has a new transition config, which replaces the old individual animation related configs. The new config is an object with properties that controls different kinds of transitions. The following transitions can be configured:

  • removeRecord - Transition removing rows (replaces animateRemovingRows)
  • insertRecord - Transition inserting rows (new)
  • toggleTreeNode - Transition collapsing/expanding tree nodes (replaces animateTreeNodeToggle)
  • filterRemoval - Transition filters leading to rows being removed (only during specific conditions, replaces animateFilterRemovals)
  • toggleRegion - Transition collapsing/expanding regions (replaces RegionResize.animateCollapseExpand)
  • toggleColumn - Transition showing/hiding columns (new)
  • toggleGroup - Transition collapsing/expanding groups (new)
  • expandCollapseColumn - Transition expanding/collapsing parent/group columns (new)
  • changeEvent - Transition event record changes (replaces enableEventAnimations)
  • removeEvent - Transition event removals (new)

All transitions are enabled by default.

Usage:

const scheduler = new Scheduler({
    transition : {
        removeRecord : true/false,
        insertRecord : true/false,
        toggleTreeNode : true/false,
        filterRemoval : true/false,
        toggleRegion : true/false,
        toggleColumn : true/false,
        toggleGroup : true/false,
        expandCollapseColumn : true/false,
        changeEvent : true/false,
        removeEvent : true/false
    }
});

ScheduleContext feature now supports key navigation and multiple cell selection

The release adds key navigation and multiple cell selection to ScheduleContext feature. In order to enable them please use the following configuration:

new Scheduler({
    ...
    features : {
        scheduleContext : {
            // enable keyboard navigating for timeaxis cells
            keyNavigation : true,
            // enable multiple timeaxis cells selecting
            multiSelect   : true
        }
    }
});

Please see more details in the feature docs.

Contents