The fastest scheduling component for Angular

Bryntum Angular Scheduler is packed with all the features you need, lightning-fast performance, and easy integration with new or existing applications and any backend technology.

Strategy and Business Rules Setup Web Server Website Design Test Strategy Implementation

Get started with clear documentation

Feature-rich scheduling library for Angular

Bryntum Angular Scheduler supports a range of essential scheduling features to improve efficiency and productivity.

  • Drag-and-drop resizing
  • Event editor
  • Keyboard navigation
  • Export to PDF, PNG, and Excel
  • Drag and drop events from an external grid
  • Render components in events and cells

Angular Scheduler component code example


Set up Bryntum Scheduler in an Angular application with a few lines of TypeScript code.

import { Component } from '@angular/core';
import { BryntumSchedulerComponent } from '@bryntum/scheduler-angular';
import { SchedulerConfig } from '@bryntum/scheduler';

const schedulerConfig: Partial = {
    viewPreset: 'hourAndDay',
    startDate: new Date(2024, 2, 20, 6),
    endDate: new Date(2024, 2, 20, 20),

    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],

export class AppComponent {
    schedulerConfig = schedulerConfig;
    title = 'bryntum-scheduler-angular';
    schedulerComponent!: BryntumSchedulerComponent;

Excellent scheduling performance

Highly performant and responsive even with large data sets, the Bryntum Angular Scheduler features a combination of performance optimization techniques: 

  • Virtual rendering
  • Minimal DOM footprint
  • Extensive element reuse

Dynamic rendering with Angular template syntax 

Render custom columns, headers, and tooltips using Angular components in the Bryntum Angular Gantt chart. Easily use Angular HTML-based template syntax in components and keep rendering logic and markup in sync.

columns: [
        text: 'Angular Component',
        field: 'color',
        htmlEncode: false,
        renderer(data: any) {
            const { record, value } = data;
            // Pass attributes Custom Element
           return `<color-renderer value="${value.toLowerCase()}" name="${}"></color-renderer>`;

The most versatile Angular scheduler


Build and style Bryntum Angular Scheduler for a variety of uses to improve your users’ productivity and meet their needs. Use Bryntum Angular Scheduler for property booking, equipment allocation, and more! 

Render custom content and style event bars

Change anything on the fly with Bryntum Angular Scheduler. The extensive and reactive Bryntum API makes rendering custom HTML into event bars quick and easy. 

View our demo for inspiration on customizing your Bryntum Angular Scheduler with event progress bars, menu icons, and resource avatars.

Smooth and intuitive experience

The Bryntum Angular Scheduler delivers a smooth and intuitive experience for both developers and users. Easily add animations that users enjoy using with the Bryntum Angular Scheduler component.

Try it yourself!

Combine Bryntum Angular Scheduler with Bryntum Grid to show unplanned tasks and drag them onto the schedule.

Quickstart video tutorial

Step-by-step guidance to get your project up and running and integrate the feature-rich Bryntum Scheduler into your Angular application.

Trusted by the world’s leading companies

Ready to get started?