v7.3.0

What's new in Calendar v5.0.0+

Calendar v5.0.0

New JavaScript bundles for combining products

Each product now has a new ES module based JavaScript bundle that only contains the product specific code, called a thin bundle. They are intended to be used when combining multiple products on page, to avoid having shared code loaded multiple times. Previously if you combined for example Grid and TaskBoard on a single page you would import from these bundles (minified size):

  • grid.module.min.js (~993 kB)
  • taskboard.module.min.js (~1100 kB)

Both products are built upon Bryntum's core library and hence both of them include the core JavaScript (buttons, toolbars, helpers etc.). With thin bundles you would instead import what you need from each product in the hierarchy separately:

  • core.module.thin.min.js (~643 kB)
  • grid.module.thin.min.js (~268 kB)
  • taskboard.module.thin.min.js (~88 kB)

This way the shared code (from core) is only included once. With the old approach, about 2 MB of JavaScript was loaded, with the new about 1 MB.

The gain (loss actually) will be greater if you combine products that share even more code, like Gantt and Calendar. Calendar builds upon Scheduler > Grid > Core, while Gantt builds upon Scheduler Pro > Scheduler > Grid > Core. When not using thin bundles:

  • gantt.module.min.js (~1978 kB)
  • calendar.module.min.js (~1833 kB)

With thin bundles (many since these products build upon others):

  • core.module.thin.min.js (~643 kB)
  • grid.module.thin.min.js (~268 kB)
  • scheduler.module.thin.min.js (~466 kB)
  • schedulerpro.module.thin.min.js (~119 kB)
  • engine.module.thin.min.js (~266 kB)
  • gantt.module.thin.min.js (~122 kB)
  • calendar.module.thin.min.js (~164 kB)

Total ~ 3811 kB vs 2048 kB (1763 kB less).

You import from the thin bundles in the same way as with any other ES modules bundle. The difference compared to using the full bundles is that you have to import from the correct bundle. For example to use the StringHelper class from Core and GridRowModel from Grid, previously you would have something similar to this:

import { StringHelper, GridRowModel } from 'grid.module.js';

Now you have to import them separately (since they are from different bundles):

import { StringHelper } from 'core.module.thin.js';
import { GridRowModel } from 'grid.module.thin.js';

New CSS bundles for combining products

Each theme now has a new CSS bundle that only contains product specific styling, called a thin bundle. They are intended to be used when combining multiple products on page, to avoid having shared styling loaded multiple times. Previously if you combined for example Grid and TaskBoard on a single page, using the Stockholm theme, you would load:

  • grid.stockholm.css (~244 kB)
  • taskboard.stockholm.css (~243 kB)

Both products are built upon Bryntum's core library and hence both of them include the core CSS (buttons, toolbars, icons etc.). With thin bundles you would instead load each product in the hierarchy separately:

  • core.stockholm.thin.css (~203 kB)
  • grid.stockholm.thin.css (~40 kB)
  • taskboard.stockholm.thin.css (~40 kB)

This way the shared CSS (from core) is only included once. With the old approach, about 487 kB of CSS was loaded, with the new about 283 kB (204 kB less).

The gain (loss actually) will be greater if you combine products that share even more styling, like Gantt and Calendar. Calendar builds upon Scheduler > Grid > Core, while Gantt builds upon Scheduler Pro > Scheduler > Grid > Core. When not using thin bundles:

  • gantt.stockholm.css (~659 kB)
  • calendar.stockholm.css (~655 kB)

With thin bundles (many since these products build upon others):

  • core.stockholm.thin.css (~203 kB)
  • grid.stockholm.thin.css (~40 kB)
  • scheduler.stockholm.thin.css (~363 kB)
  • schedulerpro.stockholm.thin.css (~10 kB)
  • gantt.stockholm.thin.css (~27 kB)
  • calendar.stockholm.thin.css (~47 kB)

Total ~ 1314 kB vs 690 kB (624 kB less).

In your html file, you would for the Gantt + Calendar scenario have something similar to:

