@bryntum/scheduler-angular-view

v7.2.0

Published

10 hours ago

Angular View Engine wrappers for Bryntum Scheduler JavaScript component

0High
0Medium
0Low

mats.bryntse

rasmus.ersmarker

bryntum scheduler angular wrapper

Angular View Engine wrapper for Bryntum Scheduler

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

Compiled for the Angular View Engine (legacy). Use this package for Angular 11 and earlier versions that do not support Ivy. For Angular 12+, use @bryntum/scheduler-angular instead.

Version Requirement

Wrapper is compiled for the Angular View Engine (legacy).

Angular: 11 or earlier (before Ivy)
TypeScript: 4.2 or higher

For Angular 12+, use @bryntum/scheduler-angular instead.

Package Contents

| Path | Description | |-------------------|-----------------------------------------------------| | bundles/ | UMD bundles (regular and minified) with source maps | | lib/ | Component type definitions | | src/ | Original TypeScript source files |

Installation

Angular Wrapper

npm install @bryntum/scheduler-angular-view@latest

Component Package (Required)

npm install @bryntum/scheduler@latest

Try Bryntum Online Demos

View Online Angular Demos

Quick Start

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

import { BryntumSchedulerModule } from '@bryntum/scheduler-angular-view';

Next, add BryntumSchedulerModule to imports[] :

@NgModule({
    imports : [
        BryntumSchedulerModule
    ]
})

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

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

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:

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

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

    schedulerProps = schedulerProps;

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

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

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

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": "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.

Lastly, add some styling to your styles.css :

/* FontAwesome is used for icons */
@import '@bryntum/scheduler/fontawesome/css/fontawesome.css';
@import '@bryntum/scheduler/fontawesome/css/solid.css';
/* Structural CSS */
@import "@bryntum/scheduler/scheduler.css";
/* Bryntum theme of your choice */
@import "@bryntum/scheduler/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 Scheduler 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 Scheduler, which is commercial software and requires a paid license. Please visit the Bryntum Scheduler End User License for the full text of the license.