Angular

The complete Calendar solution

Bryntum Calendar is a flexible UI component for Angular with great user and developer experience. Quickly set up a beautiful, full-featured calendar with day, week, month, year, and agenda views.

View Examples

Download Trial

Clear and concise documentation

Flexible, powerful, responsive

Built with modern JavaScript ES6+ and Sass, Bryntum Angular Calendar seamlessly integrates into new and existing Angular applications and renders beautifully to any device and screen size.

Angular Calendar library code example

The code example below shows an Angular Calendar component setup with example data in app.component.ts.

import { Component, ViewChild } from '@angular/core';
import { BryntumCalendarComponent, BryntumCalendarProjectModelComponent } from '@bryntum/calendar-angular';
import { calendarConfig, projectConfig } from './app.config';

@Component({
    selector: 'app-root',
    templateUrl : './app.component.html',
    styleUrls   : ['./app.component.scss']
})
export class AppComponent {

    resources = [
        {
            id: 1,
            name: 'Default Calendar',
            eventColor: 'green'
        }
    ];

    events = [
        {
            id: 1,
            name: 'Meeting',
            startDate: '2022-01-01T10:00:00',
            endDate: '2022-01-01T11:00:00',
            resourceId: 1
        }
    ];

    calendarConfig = calendarConfig;
    projectConfig = projectConfig;

    @ViewChild('calendar') calendarComponent!: BryntumCalendarComponent;
    @ViewChild('project') projectComponent!: BryntumCalendarProjectModelComponent;

}

The high-performance Angular Calendar

Instantly and reliably load large datasets with multiple resources and tasks. Designed for optimal performance, Bryntum Angular Calendar is scalable and efficient.

View demo

Easy integration with Angular components

Bryntum Angular wrappers define components that can be used like any other Angular components, giving you access to Bryntum API widget class configurations, properties, events, and features in your Angular application.

View the docs

<bryntum-calendar
    #calendar
    tooltip = "My cool Bryntum Calendar component",
    (onCatchAll) = "onCalendarEvents($event)"
    // other configs, properties, events or features
></bryntum-calendar>