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.

2 9 16 23 3 10 17 24 4 11 18 25 5 12 19 26 6 13 20 27 Setup Web Server Website Design Copywriting Strategy and… Implementation Quality Assurance

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';

    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.

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.

    tooltip = "My cool Bryntum Calendar component",
    (onCatchAll) = "onCalendarEvents($event)"
    // other configs, properties, events or features

A customizable and themeable Angular Calendar library

Choose from elegant and modern themes or modify the Calendar appearance to suit your style.

Easily customize the tooltip and event editor widgets to show any markup.

Trusted by the world’s leading companies

Ready to get started?