Bryntum Calendar (Trial)

Bryntum Calendar is a full-featured resource calendar with support for a wide range of capabilities It integrates smoothly with React, Vue, Angular, or plain vanilla JS.

For more information about Bryntum Calendar, visit the Bryntum Calendar site

Highlights

• Multiple view modes including day, week, month, year, agenda, and day-agenda layouts
• Resource-first layouts display events grouped by team members with avatars
• Recurring events with complex patterns (daily, weekly, monthly, yearly) and exceptions
• Travel time visualization shows commute time between events for realistic planning
• Capacity tracking monitors workload and highlights overallocation
• Flexible time intervals with custom increments and shifted day starts
• Massive data handling efficiently renders extremely large datasets with virtual scrolling
• Export to Excel, ICS calendar files, or print views
• Custom rendering controls appearance of events, headers, and cells
• Enhanced tooltips display rich information with links and custom content
• Responsive layouts adapt to mobile devices with optimized views
• React, Vue, and Angular wrappers with native framework patterns

Package Contents

| Path | Description | |---------------------------------------|------------------------------------------------| | fonts/ | Poppins, Montserrat, and RobotoFlex fonts | | fontawesome/ | FontAwesome icons and webfonts | | locales/ | Localization files for 30+ languages | | calendar.module.js, calendar.umd.js | JavaScript bundles (ES module and UMD formats) | | calendar.css | Structural CSS (required) | | *.d.ts | TypeScript type definitions | | *.css | Theme stylesheets |

Note: Trial packages do not include minified bundles, source maps, or source files.

Supported Versions

• NodeJS: >= 20.0.0
• TypeScript: >= 3.6.0
• Angular: >= 9.0.0
• React: >= 16.0.0
• Vue: >= 3.0.0
• Ionic: >= 5.0.0
• Vite: >= 4.0.0
• Webpack: >= 4.0.0

Try Bryntum Online Demos

Explore our comprehensive collection of demos:

• View Online Demos
• JavaScript Demos
• React Demos
• Vue Demos
• Angular Demos

Installation

This is a trial package with limited functionality.

Why Use npm Aliasing?

Trial packages use npm aliasing to install @bryntum/calendar-trial under the @bryntum/calendar name. This approach provides a seamless upgrade path - when you purchase a license, you only need to update the alias in package.json without changing any application code.

Install using npm:

npm install @bryntum/calendar@npm:@bryntum/calendar-trial@latest

Or using yarn:

yarn add @bryntum/calendar@npm:@bryntum/calendar-trial@latest

Alternatively, add to package.json dependencies:

"dependencies": {
  "@bryntum/calendar": "npm:@bryntum/calendar-trial@latest"
}

Visit our npm repository guide to learn more about installation and migrating from trial to licensed packages.

Quick Start

Vanilla JavaScript

import { Calendar } from '@bryntum/calendar';

const calendar = new Calendar({

    appendTo : 'app',
    date     : new Date(2026, 5, 7),

    resources : [
        {
            id         : 1,
            name       : 'New York Team',
            eventColor : 'blue'
        },
        {
            id         : 2,
            name       : 'Tokyo Hub',
            eventColor : 'green'
        },
        {
            id         : 3,
            name       : 'Paris Office',
            eventColor : 'orange'
        },
        {
            id         : 4,
            name       : 'Sydney Crew',
            eventColor : 'red'
        }
    ],

    events : [
        {
            id         : 1,
            name       : 'Kickoff Strategy Meeting',
            startDate  : '2026-06-08T09:00:00',
            endDate    : '2026-06-08T12:30:00',
            resourceId : 1
        },
        {
            id         : 2,
            name       : 'Client Review Call',
            startDate  : '2026-06-09T14:00:00',
            endDate    : '2026-06-09T17:00:00',
            resourceId : 1
        },
        {
            id         : 3,
            name       : 'Design Workshop',
            startDate  : '2026-06-10T10:00:00',
            endDate    : '2026-06-10T15:00:00',
            resourceId : 1
        },
        {
            id         : 4,
            name       : 'Project Planning',
            startDate  : '2026-06-08T13:00:00',
            endDate    : '2026-06-08T16:30:00',
            resourceId : 2
        },
        {
            id         : 5,
            name       : 'Sprint Retrospective',
            startDate  : '2026-06-09T15:00:00',
            endDate    : '2026-06-09T19:00:00',
            resourceId : 2
        },
        {
            id         : 6,
            name       : 'Innovation Lab Session',
            startDate  : '2026-06-11T16:00:00',
            endDate    : '2026-06-11T19:30:00',
            resourceId : 2
        },
        {
            id         : 7,
            name       : 'UX/UI Review',
            startDate  : '2026-06-09T08:30:00',
            endDate    : '2026-06-09T11:00:00',
            resourceId : 3
        },
        {
            id         : 8,
            name       : 'Marketing Sync',
            startDate  : '2026-06-10T08:00:00',
            endDate    : '2026-06-10T11:00:00',
            resourceId : 3
        },
        {
            id         : 9,
            name       : 'Team Building Lunch',
            startDate  : '2026-06-12T11:30:00',
            endDate    : '2026-06-12T15:00:00',
            resourceId : 3
        },
        {
            id         : 10,
            name       : 'Daily Standup',
            startDate  : '2026-06-08T09:00:00',
            endDate    : '2026-06-08T12:30:00',
            resourceId : 4
        },
        {
            id         : 11,
            name       : 'Product Demo',
            startDate  : '2026-06-10T16:00:00',
            endDate    : '2026-06-10T20:00:00',
            resourceId : 4
        },
        {
            id         : 12,
            name       : 'Customer Feedback Session',
            startDate  : '2026-06-11T11:00:00',
            endDate    : '2026-06-11T15:30:00',
            resourceId : 4
        },
        {
            id         : 13,
            name       : 'End of Sprint Wrap-up',
            startDate  : '2026-06-12T12:00:00',
            endDate    : '2026-06-12T15:00:00',
            resourceId : 4
        },
        {
            id         : 100,
            name       : 'Hackathon 2026',
            startDate  : '2026-06-08T00:00:00',
            endDate    : '2026-06-15T00:00:00',
            allDay     : true,
            resourceId : 1,
            eventColor : 'purple'
        },
        {
            id         : 101,
            name       : 'Innovation Day',
            startDate  : '2026-06-08T00:00:00',
            endDate    : '2026-06-09T00:00:00',
            allDay     : true,
            resourceId : 2
        },
        {
            id         : 102,
            name       : 'Wellness Retreat',
            startDate  : '2026-06-10T00:00:00',
            endDate    : '2026-06-11T00:00:00',
            allDay     : true,
            resourceId : 3
        },
        {
            id         : 103,
            name       : 'Tech Expo Visit',
            startDate  : '2026-06-11T00:00:00',
            endDate    : '2026-06-12T00:00:00',
            allDay     : true,
            resourceId : 4
        },
        {
            id         : 104,
            name       : 'Team Celebration',
            startDate  : '2026-06-13T00:00:00',
            endDate    : '2026-06-14T00:00:00',
            allDay     : true,
            resourceId : 1
        }
    ]
});

