Angular

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.

View examples

Download trial

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

View all features

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),
};

@Component({
    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

View big data set demo

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.

View docs


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="${record.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!

Property booking

Drag from Grid

Custom event editor

View Angular examples

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.

View demo

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.

View demo