Combining multiple Bryntum products

Thin packages overview

Bryntum's products share the same data model and can be combined to provide different views of the underlying data.

When combining multiple Bryntum products in a single application using Angular, you should use thin npm packages. This avoids runtime errors and also reduces the amount of code and CSS that has to be downloaded.

The main difference between thin packages and regular packages is that thin only contain product specific code and styling, while regular contain code and styling for all underlying products (for example Scheduler includes Scheduler + Grid + Core). Thin packages are valid for building a single product application.

It is not possible to import several regular (non-thin) Bryntum npm packages like @bryntum/grid and @bryntum/calendar in one application. Doing this will lead to a runtime console error:

The Bryntum Scheduler bundle was loaded multiple times by the application.

Do not mix regular (e.g., @bryntum/scheduler) and thin (e.g., @bryntum/scheduler-thin) packages in the same project. If using thin packages, remove regular ones and follow this guide to install all required dependencies.

Thin packages list

Bryntum's npm repository contains thin packages for combining multiple Bryntum products in one application.

Thin limited trial library packages:

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

To use framework wrappers, trial packages listed above require aliasing the @bryntum/*-thin-trial package as @bryntum/*-thin during installation, as shown below. Once installed, the provided app code samples can be used without modification

Example for @bryntum/scheduler-thin-trial package:

npm install @bryntum/scheduler-thin@npm:@bryntum/scheduler-thin-trial@7.3.0

Alternatively, you can directly add entries to the "dependencies" section of the package.json project file as follows:

"dependencies": {
  "@bryntum/scheduler-thin": "npm:@bryntum/scheduler-thin-trial@7.3.0",
}

Thin licensed library packages:

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

Thin Angular wrapper packages:

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

Package dependencies

Each package contains code related to the specific product only and requires installing a dependency packages for all underlying products. This is not done automatically to give you full control over the installed packages.

List of required dependencies used in package.json for Angular application:

@bryntum/core-angular-thin is listed among the available framework wrapper packages, but you only need to install it if you use Bryntum Core UI widgets in your app (e.g., BryntumButton, BryntumCombo etc.). It's not needed otherwise.
However, you should always install all API packages as they are required for the proper functioning.

Please note that you need an active license for each product to use it in the UI.

Grid Scheduler Scheduler Pro Gantt Calendar TaskBoard

API packages:

{
  "dependencies": {
    "@bryntum/core-thin": "7.3.0",
    "@bryntum/grid-thin": "7.3.0"
  }
}

Framework wrapper packages:

{
  "dependencies": {
    "@bryntum/core-angular-thin": "7.3.0",
    "@bryntum/grid-angular-thin": "7.3.0"
  }
}

API packages:

{
  "dependencies": {
    "@bryntum/core-thin": "7.3.0",
    "@bryntum/engine-thin": "7.3.0",
    "@bryntum/grid-thin": "7.3.0",
    "@bryntum/scheduler-thin": "7.3.0"
  }
}

Framework wrapper packages:

{
  "dependencies": {
    "@bryntum/core-angular-thin": "7.3.0",
    "@bryntum/scheduler-angular-thin": "7.3.0"
  }
}

API packages:

{
  "dependencies": {
    "@bryntum/core-thin": "7.3.0",
    "@bryntum/engine-thin": "7.3.0",
    "@bryntum/grid-thin": "7.3.0",
    "@bryntum/scheduler-thin": "7.3.0",
    "@bryntum/schedulerpro-thin": "7.3.0"
  }
}

Framework wrapper packages:

{
  "dependencies": {
    "@bryntum/core-angular-thin": "7.3.0",
    "@bryntum/schedulerpro-angular-thin": "7.3.0"
  }
}

API packages:

{
  "dependencies": {
    "@bryntum/core-thin": "7.3.0",
    "@bryntum/engine-thin": "7.3.0",
    "@bryntum/grid-thin": "7.3.0",
    "@bryntum/scheduler-thin": "7.3.0",
    "@bryntum/schedulerpro-thin": "7.3.0",
    "@bryntum/gantt-thin": "7.3.0"
  }
}

Framework wrapper packages:

{
  "dependencies": {
    "@bryntum/core-angular-thin": "7.3.0",
    "@bryntum/gantt-angular-thin": "7.3.0"
  }
}

API packages:

{
  "dependencies": {
    "@bryntum/core-thin": "7.3.0",
    "@bryntum/engine-thin": "7.3.0",
    "@bryntum/grid-thin": "7.3.0",
    "@bryntum/scheduler-thin": "7.3.0",
    "@bryntum/calendar-thin": "7.3.0"
  }
}

Framework wrapper packages:

{
  "dependencies": {
    "@bryntum/core-angular-thin": "7.3.0",
    "@bryntum/calendar-angular-thin": "7.3.0"
  }
}

API packages:

{
  "dependencies": {
    "@bryntum/core-thin": "7.3.0",
    "@bryntum/engine-thin": "7.3.0",
    "@bryntum/taskboard-thin": "7.3.0"
  }
}

Framework wrapper packages:

{
  "dependencies": {
    "@bryntum/core-angular-thin": "7.3.0",
    "@bryntum/taskboard-angular-thin": "7.3.0"
  }
}

Modules configuration

Importing package module for Angular application app.module.ts:

Grid Scheduler Scheduler Pro Gantt Calendar TaskBoard

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BryntumCoreModule } from '@bryntum/core-angular-thin'; import { BryntumGridModule } from '@bryntum/grid-angular-thin'; import { BryntumSchedulerModule } from '@bryntum/scheduler-angular-thin'; import { AppComponent } from './app'; @NgModule({ declarations : [ AppComponent ], imports : [ BrowserModule, BryntumCoreModule, BryntumGridModule, BryntumSchedulerModule ], providers : [], bootstrap : [AppComponent] }) export class AppModule {}

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BryntumCoreModule } from '@bryntum/core-angular-thin'; import { BryntumGridModule } from '@bryntum/grid-angular-thin'; import { BryntumSchedulerModule } from '@bryntum/scheduler-angular-thin'; import { BryntumSchedulerProModule } from '@bryntum/schedulerpro-angular-thin'; import { AppComponent } from './app'; @NgModule({ declarations : [ AppComponent ], imports : [ BrowserModule, BryntumCoreModule, BryntumGridModule, BryntumSchedulerModule, BryntumSchedulerProModule ], providers : [], bootstrap : [AppComponent] }) export class AppModule {}

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BryntumCoreModule } from '@bryntum/core-angular-thin'; import { BryntumGridModule } from '@bryntum/grid-angular-thin'; import { BryntumSchedulerModule } from '@bryntum/scheduler-angular-thin'; import { BryntumSchedulerProModule } from '@bryntum/schedulerpro-angular-thin'; import { BryntumGanttModule } from '@bryntum/gantt-angular-thin'; import { AppComponent } from './app'; @NgModule({ declarations : [ AppComponent ], imports : [ BrowserModule, BryntumCoreModule, BryntumGridModule, BryntumSchedulerModule, BryntumSchedulerProModule, BryntumGanttModule ], providers : [], bootstrap : [AppComponent] }) export class AppModule {}

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BryntumCoreModule } from '@bryntum/core-angular-thin'; import { BryntumGridModule } from '@bryntum/grid-angular-thin'; import { BryntumSchedulerModule } from '@bryntum/scheduler-angular-thin'; import { BryntumCalendarModule } from '@bryntum/calendar-angular-thin'; import { AppComponent } from './app'; @NgModule({ declarations : [ AppComponent ], imports : [ BrowserModule, BryntumCoreModule, BryntumGridModule, BryntumSchedulerModule, BryntumCalendarModule ], providers : [], bootstrap : [AppComponent] }) export class AppModule {}

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BryntumCoreModule } from '@bryntum/core-angular-thin'; import { BryntumTaskBoardModule } from '@bryntum/taskboard-angular-thin'; import { AppComponent } from './app'; @NgModule({ declarations : [ AppComponent ], imports : [ BrowserModule, BryntumCoreModule, BryntumTaskBoardModule ], providers : [], bootstrap : [AppComponent] }) export class AppModule {}

Product localization

For a complete localization information please check localization guide.

Localization can be done using these two methods:

Using source code

Import product locale from a thin package in your application

Example for German De locale:

Grid Scheduler Scheduler Pro Gantt Calendar TaskBoard

import '@bryntum/grid-thin/lib/localization/De.js'

import '@bryntum/scheduler-thin/lib/localization/De.js'

import '@bryntum/schedulerpro-thin/lib/localization/De.js'

import '@bryntum/gantt-thin/lib/localization/De.js'

import '@bryntum/calendar-thin/lib/localization/De.js'

import '@bryntum/taskboard-thin/lib/localization/De.js'

Using prebuilt full locale

Import full UMD locale from the installed @bryntum package.

Example for De locale:

Grid Scheduler Scheduler Pro Gantt Calendar TaskBoard

import '@bryntum/grid-thin/lib/locales/grid.locale.De.js'

import '@bryntum/scheduler-thin/lib/locales/scheduler.locale.De.js'

import '@bryntum/schedulerpro-thin/lib/locales/schedulerpro.locale.De.js'

import '@bryntum/gantt-thin/lib/locales/gantt.locale.De.js'

import '@bryntum/calendar-thin/lib/locales/calendar.locale.De.js'

import '@bryntum/taskboard-thin/lib/locales/taskboard.locale.De.js'

Full locale can also be added to the index.html file of your application. You need to copy locales from the installed @bryntum package to a folder located at PATH_TO_LOCALE first, and then add this script to the application's home page.

Example for Grid product and German De locale:

Grid Scheduler Scheduler Pro Gantt Calendar TaskBoard

<script src="PATH_TO_LOCALE/locales/grid.locale.De.js"></script>

<script src="PATH_TO_LOCALE/locales/scheduler.locale.De.js"></script>

<script src="PATH_TO_LOCALE/locales/schedulerpro.locale.De.js"></script>

<script src="PATH_TO_LOCALE/locales/gantt.locale.De.js"></script>

<script src="PATH_TO_LOCALE/locales/calendar.locale.De.js"></script>

<script src="PATH_TO_LOCALE/locales/taskboard.locale.De.js"></script>

Product configuration

Importing product configuration for Angular application app.config.tsx:

Grid Scheduler Scheduler Pro Gantt Calendar TaskBoard

import { BryntumGridProps } from '@bryntum/grid-angular-thin';

const gridProps : BryntumGridProps = {
    // Grid configuration
};

import { BryntumSchedulerProps } from '@bryntum/scheduler-angular-thin';

const schedulerProps : BryntumSchedulerProps = {
    // Scheduler configuration
};

import { BryntumSchedulerProProps } from '@bryntum/schedulerpro-angular-thin';

const schedulerProProps : BryntumSchedulerProProps = {
    // Scheduler Pro configuration
};

import { BryntumGanttProps } from '@bryntum/gantt-angular-thin';

const ganttProps : BryntumGanttProps = {
    // Gantt configuration
};

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

const calendarProps : BryntumCalendarProps = {
    // Calendar configuration
};

import { BryntumTaskBoardProps } from '@bryntum/taskboard-angular-thin';

const taskBoardProps : BryntumTaskBoardProps = {
    // TaskBoard configuration
};

Product styling

List of required styles for Angular application app.component.scss:

Grid Scheduler Scheduler Pro Gantt Calendar TaskBoard

SCSS/CSS:

/* FontAwesome is used for icons */
@import '@bryntum/core-thin/fontawesome/css/fontawesome.css';
@import "@bryntum/core-thin/fontawesome/css/solid.css";
/* Structural CSS */
@import '@bryntum/core-thin/core.css';
@import '@bryntum/grid-thin/grid.css';
/* Theme */
@import '@bryntum/core-thin/material3-light.css';

