Published in


Integrating Bryntum Scheduler with Angular

Bryntum Scheduler as an Angular component

Angular demo

Adding the component to your project

  1. Copy scheduler.component.ts from /examples/angular/src/app/scheduler to your project.
  2. Copy scheduler.module.js and the css for the theme you want to use from /build to your assets folder.
  • Another option is to have angular-cli copy it for you, by adding a glob to the assets section of your angular.json. Something like this (adjust the input path to match your setup):
{ "glob": "**/*", "input": "../scheduler/build", "output": "/assets" }
“paths”: { 
“scheduler” : [“../scheduler/build/scheduler.module.js”]
import {SchedulerComponent} from "./scheduler.component";

Using the component

export class YourComponent {
@ViewChild(SchedulerComponent) scheduler: SchedulerComponent;

events = [
{ id : 1, name : 'First event', startDate : new Date(2018, 8, 27), duration : 1 },

resources = [
{ id : 1, name : 'First resource' },

startDate = new Date(2018, 1, 7, 8);
endDate = new Date(2018, 1, 7, 18);

Accessing the engine

// Since our class declaration above contained a ViewChild for the component 
// we can access it using that
scheduler.schedulerEngine.resourceStore.add({ name : 'New resource' });

Other Angular versions

Angular 1

Angular 2–5

Learn more

Summing up



Bryntum creates advanced Gantt project management UI components for web application development, as well as developer tools for testing and error monitoring.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mats Bryntse

Mats Bryntse


CEO @ Bryntum, passionate about all things web dev / JS / CSS.