Bryntum Calendar

What is Bryntum Calendar?

Welcome to Bryntum Calendar - a pure JavaScript calendar component which integrates easily with popular frameworks.

For more general information on our Calendar product, please read on. This documentation provides you with everything you need to get started.

If you are excited to have a go now, we suggest you to start with one of our quick start guides below:

Vue

Live demo

Try out some of the Bryntum Calendar features with the live demo below.

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

Ten included view types
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
Large dataset handling features such as lazy data loading and pagination
Responsive configuration to automatically handle any form factor Example
Accessibility support
Localization support
Support for right-to-left layouts in locales which use RTL languages

See Features guide

Integration

Bryntum Calendar runs in all modern browsers (Chrome, Firefox, Safari, and modern 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
Sass: >= 1.78.0

You can use Bryntum Calendar out of the box or integrate it with the framework of your choice and many third-party solutions. Visit the integration section of our documentation for further details:

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.

How does it work?

The Calendar is based on the Bryntum infrastructure Widget class, a robust and thoroughly documented component base. You can easily create and configure a Calendar similarly to any other Bryntum Widgets.

Next steps

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

React

Angular

Vue

Vanilla JS