In the style.css:

/* FontAwesome is used for icons */
@import "@bryntum/calendar/fontawesome/css/fontawesome.css";
@import "@bryntum/calendar/fontawesome/css/solid.css";
/* Structural CSS */
@import "@bryntum/calendar/calendar.css";
/* Bryntum theme of your choice */
@import "@bryntum/calendar/svalbard-light.css";

Visit our JavaScript Quick Start guide to learn more.

Themes

Svalbard (default)

| Light | Dark | |--------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------| | | |

Stockholm

| Light | Dark | |----------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------| | | |

Visby

| Light | Dark | |--------------------------------------------------------------------------------------|------------------------------------------------------------------------------------| | | |

Material 3

| Light | Dark | |-----------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------| | | |

High Contrast

| Light | Dark | |------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------| | | |

Fluent 2

| Light | Dark | |-------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------| | | |

For more information on customizing themes, see the Styling guide.

Framework Integrations

Bryntum Calendar provides first-class wrappers for popular frameworks. Each wrapper follows native framework patterns and lifecycle management.

Note: The framework wrappers are public and can be installed normally. They require the core package to be present.

React

npm install @bryntum/calendar-react@latest

Visit our React Quick Start guide to learn more.

Angular

npm install @bryntum/calendar-angular@latest

Visit our Angular Quick Start guide to learn more.

Vue 3

npm install @bryntum/calendar-vue-3@latest

Visit our Vue Quick Start guide to learn more.

Explore All Bryntum Products

• Bryntum Grid - High-performance data grid
• Bryntum Scheduler - Resource scheduling component
• Bryntum Scheduler Pro - Advanced scheduling with dependencies
• Bryntum Gantt - Project planning and management
• Bryntum Calendar - Full-featured calendar component
• Bryntum TaskBoard - Kanban-style task management

Explore our comprehensive collection of demos:

| Product | JavaScript | React | Vue | Angular | |-------------------|:------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------:|:----------------------------------------------------------------------:|:------------------------------------------------------------------------------:| | Grid | Grid JavaScript demos | Grid React demos | Grid Vue demos | Grid Angular demos | | Scheduler | Scheduler JavaScript demos | Scheduler React demos | Scheduler Vue demos | Scheduler Angular demos | | Scheduler Pro | Scheduler Pro JavaScript demos | Scheduler Pro React demos | Scheduler Pro Vue demos | Scheduler Pro Angular demos | | Gantt | Gantt JavaScript demos | Gantt React demos | Gantt Vue demos | Gantt Angular demos | | Calendar | Calendar JavaScript demos | Calendar React demos | Calendar Vue demos | Calendar Angular demos | | TaskBoard | TaskBoard JavaScript demos | TaskBoard React demos | TaskBoard Vue demos | TaskBoard Angular demos |

Online references

• Bryntum Calendar documentation

• Bryntum Calendar examples

• Bryntum Support Forum

• Contact us

License and copyright

Bryntum Calendar is commercial software and requires a paid license. Please visit the Bryntum Calendar End User License for the full text of the license.

Copyright © 2009-2026, Bryntum All rights reserved.