Integrating Bryntum Scheduler with Angular 7

This blog post introduces our new Angular 7 demo, which apart from being bumped to Angular 7 also has a few improvements and contains a slightly updated Angular Scheduler component. For more details on using the component, please read our initial “Integrate Bryntum Scheduler with Angular” post.

Updated Angular Scheduler component

The SchedulerComponent included with the Angular demo has been updated since the previous blog post. Changes include:

• It now relays events from Schedulers EventStore and ResourceStore, making it easier to listen for data changes in your Angular app.
• The engine was made public, access it using the schedulerEngine property.
• Added @Input() for configs responsiveLevel and eventLayout

New functionality in the demo

The Angular 7 demo was updated to showcase a bit more functionality. The new demo will be included in the upcoming 1.1 release, but you can download it separately today using this link. Unzip it to your scheduler/examples folder and follow the steps in README.md to get started.

New functionality:

• Shows how to customize the event editor by adding an extra field
• Logs some events from Scheduler, EventStore and ResourceStore to the console to show you how to listen for events
• Exposes the underlying engine to window, reachable on console as scheduler. This lets you play around with the settings from the console. Try for example:

  scheduler.rowHeight = 70;
  scheduler.eventStyle = 'plain';

Learn more

The best way to learn more about the SchedulerComponent is to examine its source and the demos. If you have not already, please download our trial version and check it out.

Feel free to extend the SchedulerComponent with what you need, and please also share your thoughts on our forum. It will be extended according to popular demand, but remember that you can always access the underlying engine if a feature or config is not exposed directly.

• Download the Angular 7 example as a ZIP archive
• Scheduler product page
• Scheduler docs
• Scheduler examples

Summing up

As before, Bryntum Scheduler works with any version of Angular. It now also includes an improved demo for Angular 7. Although the Angular component does not wrap all functionality in Scheduler, you can always access the engine to get what you need.

Good luck!
Download Free Trial