@bryntum/calendar-angular
v7.1.2
Published
Angular IVY wrappers for Bryntum Calendar JavaScript component
Downloads
60
Readme
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:
12with Ivy support or higher - TypeScript:
4.2or higher - Vite
5or higher (starting with Angular17)
Package Contents
| Path | Description |
|------------|----------------------------------|
| bundles/ | UMD bundles with source maps |
| lib/ | Component type definitions |
| src/ | Original TypeScript source files |
Installation
Angular Wrapper
npm install @bryntum/calendar-angular@latestComponent Package (Required)
npm install @bryntum/calendar@latestTry Bryntum Online Demos
Quick Start
Edit the src/app/app-module.ts file and add the following import:
import { BryntumCalendarModule } from '@bryntum/calendar-angular';Next, add BryntumCalendarModule to imports[] :
@NgModule({
imports : [
BryntumCalendarModule
]
})Create src/app/app.config.ts file with the following content:
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:
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:
<bryntum-calendar
#calendar
[date] = "calendarProps.date!"
[crudManager] = 'calendarProps.crudManager!'
[sidebar] = 'calendarProps.sidebar!'
></bryntum-calendar>Create a public/data/data.json file for example data and add the following JSON data to it:
{
"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.
Lastly, add some styling to your styles.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.
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 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 for the complete list of available features and their configuration options.
Explore All Bryntum Products
- Bryntum Grid - High-performance data grid
- Bryntum Scheduler - Resource scheduling component
- Bryntum Scheduler Pro - Advanced scheduling with dependencies
- Bryntum Gantt - Project planning and management
- Bryntum Calendar - Full-featured calendar component
- Bryntum TaskBoard - Kanban-style task management
Explore our comprehensive collection of demos:
| Product | JavaScript | React | Vue | Angular | |-------------------|:------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------:|:----------------------------------------------------------------------:|:------------------------------------------------------------------------------:| | Grid | Grid JavaScript demos | Grid React demos | Grid Vue demos | Grid Angular demos | | Scheduler | Scheduler JavaScript demos | Scheduler React demos | Scheduler Vue demos | Scheduler Angular demos | | Scheduler Pro | Scheduler Pro JavaScript demos | Scheduler Pro React demos | Scheduler Pro Vue demos | Scheduler Pro Angular demos | | Gantt | Gantt JavaScript demos | Gantt React demos | Gantt Vue demos | Gantt Angular demos | | Calendar | Calendar JavaScript demos | Calendar React demos | Calendar Vue demos | Calendar Angular demos | | TaskBoard | TaskBoard JavaScript demos | TaskBoard React demos | TaskBoard Vue demos | TaskBoard Angular demos |
Online references
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 for the full text of the license.
Copyright © 2009-2026, Bryntum All rights reserved.