<br>
<br>

<p align="center">
  <a href="https://bryntum.com/" rel="noopener" target="_blank">
    <img height="50" src="https://bryntum.com/resources/bryntum_logo_blue.svg" alt="Bryntum logo">
  </a>
  &emsp;&emsp;&emsp;&emsp;&emsp;
  <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/angular.svg" alt="Angular" height="55">
</p>

<br>

# Angular wrapper for Bryntum Scheduler Thin packages

This package provides a wrapper that turns Bryntum Scheduler into an Angular component, exposing configuration options,
properties, features, and events.

> **Thin Package:** This is a thin wrapper package designed for applications that use multiple Bryntum products.
> Thin packages exclude bundled dependencies to avoid duplication. For details, see
> [Angular Multiple Products](https://bryntum.com/products/scheduler/docs/guide/Scheduler/integration/angular/multiple-products).

## Version Requirement

Wrapper is compiled for the **Angular Ivy** rendering engine (Angular 12+).

* Angular: `12` with Ivy support or higher
* TypeScript: `4.2` or higher
* Vite `5` or higher (starting with Angular `17`)

## Package Contents

| Path   | Description                      |
|--------|----------------------------------|
| `lib/` | Component type definitions       |
| `src/` | Original TypeScript source files |

## Installation

### Angular Wrapper

```bash
npm install @bryntum/scheduler-angular-thin@latest
```

### Component Package (Required)

```bash
npm install @bryntum/scheduler-thin@latest
```

## Try Bryntum Online Demos

* [View Online Angular Demos](https://bryntum.com/products/scheduler/examples/?framework=angular)

## Quick Start

Edit the `src/app/app-module.ts` file and add the following import:

```typescript
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 {}
```

Create `src/app/app.config.ts` file with the following content:

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

export const schedulerProps: BryntumSchedulerProps = {
    columns : [
        { text : 'Name', field : 'name', width : 160 }
    ],
    startDate : new Date(2026, 0, 1),
    endDate   : new Date(2026, 1, 10),
    crudManager : {
      autoLoad  : true,
      loadUrl   : 'data/data.json',
      // This config enables response validation and dumping of found errors to the browser console.
      // It's meant to be used as a development stage helper only so please set it to false for production systems.
      validateResponse : true,
    }
};

```

Update the `src/app/app.ts` file with the following content:

```typescript
import { Component, ViewChild } from '@angular/core';
import { BryntumSchedulerComponent } from '@bryntum/scheduler-angular-thin';
import { schedulerProps } from './app.config';

@Component({
    selector    : 'app-root',
    standalone  : false,
    templateUrl : './app.html',
    styleUrl    : './app.css',
})
export class AppComponent {

    schedulerProps = schedulerProps;

    @ViewChild('scheduler') schedulerComponent!: BryntumSchedulerComponent;
}
```

Edit the `src/app/app.html` file and replace the content with the following:

```html
<bryntum-scheduler
    #scheduler
    [crudManager] = 'schedulerProps.crudManager!'
    [columns] = "schedulerProps.columns!"
    [startDate] = "schedulerProps.startDate!"
    [endDate] = "schedulerProps.endDate!"
></bryntum-scheduler>
```

<details>
<summary>Create sample data (click to expand)</summary>

Create a `public/data/data.json` file for example data and add the following JSON data to it:
```javascript
{
  "success": true,
  "resources": {
    "rows": [
      { "id": 1,  "name": "Dan Stevenson"   },
      { "id": 2,  "name": "Talisha Babin"   },
      { "id": 3,  "name": "Ravi Kumar"      },
      { "id": 4,  "name": "Aisha Khan"      },
      { "id": 5,  "name": "Michael Chen"    },
      { "id": 6,  "name": "Sofia Lopez"     },
      { "id": 7,  "name": "James Anderson"  },
      { "id": 8,  "name": "Eddie Johnson"   },
      { "id": 9,  "name": "Ethan Wright"    },
      { "id": 10, "name": "Liu Wei"         }
    ]
  },
  "events": {
    "rows": [
      { "resourceId": 1,  "startDate": "2026-01-01", "endDate": "2026-01-05", "name": "Kickoff Meeting"          },
      { "resourceId": 1,  "startDate": "2026-01-06", "endDate": "2026-01-10", "name": "Scope Definition"        },
      { "resourceId": 1,  "startDate": "2026-01-12", "endDate": "2026-01-29", "name": "Project Plan Review"     },
      { "resourceId": 2,  "startDate": "2026-01-02", "endDate": "2026-01-06", "name": "Requirement Gathering"   },
      { "resourceId": 2,  "startDate": "2026-01-07", "endDate": "2026-01-21", "name": "Stakeholder Interviews"  },
      { "resourceId": 2,  "startDate": "2026-01-22", "endDate": "2026-01-27", "name": "Requirement Signoff"     },
      { "resourceId": 3,  "startDate": "2026-01-05", "endDate": "2026-01-14", "name": "System Design"           },
      { "resourceId": 3,  "startDate": "2026-01-10", "endDate": "2026-01-20", "name": "Database Modeling"       },
      { "resourceId": 3,  "startDate": "2026-01-23", "endDate": "2026-01-28", "name": "API Design"              },
      { "resourceId": 4,  "startDate": "2026-01-08", "endDate": "2026-01-15", "name": "Backend Setup"           },
      { "resourceId": 4,  "startDate": "2026-01-15", "endDate": "2026-01-22", "name": "Authentication Module"   },
      { "resourceId": 4,  "startDate": "2026-01-21", "endDate": "2026-01-27", "name": "Data Services"           },
      { "resourceId": 5,  "startDate": "2026-01-02", "endDate": "2026-01-14", "name": "UI Wireframes"           },
      { "resourceId": 5,  "startDate": "2026-01-15", "endDate": "2026-01-19", "name": "Frontend Components"     },
      { "resourceId": 5,  "startDate": "2026-01-20", "endDate": "2026-01-27", "name": "Styling & Theme"         },
      { "resourceId": 6,  "startDate": "2026-01-12", "endDate": "2026-01-16", "name": "API Integration"         },
      { "resourceId": 6,  "startDate": "2026-01-17", "endDate": "2026-01-21", "name": "GraphQL Setup"           },
      { "resourceId": 6,  "startDate": "2026-01-22", "endDate": "2026-01-25", "name": "Integration Testing"     },
      { "resourceId": 7,  "startDate": "2026-01-05", "endDate": "2026-01-10", "name": "Unit Testing"            },
      { "resourceId": 7,  "startDate": "2026-01-12", "endDate": "2026-01-19", "name": "Automation Scripts"      },
      { "resourceId": 7,  "startDate": "2026-01-18", "endDate": "2026-01-27", "name": "Performance Testing"     },
      { "resourceId": 8,  "startDate": "2026-01-10", "endDate": "2026-01-22", "name": "Bug Fix Round 1"         },
      { "resourceId": 8,  "startDate": "2026-01-23", "endDate": "2026-01-26", "name": "UI Fixes"                },
      { "resourceId": 8,  "startDate": "2026-01-27", "endDate": "2026-01-30", "name": "Regression Testing"      },
      { "resourceId": 9,  "startDate": "2026-01-03", "endDate": "2026-01-14", "name": "Client Demo Prep"        },
      { "resourceId": 9,  "startDate": "2026-01-15", "endDate": "2026-01-19", "name": "Client Review"           },
      { "resourceId": 9,  "startDate": "2026-01-20", "endDate": "2026-01-24", "name": "Feedback Implementation" },
      { "resourceId": 10, "startDate": "2026-01-02", "endDate": "2026-01-16", "name": "Deployment Setup"        },
      { "resourceId": 10, "startDate": "2026-01-19", "endDate": "2026-01-22", "name": "Go-Live"                 },
      { "resourceId": 10, "startDate": "2026-01-23", "endDate": "2026-01-27", "name": "Post-Deployment Support" }
    ]
  }
}
```

This is the data the Bryntum Scheduler will use.

</details>

## Project Structure

### Product Dependencies

API packages:

```json
{
  "dependencies": {
    "@bryntum/core-thin": "7.2.3",
    "@bryntum/engine-thin": "7.2.3",
    "@bryntum/grid-thin": "7.2.3",
    "@bryntum/scheduler-thin": "7.2.3"
  }
}
```

Framework wrapper packages:

```json
{
  "dependencies": {
    "@bryntum/core-angular-thin": "7.2.3",
    "@bryntum/scheduler-angular-thin": "7.2.3"
  }
}
```

### Product Configuration

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

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

### Product Styling

**SCSS/CSS:**

```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';
```

### Product Localization

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

## Integration Guide

For details on installing and using this package, see the
[Angular Integration Guide](https://bryntum.com/products/scheduler/docs/guide/Scheduler/integration/angular/guide).

## Wrappers

Angular wrappers encapsulate Bryntum components as native Angular components, exposing all configuration options,
properties, features, and events through Angular-familiar patterns like inputs, outputs, and templates.

Visit [Wrappers documentation](https://bryntum.com/products/scheduler/docs/guide/Scheduler/integration/angular/guide#wrappers) for the complete list of available
wrapper components.

## Features

Features are optional modules that extend Bryntum Scheduler functionality. Each feature is suffixed with `Feature` and
can be enabled and configured through standard Angular inputs.

Visit [Features documentation](https://bryntum.com/products/scheduler/docs/guide/Scheduler/integration/angular/guide#features) for the complete list of available
features and their configuration options.

## Explore All Bryntum Products

* [Bryntum Grid](https://bryntum.com/products/grid/) - High-performance data grid
* [Bryntum Scheduler](https://bryntum.com/products/scheduler/) - Resource scheduling component
* [Bryntum Scheduler Pro](https://bryntum.com/products/schedulerpro/) - Advanced scheduling with dependencies
* [Bryntum Gantt](https://bryntum.com/products/gantt/) - Project planning and management
* [Bryntum Calendar](https://bryntum.com/products/calendar/) - Full-featured calendar component
* [Bryntum TaskBoard](https://bryntum.com/products/taskboard/) - Kanban-style task management

Explore our comprehensive collection of demos:

| Product           |   <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/js.svg" alt="JavaScript" width="30"><br>JavaScript    |  <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/react.svg" alt="React" width="30"><br>React  |   <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/vue.svg" alt="Vue" width="30"><br>Vue   | <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/angular.svg" alt="Angular" width="30"><br>Angular |
|-------------------|:------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------:|:----------------------------------------------------------------------:|:------------------------------------------------------------------------------:|
| **Grid**          |         [Grid JavaScript demos](https://bryntum.com/products/grid/examples/?framework=javascript)          |         [Grid React demos](https://bryntum.com/products/grid/examples/?framework=react)          |         [Grid Vue demos](https://bryntum.com/products/grid/examples/?framework=vue)          |         [Grid Angular demos](https://bryntum.com/products/grid/examples/?framework=angular)          |
| **Scheduler**     |    [Scheduler JavaScript demos](https://bryntum.com/products/scheduler/examples/?framework=javascript)     |    [Scheduler React demos](https://bryntum.com/products/scheduler/examples/?framework=react)     |    [Scheduler Vue demos](https://bryntum.com/products/scheduler/examples/?framework=vue)     |    [Scheduler Angular demos](https://bryntum.com/products/scheduler/examples/?framework=angular)     |
| **Scheduler Pro** | [Scheduler Pro JavaScript demos](https://bryntum.com/products/schedulerpro/examples/?framework=javascript) | [Scheduler Pro React demos](https://bryntum.com/products/schedulerpro/examples/?framework=react) | [Scheduler Pro Vue demos](https://bryntum.com/products/schedulerpro/examples/?framework=vue) | [Scheduler Pro Angular demos](https://bryntum.com/products/schedulerpro/examples/?framework=angular) |
| **Gantt**         |        [Gantt JavaScript demos](https://bryntum.com/products/gantt/examples/?framework=javascript)         |        [Gantt React demos](https://bryntum.com/products/gantt/examples/?framework=react)         |        [Gantt Vue demos](https://bryntum.com/products/gantt/examples/?framework=vue)         |        [Gantt Angular demos](https://bryntum.com/products/gantt/examples/?framework=angular)         |
| **Calendar**      |     [Calendar JavaScript demos](https://bryntum.com/products/calendar/examples/?framework=javascript)      |     [Calendar React demos](https://bryntum.com/products/calendar/examples/?framework=react)      |     [Calendar Vue demos](https://bryntum.com/products/calendar/examples/?framework=vue)      |     [Calendar Angular demos](https://bryntum.com/products/calendar/examples/?framework=angular)      |
| **TaskBoard**     |    [TaskBoard JavaScript demos](https://bryntum.com/products/taskboard/examples/?framework=javascript)     |    [TaskBoard React demos](https://bryntum.com/products/taskboard/examples/?framework=react)     |    [TaskBoard Vue demos](https://bryntum.com/products/taskboard/examples/?framework=vue)     |    [TaskBoard Angular demos](https://bryntum.com/products/taskboard/examples/?framework=angular)     |

## Online references

* [Bryntum Scheduler documentation](https://bryntum.com/products/scheduler/docs/)
* [Bryntum Scheduler examples](https://bryntum.com/products/scheduler/examples/)

* [Bryntum Support Forum](https://forum.bryntum.com/)
* [Contact us](https://bryntum.com/contact/)

## License and copyright

This wrapper depends on Bryntum Scheduler, which is commercial software and requires a paid license.
Please visit the [Bryntum Scheduler End User License](https://bryntum.com/products/scheduler/license/) for the full text of the license.

Copyright © 2009-2026, Bryntum
All rights reserved.

