<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 Calendar

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

## 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                      |
|------------|----------------------------------|
| `bundles/` | UMD bundles with source maps     |
| `lib/`     | Component type definitions       |
| `src/`     | Original TypeScript source files |

## Installation

### Angular Wrapper

```bash
npm install @bryntum/calendar-angular@latest
```

### Component Package (Required)

```bash
npm install @bryntum/calendar@latest
```

## Try Bryntum Online Demos

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

## Quick Start

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

```typescript
import { BryntumCalendarModule } from '@bryntum/calendar-angular';
```

Next, add `BryntumCalendarModule` to `imports[]` :

```typescript
@NgModule({
    imports : [
        BryntumCalendarModule
    ]
})
```

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

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

export const calendarProps: BryntumCalendarProps = {
    date : new Date(2026, 5, 7),

    crudManager : {
        loadUrl  : 'data/data.json',
        autoLoad : true
    },

    sidebar : {
        items : {
            datePicker : {
                // highlight the selected cell's week row
                highlightSelectedWeek : true
            }
        }
    },
};
```

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

```typescript
import { Component, ViewChild } from '@angular/core';
import { BryntumCalendarComponent } from '@bryntum/calendar-angular';
import { calendarProps } from './app.config';

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

    calendarProps = calendarProps;

    @ViewChild('calendar') calendarComponent!: BryntumCalendarComponent;
}
```

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

```html
<bryntum-calendar
    #calendar
    [date] = "calendarProps.date!"
    [crudManager] = 'calendarProps.crudManager!'
    [sidebar] = 'calendarProps.sidebar!'
></bryntum-calendar>
```

<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": "New York Team",
        "eventColor": "blue"
      },
      {
        "id": 2,
        "name": "Tokyo Hub",
        "eventColor": "green"
      },
      {
        "id": 3,
        "name": "Paris Office",
        "eventColor": "orange"
      },
      {
        "id": 4,
        "name": "Sydney Crew",
        "eventColor": "red"
      }
    ]
  },
  "events": {
    "rows": [
      {
        "id": 1,
        "name": "Kickoff Strategy Meeting",
        "startDate": "2026-06-08T09:00:00",
        "endDate": "2026-06-08T12:30:00",
        "resourceId": 1
      },
      {
        "id": 2,
        "name": "Client Review Call",
        "startDate": "2026-06-09T14:00:00",
        "endDate": "2026-06-09T17:00:00",
        "resourceId": 1
      },
      {
        "id": 3,
        "name": "Design Workshop",
        "startDate": "2026-06-10T10:00:00",
        "endDate": "2026-06-10T15:00:00",
        "resourceId": 1
      },
      {
        "id": 4,
        "name": "Project Planning",
        "startDate": "2026-06-08T13:00:00",
        "endDate": "2026-06-08T16:30:00",
        "resourceId": 2
      },
      {
        "id": 5,
        "name": "Sprint Retrospective",
        "startDate": "2026-06-09T15:00:00",
        "endDate": "2026-06-09T19:00:00",
        "resourceId": 2
      },
      {
        "id": 6,
        "name": "Innovation Lab Session",
        "startDate": "2026-06-11T16:00:00",
        "endDate": "2026-06-11T19:30:00",
        "resourceId": 2
      },
      {
        "id": 7,
        "name": "UX/UI Review",
        "startDate": "2026-06-09T08:30:00",
        "endDate": "2026-06-09T11:00:00",
        "resourceId": 3
      },
      {
        "id": 8,
        "name": "Marketing Sync",
        "startDate": "2026-06-10T08:00:00",
        "endDate": "2026-06-10T11:00:00",
        "resourceId": 3
      },
      {
        "id": 9,
        "name": "Team Building Lunch",
        "startDate": "2026-06-12T11:30:00",
        "endDate": "2026-06-12T15:00:00",
        "resourceId": 3
      },
      {
        "id": 10,
        "name": "Daily Standup",
        "startDate": "2026-06-08T09:00:00",
        "endDate": "2026-06-08T12:30:00",
        "resourceId": 4
      },
      {
        "id": 11,
        "name": "Product Demo",
        "startDate": "2026-06-10T16:00:00",
        "endDate": "2026-06-10T20:00:00",
        "resourceId": 4
      },
      {
        "id": 12,
        "name": "Customer Feedback Session",
        "startDate": "2026-06-11T11:00:00",
        "endDate": "2026-06-11T15:30:00",
        "resourceId": 4
      },
      {
        "id": 13,
        "name": "End of Sprint Wrap-up",
        "startDate": "2026-06-12T12:00:00",
        "endDate": "2026-06-12T15:00:00",
        "resourceId": 4
      },
      {
        "id": 100,
        "name": "Hackathon 2026",
        "startDate": "2026-06-08T00:00:00",
        "endDate": "2026-06-15T00:00:00",
        "allDay": true,
        "resourceId": 1,
        "eventColor": "purple"
      },
      {
        "id": 101,
        "name": "Innovation Day",
        "startDate": "2026-06-08T00:00:00",
        "endDate": "2026-06-09T00:00:00",
        "allDay": true,
        "resourceId": 2
      },
      {
        "id": 102,
        "name": "Wellness Retreat",
        "startDate": "2026-06-10T00:00:00",
        "endDate": "2026-06-11T00:00:00",
        "allDay": true,
        "resourceId": 3
      },
      {
        "id": 103,
        "name": "Tech Expo Visit",
        "startDate": "2026-06-11T00:00:00",
        "endDate": "2026-06-12T00:00:00",
        "allDay": true,
        "resourceId": 4
      },
      {
        "id": 104,
        "name": "Team Celebration",
        "startDate": "2026-06-13T00:00:00",
        "endDate": "2026-06-14T00:00:00",
        "allDay": true,
        "resourceId": 1
      }
    ]
  }
}
```

This is the data the Bryntum Calendar will use.

</details>

Lastly, add some styling to your `styles.css` :

```css
/* FontAwesome is used for icons */
@import '@bryntum/calendar/fontawesome/css/fontawesome.css';
@import '@bryntum/calendar/fontawesome/css/solid.css';
/* Structural CSS */
@import "@bryntum/calendar/calendar.css";
/* Bryntum theme of your choice */
@import "@bryntum/calendar/material3-light.css";
```

## Integration Guide

For details on installing and using this package, see the
[Angular Integration Guide](https://bryntum.com/products/calendar/docs/guide/Calendar/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/calendar/docs/guide/Calendar/integration/angular/guide#wrappers) for the complete list of available
wrapper components.

## Features

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

Visit [Features documentation](https://bryntum.com/products/calendar/docs/guide/Calendar/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 Calendar documentation](https://bryntum.com/products/calendar/docs/)
* [Bryntum Calendar examples](https://bryntum.com/products/calendar/examples/)

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

## License and copyright

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

Copyright © 2009-2026, Bryntum
All rights reserved.