SCSS/CSS:

/* FontAwesome is used for icons */
@import '@bryntum/core-thin/fontawesome/css/fontawesome.css';
@import "@bryntum/core-thin/fontawesome/css/solid.css";
/* Structural CSS */
@import '@bryntum/core-thin/core.css';
@import '@bryntum/grid-thin/grid.css';
@import '@bryntum/scheduler-thin/scheduler.css';
/* Theme */
@import '@bryntum/core-thin/material3-light.css';

SCSS/CSS:

/* FontAwesome is used for icons */
@import '@bryntum/core-thin/fontawesome/css/fontawesome.css';
@import "@bryntum/core-thin/fontawesome/css/solid.css";
/* Structural CSS */
@import '@bryntum/core-thin/core.css';
@import '@bryntum/grid-thin/grid.css';
@import '@bryntum/scheduler-thin/scheduler.css';
@import '@bryntum/schedulerpro-thin/schedulerpro.css';
/* Theme */
@import '@bryntum/core-thin/material3-light.css';

SCSS/CSS:

/* FontAwesome is used for icons */
@import '@bryntum/core-thin/fontawesome/css/fontawesome.css';
@import "@bryntum/core-thin/fontawesome/css/solid.css";
/* Structural CSS */
@import '@bryntum/core-thin/core.css';
@import '@bryntum/grid-thin/grid.css';
@import '@bryntum/scheduler-thin/scheduler.css';
@import '@bryntum/schedulerpro-thin/schedulerpro.css';
@import '@bryntum/gantt-thin/gantt.css';
/* Theme */
@import '@bryntum/core-thin/material3-light.css';