<link rel="stylesheet" href="core.stockholm.thin.css" data-bryntum-theme>  
<link rel="stylesheet" href="grid.stockholm.thin.css" data-bryntum-theme>  
<link rel="stylesheet" href="scheduler.stockholm.thin.css" data-bryntum-theme>  
<link rel="stylesheet" href="schedulerpro.stockholm.thin.css" data-bryntum-theme>  
<link rel="stylesheet" href="gantt.stockholm.thin.css" data-bryntum-theme>  
<link rel="stylesheet" href="calendar.stockholm.thin.css" data-bryntum-theme>
Note the usage of the data-bryntum-theme attribute above, it is required if the app will be switching theme at runtime using DomHelper.setTheme().

Simplified test case creation

When reporting a hard to reproduce issue on Bryntum's support forum we often request a test case showing the issue. Getting a good test case greatly reduces the time it takes from reporting the bug until a fix can be released. Worst case we won't be able to find and fix the bug at all without one.

We understand that for complex apps it is not always trivial to produce a standalone test case. The app might be using a lot of different configs and the issue might only appear with a certain dataset etc. To simplify the process of creating a test case we have added a new function called downloadTestCase() to all Bryntum products. Running it collects the current value for the configs your app is using, inlines the current dataset and compiles configs and data into a JavaScript app that is then downloaded.

The app will most likely require manual tweaking before you can submit it to us, but we are hoping it will make creating a test case easier for you. Run calendar.downloadTestCase() on the console in a demo to try it. Any feedback on how this could be improved further is welcome on the forums!

Calendar v5.0.3

ProjectModel wrapper for Angular, React & Vue

Calendar ships with a new ProjectModel wrapper that can be used to share data between multiple Bryntum components in the same app by pointing them all to the same project instance. Either you use it to load data from the backend using the built-in CrudManager or you bind your locally available data to it.

Integration details can be found in guides for Angular, React and Vue.

Calendar v5.1.0

Introducing Create React App templates

Create React App script templates are now available in the public npm repository.

If you are using javascript only, just type:

npx create-react-app my-app --template @bryntum/cra-template-javascript-calendar

or if you prefer using typescript:

npx create-react-app my-app --template @bryntum/cra-template-typescript-calendar

Note: Please feel free to change my-app to your preferred application name

Check the React integration guide for more information.

Simplified url configuration on CrudManager

Configuring CrudManager was made a little easier by introducing shortcuts for setting load and sync urls using the new loadUrl and syncUrl configs. When your application does not need to supply any additional configs to the transport layer you can use them in favor of having to nest the urls. Old code like this:

const calendar = new Calendar({
    crudManager : {
        transport : {
            load : {
                url : 'load.aspx'
            }
        }
    }
})

Can now be written more conveniently like this:

const calendar = new Calendar({
    crudManager : {
        loadUrl : 'load.aspx'
    }
})

New module bundle for Angular

Bryntum Calendar 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 calendar.module.js bundle in favor of removed calendar.lite.umd.js one.

Check the upgrading guide for the details.

New module bundle with WebComponents

Bryntum Calendar is now delivered with new calendar.wc.module.js ES Module bundle with WebComponents.

Check the upgrading guide for the details.

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.

Calendar v5.2.6

Support for React Components in tooltips and widgets

React components are now supported in tooltips and widgets. Tooltips have renderer or template function that can now return valid JSX that represents a React component. Widgets can now supply JSX as their html property. For example:

Event tooltip:

eventTooltipFeature: {
    template: data => (
        <React.StrictMode>
            <DemoEventTip data={data} />
        </React.StrictMode>
    )
},

React component in widget:

bbar : {
    items:[{
        type:'widget',
        html:<DemoWidget />
    }]
},

See the React guide for details.

Calendar v5.3.0

AjaxHelper.fetch now supports passing parameters in request body

Since this release AjaxHelper.fetch method can pass provided queryParams in the request body instead of query string. This happens for application/x-www-form-urlencoded and multipart/form-data content types when addQueryParamsToBody option is set to true:

AjaxHelper.fetch('url', {
    headers : {
        'Content-Type' : 'application/x-www-form-urlencoded'
    },
    addQueryParamsToBody : true
});

Please check addQueryParamsToBody in FetchOptions

Please note that this behavior is disabled by default so if you need to enable it globally please use AjaxHelper.DEFAULTFETCHOPTIONS:

// enable addQueryParamsToBody by default
AjaxHelper.DEFAULT_FETCH_OPTIONS = {
    addQueryParamsToBody : true
}

Time Zone Support

Support for time zone conversion has been added to all Bryntum scheduling products. Simply set a IANA time zone identifier as value for the timeZone config and that's it.

