Bryntum Calendar

What is Bryntum Calendar?

Bryntum Calendar is built with vanilla JavaScript and TypeScript and easily integrates with any backend or UI framework, including React, Vue, and Angular.

The easiest way to start using Bryntum Calendar is by installing it using npm.

Get up and running quickly with a step-by-step guide:

React quick start

Angular quick start

Vue quick start

Vanilla JS quick start

Salesforce quick start

Bryntum Calendar live demo

Explore Bryntum Calendar and test some of its features in the live demo.

For a complete overview of Bryntum Calendar capabilities, explore the topic-specific guides in the menu, visit our API documentation, and browse Bryntum Calendar examples.

Feature list

Eleven included view types
Drag and drop event creation, resizing and moving endabled by default.
Built-in, easily extensible event editor Example
Zoomable DayView using CTRL+wheel (CMD+wheel on Mac). Smaller tick values are interpolated as the hour height grows
Multi-category filtering Example
Exporting events to Internet Calendaring and Scheduling (ICS) format Example
Undo and redo functionality Example
DayView tickRenderer which allows hour ticks to show background information Example
DayView Preamble/postamble (travel time) feature Example
DayView dateFilter to enable showing non-consecutive dates Example
TimeRanges and ResourceTimeRanges Example
Time zone support Example
Custom rendering of every element of the UI Example
Easy integration with other Bryntum project management tools, like Bryntum Task Board Example
Handle large datasets using load on demand Example
Responsive configuration to enable apps to be mobile-friendly and handle any form factor Example
Responsive event bar heights in MonthView which can adjust based on the available height in the UI example.
Accessibility support - focus position is easily visible in all themes.
Support for 45 international locales out of the box
Support for right-to-left layouts in locales which use RTL languages
Overflow popover for day cells can show overflowing events in a complex, interactive calendar view, see the month view here: Example

See Features guide

Continuous evolution and improvement

Maintenance releases with bug fixes are released on average every two weeks, with minor releases every quarter. See the public change log

Keep up to date with developments on our blog

Integration

Bryntum Calendar is compatible with all modern browsers – including Chrome, Firefox, Safari, and the latest version of Edge – regardless of your target technology.

Before integrating Bryntum Calendar with any framework, ensure that your environment meets the following version requirements:

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

Use Bryntum Calendar out of the box or integrate it with your framework of your choice and many third-party solutions.

If you have already downloaded Bryntum Calendar, you'll find framework examples in the examples/frameworks folder. If you haven't downloaded Bryntum Calendar yet, you can get a free trial here. You can get started using the Bryntum trial npm packages, which are public.

How does it work?

The Calendar is based built on Bryntum's Widget class, a robust and well-documented component base. Like other Bryntum widgets, the Bryntum Calendar is easy to create and configure to meet your needs.

Next steps

The best way to get started with Calendar is by following one of our quick start guides, which provides step-by-step instructions. Once you're familiar with the basics, continue with the in-depth tutorial to explore advanced features. Choose your preferred technology below to begin:

React

Angular

Vue

Vanilla JS