Bryntum
Published in

Bryntum

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

<scheduler 
#scheduler
[rowHeight]=60
[events]="events"
[resources]="resources"
[startDate]="startDate"
[endDate]="endDate"
></scheduler>
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

19 Followers

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