Bryntum Calendar

Features

Calendar print feature

This example shows to use the Calendar print feature

Display day views that don't start at midnight

This example shows how to shift day start times from midnight to 6PM

Event filtering

This demo shows you how easy it is to filter & highlight events and resources to quickly find what matters to you

Multi-level filtering

This demo shows how to filter by multiple conditions, such as the task project and resources that a task is assigned to

Events viewed in grid form

This example demonstrates the 'list' view type

Event lists showing arbitrary date ranges

This example demonstrates EventList modes displaying arbitrary date ranges

Loading only what the UI requires

This example shows how to use the load on demand feature to only load a subset of a 100,000 event dataset

Exporting events to Excel

This demo shows how to export Calendar events to Excel without involving the server based on a third party library called write-excel-file (https://www.npmjs.com/package/write-excel-file)

Exporting events to ICS format

This demo shows how to export an event to the ICS format to be added to Outlook and other calendars

Fit timeline to available space

This example shows how to fit the timeline to the available vertical space

Multi assignment

This example shows Calendar with multiple assignment events

Multi assignment using resourceIds

This example shows a calendar using resourceIds field to support multi assignment

ResourceView

This example shows per-resource calendar views

Date/ResourceView

This example shows resources grouped by dates

Resources with capacity tick renderer

This example shows resource allocation per hour with a capacity tick renderer

Date/ResourceView showing non-consectutive dates

This example shows how to show only certain dates in the Calendar

Undo & redo

This demo shows undo / redo functionality one can use in an application using standard State Tracking Manager facility

EventColumn

This example shows usage of the EventColumn in the EventList view

Storing and restoring state

This example shows a state-preserving Calendar setup

Using TimeRanges

Shows how to use the TimeRanges feature to add vertical zones to the calendar

Time zone support

Shows how time zone support can be implemented

Dual DayView

This example shows the DualDayView extension

Day Agenda View

This example shows the serial DayAgenda view

Travel time demo

This demo shows how to visualize travel time before/after an event

Basics

Basic setup

This example shows basic Calendar setup

Configuring visible hours

This example shows how to define the hours to render and what hour should be scrolled to initially

Recurring events

This example shows recurring events and you can edit the recurrence pattern easily

Zooming the DayView timeline

This example shows zooming the hour tick size in a DayView

DayView time axis split into six minute ticks

This example shows a DayView time axis split into six minute ticks

Illustrates responsive sizing breakpoints

This example illustrates responsive size breakpoints

Icon buttons to events in DayViews and WeekViews

This example shows how to add icon buttons to events in DayViews and WeekViews

Show the current time line in different ways

This demo shows the various ways of displaying the "current time" line

Show a compact month view suitable for phone sized displays

This example shows a month view suitable for phone sized screens

Customization

Alternative resource filtering UI

This example shows how filtering resources can be customized for any UX.

It also illustrates the showAllDayHeader config

Confirmation dialogs

This example shows confirmation dialogs after create, resize and drag drop actions

Customized context menus

This example shows how to customize context menus

Customized event editor

This example shows event editor customization

Customized event tooltip

This example shows a customized event tooltip

Customized sidebar

This example shows how to add widgets to the side bar

Custom rendering

This example shows how to customize the markup used for events in the Calendar

Event items

This example shows how to add custom items (guests) to the events

Localization

Shows how to preload a specific locale and localize the application

Rendering resource avatars in the event bars

This example shows how to insert resource avatars into event bars

Rich text editor

This example shows how to use TinyMCE as a field in the event editor popup

Docked event editor

This example shows the event editor docked inside the browser viewport

Event group rendering outside the event flow

This example illustrates how to change the cellData event payload to create a customized 'grouped' event record for use by a custom evenRenderer

Custom Theme

This demo has a custom theme, to showcase how you can create your own. Check the resources/ folder to see how it is done

Sliding day range

This example shows a day-range calendar view

Power demos

Big data set

This example shows the Calendar loading with lots and lots of events and resources

Calendar + Taskboard integration

thin

This example shows a Taskboard view of Calendar data

Drag events from external grid

This example shows how to drag events from a grid onto a Calendar

Drag events between two Calendar instances

This example shows how to drag events between different Calendar instances

Drag equipment from external grid onto tasks

This example shows how to drag any DOM node and drop it onto a task to update some aspect of it

Drag from sidebar grid demo

This example shows how to drag events from a grid in the sidebar of a Calendar

Scheduler Timeline

This example shows how to use a Scheduler in a Calendar

Colossal data set

This example shows rapid Calendar navigation with 100,000 events in the store

Show booking and scheduling UI

This example shows special handling of empty day cells

Radio broadcast scheduling UI

This example demonstrates resource views displaying arbitrary date ranges

Multi resource scheduling modes

This example shows a multi-project Calendar

Year month grid view

This example shows the MonthGrid view of a year

Charts

Calendar with a chart

thin

This example shows a Chart next to the Calendar

Integration

Include using EcmaScript module

This example shows how to include and use the grid using EcmaScript modules (import)

Integrate with Salesforce Lightning

This demo shows how to embed Bryntum Calendar into the Lightning Web Component to use in your salesforce org

Include using script tag

This example shows how to include and use the calendar bundle using an ordinary script tag

Use as web component

This example shows how to use the Custom elements version of the Calendar

Integrate with Ionic

Ionic 5

Angular 10

TypeScript 3

This demo shows the Angular Calendar control integrated with the Ionic framework

Backend in PHP

Demonstrates an editable Calendar with a simple PHP backend (only stores data in session, no database)

Custom build using WebPack

WebPack 5

This very basic demo shows how to use Calendar and webpack to do a custom build from our sources

Custom thin build using WebPack

WebPack 5

thin

This very basic demo shows how to use Calendar and webpack to do a custom build from our thin packages

Angular

examples/frameworks/angular

Basic setup using HttpClient

Angular 11

TypeScript 4

This demo shows you how use the Calendar web component in Angular. Data is loaded from server with HttpClient

Basic setup

Angular 13

TypeScript 4

This example shows basic Calendar setup

Basic thin setup

Angular 13

TypeScript 4

thin

This example shows basic thin Calendar setup

Big data set

Angular 13

TypeScript 4

This example shows the Calendar loading with lots and lots of events and resources

Drag from external source

Angular 13

TypeScript 4

This example shows how to drag events from a grid onto a Calendar

Drag equipment from external grid onto tasks

Angular 16

TypeScript 5

This example shows how to drag any DOM node and drop it onto a task to update some aspect of it

Customized event editor

Angular 13

TypeScript 4

This example shows event editor customization

Event filtering

Angular 13

TypeScript 4

This demo shows you how easy it is to filter & highlight events in the Angular Calendar component, to quickly find what matters to you

Inline data

Angular 13

TypeScript 4

Shows how to bind inline data to the Angular Calendar component

Events viewed in grid form

Angular 16

TypeScript 5

This example demonstrates the 'list' view type

Resource view

Angular 16

TypeScript 5

This example shows per-resource calendar views

Using TimeRanges

Angular 16

TypeScript 5

Shows how to use the TimeRanges feature to add vertical zones to the calendar

Undo/redo

Angular 13

TypeScript 4

This demo shows undo / redo functionality one can use in an application using standard State Tracking Manager facility

Configuring visible hours

Angular 13

TypeScript 4

This React Calendar component example shows how to define the hours to render and what hour should be scrolled to initially

Date/ResourceView

Angular 18

TypeScript 5

This example shows resources grouped by dates

React + Vite

examples/frameworks/react-vite

Basic thin setup

React 18

Vite 5

TypeScript 5

thin

This demo contains a basic thin React Calendar component implementation

Drag equipment from external grid onto tasks

React 18

Vite 5

TypeScript 5

This example shows how to drag any DOM node and drop it onto a task to update some aspect of it

Events viewed in grid form

React 18

Vite 4

TypeScript 5

This example demonstrates the 'list' view type

Using React renderers

React 19

Vite 6

TypeScript 5

This example demonstrates using React components as renderers

Resource view

React 18

Vite 4

TypeScript 5

This example shows per-resource calendar views

Multi resource scheduling modes

React 18

Vite 5

TypeScript 5

This example shows a multi-project Calendar

Using TimeRanges

React 18

Vite 4

TypeScript 5

Shows how to use the TimeRanges feature to add vertical zones to the calendar

React

examples/frameworks/react

Basic setup

React 18

This example shows basic Calendar setup

Big data set

React 18

This example shows the Calendar loading with lots and lots of events and resources

Customized event editor

React 18

This example shows event editor customization

Event filtering

React 16

This demo shows how to use the React Calendar web component wrapper and Widgets and filter or highlight the calendar events

Inline data

React 16

Shows how to bind inline data to the React Calendar component

Undo/redo

React 18

This demo shows undo / redo functionality one can use in an application using standard State Tracking Manager facility

Configuring visible hours

React 17

This React Calendar component example shows how to define the hours to render and what hour should be scrolled to initially

Basic setup with TypeScript

React 17

TypeScript 3

This demo contains the React Calendar wrapper and the demo is written in TypeScript

SharePoint Workbench with TypeScript

React 17

TypeScript 4

thin

This demo includes a SPFx web part that uses TypeScript and React

React + Remix

Basic setup

React 18

Remix 2

Vite 5

TypeScript 5

This demo contains the React Calendar wrapper and the demo is written in Remix using Typescript

Vue 3 + Vite

examples/frameworks/vue-3-vite

Basic setup

Vue 3

Vite 5

TypeScript 5

This example shows basic setup of the grid with sorting enabled. It has a few columns with generated data and it uses date and percent columns

Basic thin setup

Vue 3

Vite 5

TypeScript 5

thin

This example shows basic thin setup of the grid with sorting enabled

Drag equipment from external grid onto tasks

Vue 3

Vite 4

TypeScript 4

This example shows how to drag any DOM node and drop it onto a task to update some aspect of it

Events viewed in grid form

Vue 3

Vite 4

TypeScript 4

This example demonstrates the 'list' view type

Resource view

Vue 3

Vite 4

TypeScript 4

This example shows per-resource calendar views

Using TimeRanges

Vue 3

Vite 4

TypeScript 4

Shows how to use the TimeRanges feature to add vertical zones to the calendar

Vue 3

examples/frameworks/vue-3

Basic setup

Vue 3

This example shows the Bryntum Calendar web component integrated with Vue 3

Big data set

Vue 3

This example shows the Calendar loading with lots and lots of events and resources

Scheduler timeline

Vue 3

This example shows how to use a Scheduler in a Calendar in Vue 3

Scheduler timeline with inline data

Vue 3

This example shows how to use a Scheduler in a Calendar with inline data in Vue 3

Customized event editor

Vue 3

This example shows event editor customization

Inline data

Vue 3

Shows how to bind inline data to the Vue 3 Calendar component

Undo/redo

Vue 3

This example shows the Calendar loading with lots and lots of events and resources

Configuring visible hours

Vue 3

This React Calendar component example shows how to define the hours to render and what hour should be scrolled to initially

Vue 2

examples/frameworks/vue-2

Event filtering

Vue 2

Shows how to implement filtering of events using Bryntum Calendar integrated into Vue framework