SCSS/CSS:

/* FontAwesome is used for icons */
@import '@bryntum/core-thin/fontawesome/css/fontawesome.css';
@import "@bryntum/core-thin/fontawesome/css/solid.css";
/* Structural CSS */
@import '@bryntum/core-thin/core.css';
@import '@bryntum/grid-thin/grid.css';
@import '@bryntum/scheduler-thin/scheduler.css';
@import '@bryntum/calendar-thin/calendar.css';
/* Theme */
@import '@bryntum/core-thin/material3-light.css';

SCSS/CSS:

/* FontAwesome is used for icons */
@import '@bryntum/core-thin/fontawesome/css/fontawesome.css';
@import "@bryntum/core-thin/fontawesome/css/solid.css";
/* Structural CSS */
@import '@bryntum/core-thin/core.css';
@import '@bryntum/taskboard-thin/taskboard.css';
/* Theme */
@import '@bryntum/core-thin/material3-light.css';

If you import styles from *.css files, please ensure that fonts from @bryntum/core-thin are copied to assets.

Add this to angular.json file:

"assets": [
  {
    "glob": "**/*",
    "input": "node_modules/@bryntum/core-thin/fonts",
    "output": "assets/fonts"
  },
  ...
],

These setup is also required for styling.

Add to app.component.scss before importing component styles:

// This is required to setup font locations for Angular SCSS preprocessor
$fa-font-path  : '../../fonts';
$roboto-font-path : '../../../fonts';

Product template

Example of configuring product template for Angular application app.component.html:

Grid Scheduler Scheduler Pro Gantt Calendar TaskBoard

<bryntum-grid
    #grid
    ...
></bryntum-grid>

<bryntum-scheduler
    #scheduler
    ...
></bryntum-scheduler>

<bryntum-scheduler-pro-project-model
    #schedulerProProject
    ...
></bryntum-scheduler-pro-project-model>
<bryntum-scheduler-pro
    #schedulerpro
    [project]="schedulerProProject"
    ...
></bryntum-scheduler-pro>

Using bryntum-scheduler-pro-project-model is not obligatory, you can also configure the project by supplying a configuration object to the [project] property, or leave it out fully and supply data in other ways. Using the project component is only required when you want to share the full project between multiple products.

<bryntum-gantt-project-model
    #ganttProject
    ...
></bryntum-gantt-project-model>
<bryntum-gantt
    #gantt
    [project]="ganttProject!"
    ...
></bryntum-gantt>

Using bryntum-gantt-pro-project-model is not obligatory, you can also configure the project by supplying a configuration object to the [project] property, or leave it out fully and supply data in other ways. Using the project component is only required when you want to share the full project between multiple products.

<bryntum-calendar
    #calendar
    ...
></bryntum-calendar>

<bryntum-task-board-project-model
    #taskBoardProject
    ...
></bryntum-task-board-project-model>
<bryntum-task-board
    #taskboard
    [project]="taskBoardProject"
    ...
></bryntum-task-board>

Using bryntum-task-board-pro-project-model is not obligatory, you can also configure the project by supplying a configuration object to the [project] property, or leave it out fully and supply data in other ways. Using the project component is only required when you want to share the full project between multiple products.

Technical demo

Technical demo showing all products in one application can be seen here. You may download source there clicking on Download header icon.

Combining multiple Bryntum products

Thin packages overview

Thin packages list

Thin limited trial library packages:

Thin licensed library packages:

Thin Angular wrapper packages:

Package dependencies

Modules configuration

Product localization

Using source code

Using prebuilt full locale

Product configuration

Product styling

Product template

Technical demo

Contents