v7.3.0

Upgrade guides for Calendar v5.0.0+

Calendar v5.0.0

React wrappers now use module bundle

The React wrappers previously used the UMD bundle to import required classes:

Old code:

import { EventModel } from '@bryntum/calendar/calendar.umd.js';

UMD bundle is not used anymore in the wrappers so the import line in the above code (and all your files that import from it) needs to be changed:

New code:

import { EventModel } from '@bryntum/calendar';

Imports from @bryntum/calendar-react remain same.

Calendar v5.0.3

Validating CrudManager responses by default

The validateResponse flag on CrudManager has been changed to default to true. When enabled, it validates CrudManager responses from the backend and outputs a message on console if the format isn't valid. This is helpful during the development phase, but can be turned off in production:

const calendar = new Calendar({
   crudManager : {
       // Turn response validation off
       validateResponse : false,
       ...
   } 
});

New Vue wrapper config option relayStoreEvents

This option was introduced to allow relaying of store events to the Calendar instance. It defaults to false (no events relayed) which changes the default behavior so if your application relies on relayed events, configure it as true.

Example:

<bryntum-calendar
    :relayStoreEvents="true"
>

The config option applies to both Vue 2 and Vue 3.

Calendar v5.1.0

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.

Your Angular applications should be upgraded to use the new calendar.module.js bundle which is set as main for @bryntum/calendar NPM package.

Replace all application imports from Bryntum packages as shown below:

Old code:

import { Calendar } from '@bryntum/calendar/calendar.lite.umd.js';

New code:

import { Calendar } from '@bryntum/calendar';

New module bundle with WebComponents

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

Your applications which use WebComponents and modules bundle should be upgraded to import from new calendar.wc.module.js instead of calendar.module.js.

Calendar v5.1.4

DatePicker's events property deprecated

The events config in the Calendar sidebar's DatePicker has been renamed to showEvents. The events property is deprecated but will continue to work during its deprecation period below 6.0.0 version.

Old code:

new Calendar({
    datePicker : {
        events : 'count'
    },
    ...
})

New code:

new Calendar({
    datePicker : {
        showEvents : 'count'
    },
    ...
})

Calendar v5.2.5

Deprecations

The dateRangeChange event is deprecated. Instead, the event dateRangeRequested is fired on all requests to an event store for events in a date range. A new changed flag is included in the event if the dates are different from the last set of events requested.

Old code:

calendar.on({
    dateRangeChange() {
        // Handle date range changing
    }
});

New code:

calendar.on({
    dateRangeRequested(event) {
        if (event.changed) {
            // Handle date range changing
        }
    }
});

Calendar v5.3.0

Localization update

LocaleManager.registerLocale has been deprecated. LocaleHelper.publishLocale should be used instead.

Old code:

LocaleManager.registerLocale('Es', {
    desc : 'Spanish', locale : {
        localeName : 'Es',
        localeDesc : 'Spanish',
        locale     : {
            /* localization */
        }
    }
});

New code:

LocaleHelper.publishLocale({
    localeName : 'Es',
    localeDesc : 'Spanish',
    localeCode : 'es',
    /* localization */
});

LocaleManager.extendLocale has been deprecated. LocaleManager.applyLocale should be used instead.

Old code:

LocaleManager.extendLocale('Es', {
    desc : 'Spanish', locale : {
        locale : {
            /* localization */
        }
    }
});

New code:

LocaleManager.applyLocale({
    localeName : 'Es',
    localeDesc : 'Spanish',
    localeCode : 'es',
    /* localization */
});

Check our localization guide for the details.

Calendar v5.3.3

Angular View Engine wrappers

New @bryntum/calendar-angular-view is designed to work with Angular 11 and older versions, which use the View Engine for rendering. If you are using one of the legacy Angular versions, please follow these steps to use the package:

Install the package using npm:

npm install @bryntum/calendar-angular-view@5.3.3

Import the component in your Angular application:

import { BryntumCalendarComponent } from '@bryntum/calendar-angular-view';

Do not forget to remove previously used @bryntum/calendar-angular package which requires Angular 12 or newer version.

Please check Angular integration guide for additional information.

Calendar v5.6.0

New location for Core.util.helper.Point class

The Core.util.helper.Point class has been moved to solve circular module dependencies. It is now a named (Point) export of the Core.util.helper.Rectangle module.

Changes are required if you are directly importing the class from sources:

Old code:

import Point from 'path-to-lib/Core/helper/util/Point.js';

New code:

import { Point } from 'path-to-lib/Core/helper/util/Rectangle.js';

Note: No changes required for importing from module or umd bundles.

ScrollOptions has been renamed to BryntumScrollOptions

If you use TypeScript in your application rename imported type ScrollOptions to BryntumScrollOptions.

Old code:

import { ScrollOptions } from '@bryntum/calendar'

New code:

import { BryntumScrollOptions } from '@bryntum/calendar'

BryntumProjectModel component has been renamed to BryntumCalendarProjectModel

The non-visual framework component representing a ProjectModel has been renamed to BryntumCalendarProjectModel to match component name from new thin bundles.

Update imported class name and html tag accordingly.

Note: The old BryntumProjectModel component is still available too, it will be removed in version 6.0.0.

Angular

app.component.ts

import { BryntumCalendarProjectModel } from '@bryntum/calendar-angular';

app.component.html:

<bryntum-calendar-project-model
...
/>

React

App.ts:

import { BryntumCalendarProjectModel } from '@bryntum/calendar-react';

...

return (
     <>
         <BryntumCalendarProjectModel
             ...
         />
     </>
 );
}

Vue

App.vue:

<template>
    <div>
        <bryntum-calendar-project-model
            ...
        />
    </div>
</template>

...

import { BryntumCalendarProjectModel } from '@bryntum/calendar-vue-3';

Calendar v5.6.6

[DEPRECATED] BryntumProjectModel framework wrapper is deprecated

BryntumProjectModel framework wrapper will be removed starting from 6.0.0 version. Use BryntumCalendarProjectModel instead.

Angular

app.component.ts:

import { BryntumCalendarProjectModel } from '@bryntum/calendar-angular';

app.component.html:

<bryntum-calendar-project-model
   #project
   // Project properties   
/>

React

App.tsx:

import { BryntumCalendarProjectModel } from '@bryntum/calendar-react';

...

function App() {
    return (
        <>
            <BryntumCalendarProjectModel
                ref={project}
                // Project properties
            />
        </>
    );
}

Vue

App.vue:

<template>
    <bryntum-calendar-project-model
        ref="project"
        // Project properties
    />
</template>

<script>
    import { BryntumCalendarProjectModel } from '@bryntum/calendar-vue-3';

    export default {
        components : {
            BryntumCalendarProjectModel
        }
    };
</script>

Contents