v7.3.0

What's new in Calendar 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 Calendar, you need to include the following CSS files:

<!-- Structural CSS -->
<link rel="stylesheet" href="build/calendar.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 Calendar 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 responsiveEventHeight config in MonthView

A new responsiveEventHeight config has been added to MonthView. This allows dynamic adjustment of rendered event bar heights. As the month view becomes smaller and the available space for events passes certain breakpoints, the eventHeight is updated to allow more events to fit in the reduced space.

Example usage:

new Calendar({
    modes : {
        month : {
            // When the visible event bar count gets down to 3, then when the row height
            // shrinks, start reducing the event height, stop at a minimum of 14px
            responsiveEventHeight : {
                threshold : 3,
                minHeight : 14
            }
        }
    }
});

This enhancement provides finer control over how busy months render, helping balance legibility and compactness without manual recalculation of event styling.

TimeRanges for a date available in DayCell data block

The DayCell typedef which encapsulates event data about a date now has two new properties which renderers can interrogate:

  • timeRanges - All time ranges which intersect with this date cell, including short ones which are rendered in DayViews.
  • allDayTimeRanges - The all day time ranges which intersect with the whole day of this date cell.

Example usage:

new Calendar({
    modes : {
        month : {
            dayCellRenderer({ timeRanges }, cellDomConfig) {
                if (timeRanges.length) {
                    // Add overall class name
                    cellDomConfig.className['has-time-ranges'] = true;

                    // Add a class name based on TimeRange's own names
                    timeRanges.forEach(t => cellDomConfig.className[`time-range-${t.name.toLowerCase()}`] = true);
                }
            }
        }
    }
});

Contents