But since time zones is not natively supported in JavaScript we strongly recommend to read our Time zone guide.

Also, please check out the new Time zone demo.

new Calendar({
    timeZone : 'America/Chicago'
});

Time Ranges

Calendars have a new timeRanges feature that allows applications to render arbitrary ranges of time as well as points in time (as lines). You can apply custom background styling and add rotated headers with text and icons beside with the calendar's normal events.

Check out the new Time ranges demo.

new Calendar({
    features : {
        timeRanges : {}
    }
});

New locales

New locales for 31 languages have been added. Currently available languages are listed in the localization guide.

Calendar v5.3.3

Angular IVY and View Engine wrappers

Bryntum Calendar now ships with two npm Angular wrappers packages to support different versions of Angular framework.

@bryntum/calendar-angular is designed to work with Angular 12 and newer versions, which use the IVY rendering engine.

@bryntum/calendar-angular-view is designed to work with Angular 11 and older versions, which use the View Engine for rendering.

Please check Angular integration guide for the additional information.

Calendar v5.4.0

New DayResourceView mode.

There is a new dayresourceview mode which shows DayResourceView widget with events in separate columns for each resource, grouped under each day.

Check out the new Day Resource demo.

Calendar v5.6.0

New npm packages for combining products

This release introduces a new set of npm packages and framework components, that allows combining multiple Bryntum products in the same application.

These packages contain the product specific code only, as opposed to the current packages that has all code for the products each product builds upon (for example Scheduler contains all code from Grid & Core).

The new packages are called thin packages, and moving forward it will be the recommended way of using Bryntum products in npm based applications (for all supported frameworks). The packages are initially available for licensed users only, but will be made available for trial users in the near future.

The following packages are available:

Package Purpose
@bryntum/core-thin Bryntum Core data and UI components package
@bryntum/grid-thin Bryntum Grid component package
@bryntum/scheduler-thin Bryntum Scheduler component package
@bryntum/schedulerpro-thin Bryntum Scheduler Pro component package
@bryntum/gantt-thin Bryntum Gantt component package
@bryntum/calendar-thin Bryntum Calendar component package
@bryntum/taskboard-thin Bryntum TaskBoard component package
@bryntum/engine-thin Bryntum Scheduling engine component package

Applications should install packages for the products they use, and the products those are built upon (see links to guides below for more information). For example an application using Scheduler Pro should also install Scheduler, Grid & Core:

npm install @bryntum/core-thin @bryntum/grid-thin @bryntum/scheduler-thin @bryntum/schedulerpro-thin

There are also new corresponding wrappers for the supported frameworks, which should be used instead of the current wrappers. For example for React:

Package Purpose
@bryntum/core-react-thin Bryntum Core UI widgets React wrappers package
@bryntum/grid-react-thin Bryntum Grid React wrapper package
@bryntum/scheduler-react-thin Bryntum Scheduler React wrapper package
@bryntum/schedulerpro-react-thin Bryntum Scheduler Pro React wrapper package
@bryntum/gantt-react-thin Bryntum Gantt React wrapper package
@bryntum/calendar-react-thin Bryntum Calendar React wrapper package
@bryntum/taskboard-react-thin Bryntum TaskBoard React wrapper package

Applications should install wrappers only for the products they use, there is no need to install them for the products those are built upon. For example an application using Scheduler Pro:

npm install @bryntum/schedulerpro-react-thin

More information:

Recurring TimeRanges

The definitions of TimeRanges as loaded by the TimeRanges Feature may now contain a recurrenceRule field, and will now recur as specified in the UI.

Functions and events declarations for TypeScript have been improved

Declarations of class config/property functions and events (which are represented as onEventName functions) were improved to contain all available parameters and return type.

See examples below:

Old declarations:

    /**
     * User typed into the field. Please note that the value attached to this event is the raw input field value and
     * not the combos value
     */
    onInput: Function|string

    /**
     * Template function that can be used to customize the displayed value
     */
    displayValueRenderer: Function

New declarations:

    /**
     * User typed into the field. Please note that the value attached to this event is the raw input field value and
     * not the combos value
     */
    onInput: ((event : { source: Combo, value: string, event: Event }) => void)|string

    /**
     * Template function that can be used to customize the displayed value
     */
    displayValueRenderer: (record: Model, combo: Combo) => string|null

Contents