Bryntum Calendar Examples
Features
This example shows to use the Calendar print feature
This example shows how to shift day start times from midnight to 6PM
This demo shows you how easy it is to filter & highlight events and resources to quickly find what matters to you
This demo shows how to filter by multiple conditions, such as the task project and resources that a task is assigned to
This example demonstrates the 'list' view type
This example demonstrates EventList modes displaying arbitrary date ranges
This example shows how to use the load on demand feature to only load a subset of a 100,000 event dataset
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)
This demo shows how to export an event to the ICS format to be added to Outlook and other calendars
This example shows how to fit the timeline to the available vertical space
This example shows Calendar with multiple assignment events
This example shows a calendar using resourceIds field to support multi assignment
This example shows per-resource calendar views
This example shows resources grouped by dates
This example shows resource allocation per hour with a capacity tick renderer
This example shows how to show only certain dates in the Calendar
This demo shows undo / redo functionality one can use in an application using standard State Tracking Manager facility
This example shows usage of the EventColumn in the EventList view
This example shows a state-preserving Calendar setup
Shows how to use the TimeRanges feature to add vertical zones to the calendar
Shows how time zone support can be implemented
This example shows the DualDayView extension
This example shows the serial DayAgenda view
This demo shows how to visualize travel time before/after an event
Basics
This example shows basic Calendar setup
This example shows the basic Calendar setup packaged as an installable Progressive Web App
This example shows how to define the hours to render and what hour should be scrolled to initially
This example shows recurring events and you can edit the recurrence pattern easily
This example shows zooming the hour tick size in a DayView
This example shows a DayView time axis split into six minute ticks
This example illustrates responsive size breakpoints
This example shows how to add icon buttons to events in DayViews and WeekViews
This demo shows the various ways of displaying the "current time" line
This example shows a month view suitable for phone sized screens
This example shows a Year planner view of a year.
Note that this UI is designed for use with larger screen sizes
Note that this UI is designed for use with larger screen sizes
AI
Demonstrates the Bryntum AI Assistant integrated into the Calendar
Customization
This example shows how filtering resources can be customized for any UX.
It also illustrates the showAllDayHeader config
This example shows confirmation dialogs after create, resize and drag drop actions
This example shows how to customize context menus
This example shows event editor customization
This example shows a customized event tooltip
This example shows how to add widgets to the side bar
This example shows how to customize the markup used for events in the Calendar
This example shows how to add custom items (guests) to the events
Shows how to preload a specific locale and localize the application
This example shows how to insert resource avatars into event bars
This example shows how to use TinyMCE as a field in the event editor popup
This example shows the event editor docked inside the browser viewport
This example illustrates how to change the
cellData event payload to create a customized 'grouped' event record for use by a custom evenRenderer
This demo has a custom theme, to showcase how you can create your own. Check the resources/ folder to see how it is done
This example shows a day-range calendar view
Power demos
This example shows the Calendar loading with lots and lots of events and resources
thin
This example shows a Taskboard view of Calendar data
This example shows how to drag events from a grid onto a Calendar
This example shows how to drag events between different Calendar instances
This example shows how to drag any DOM node and drop it onto a task to update some aspect of it
This example shows how to drag events from a grid in the sidebar of a Calendar
This example shows how to use a Scheduler in a Calendar
This example shows rapid Calendar navigation with 100,000 events in the store
This example shows special handling of empty day cells
This example demonstrates resource views displaying arbitrary date ranges
This example shows a multi-project Calendar
This example shows the MonthGrid view of a year
Charts
thin
This example shows a Chart next to the Calendar
This example shows Bryntum Calendar integration with HighCharts
Misc
thin
Comprehensive showcase of all the widgets included in the Bryntum package. Browse through text fields, date pickers, buttons, layouts, and more
Integration
This example shows how to include and use the grid using EcmaScript modules (import)
This demo shows how to embed Bryntum Calendar into the Lightning Web Component to use in your salesforce org
This example shows how to include and use the calendar bundle using an ordinary script tag
This example shows how to use the Custom elements version of the Calendar
Demonstrates an editable Calendar with a simple PHP backend (only stores data in session, no database)
WebPack 5
This very basic demo shows how to use Calendar and webpack to do a custom build from our sources
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
Angular 11
TypeScript 4
This demo shows you how use the Calendar web component in Angular. Data is loaded from server with HttpClient
Angular 13
TypeScript 4
This example shows basic Calendar setup
Angular 13
TypeScript 4
thin
This example shows basic thin Calendar setup
Angular 13
TypeScript 4
This example shows the Calendar loading with lots and lots of events and resources
Angular 13
TypeScript 4
This example shows how to drag events from a grid onto a Calendar
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
Angular 13
TypeScript 4
This example shows event editor customization
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
Angular 13
TypeScript 4
Shows how to bind inline data to the Angular Calendar component
Angular 16
TypeScript 5
This example demonstrates the 'list' view type
Angular 22
TypeScript 6
This example shows resource allocation per hour with a capacity tick renderer
Angular 16
TypeScript 5
This example shows per-resource calendar views
Angular 22
TypeScript 6
This example shows how to shift day start times from midnight to 6PM
Angular 22
TypeScript 6
This example shows a state-preserving Calendar setup
Angular 16
TypeScript 5
Shows how to use the TimeRanges feature to add vertical zones to the calendar
Angular 13
TypeScript 4
This demo shows undo / redo functionality one can use in an application using standard State Tracking Manager facility
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
Angular 19
TypeScript 5
This example shows resources grouped by dates
Angular 22
TypeScript 6
This example shows a day-range calendar view
Angular 22
TypeScript 6
Shows how time zone support can be implemented
Angular 22
TypeScript 6
This example shows a customized event tooltip
Angular 22
TypeScript 6
This demo shows how to visualize travel time before/after an event
Angular 22
TypeScript 6
This example shows a Year planner view of a year.
Note that this UI is designed for use with larger screen sizes
Note that this UI is designed for use with larger screen sizes
React + Vite
examples/frameworks/react-vite
React 18
Vite 5
TypeScript 5
thin
This demo contains a basic thin React Calendar component implementation
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
React 18
Vite 4
TypeScript 5
This example demonstrates the 'list' view type
React 19
Vite 6
TypeScript 5
This example demonstrates using React components as renderers
React 18
Vite 4
TypeScript 5
This example shows per-resource calendar views
React 18
Vite 5
TypeScript 5
This example shows a multi-project Calendar
React 19
Vite 8
TypeScript 6
This example shows how to shift day start times from midnight to 6PM
React 19
Vite 8
TypeScript 6
This example shows resource allocation per hour with a capacity tick renderer
React 19
Vite 8
TypeScript 6
This example shows a state-preserving Calendar setup
React 18
Vite 4
TypeScript 5
Shows how to use the TimeRanges feature to add vertical zones to the calendar
React 19
Vite 8
TypeScript 6
This example shows a day-range calendar view
React 19
Vite 8
TypeScript 6
Shows how time zone support can be implemented
React 19
Vite 8
TypeScript 6
This example shows a customized event tooltip
React 19
Vite 8
TypeScript 6
This demo shows how to visualize travel time before/after an event
React 19
Vite 8
TypeScript 6
This example shows how to define the hours to render and what hour should be scrolled to initially
React 19
Vite 8
TypeScript 6
This example shows a Year planner view of a year.
Note that this UI is designed for use with larger screen sizes
Note that this UI is designed for use with larger screen sizes
React
examples/frameworks/react
React 18
This example shows basic Calendar setup
React 18
This example shows the Calendar loading with lots and lots of events and resources
React 18
This example shows event editor customization
React 16
This demo shows how to use the React Calendar web component wrapper and Widgets and filter or highlight the calendar events
React 16
Shows how to bind inline data to the React Calendar component
React 18
This demo shows undo / redo functionality one can use in an application using standard State Tracking Manager facility
React 17
TypeScript 3
This demo contains the React Calendar wrapper and the demo is written in TypeScript
React 17
TypeScript 4
thin
This demo includes a SPFx web part that uses TypeScript and React
React + Remix
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 + Nuxt
Vue 3
NuxtJS 4
Vite 5
This example shows basic setup of the Calendar in Nuxt
Vue 3 + Vite
examples/frameworks/vue-3-vite
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
Vue 3
Vite 5
TypeScript 5
thin
This example shows basic thin setup of the grid with sorting enabled
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
Vue 3
Vite 4
TypeScript 4
This example demonstrates the 'list' view type
Vue 3
Vite 4
TypeScript 4
This example shows per-resource calendar views
Vue 3
Vite 8
TypeScript 6
This example shows how to shift day start times from midnight to 6PM
Vue 3
Vite 8
TypeScript 6
This example shows resource allocation per hour with a capacity tick renderer
Vue 3
Vite 8
TypeScript 6
This example shows a state-preserving Calendar setup
Vue 3
Vite 4
TypeScript 4
Shows how to use the TimeRanges feature to add vertical zones to the calendar
Vue 3
Vite 8
TypeScript 6
This example shows a day-range calendar view
Vue 3
Vite 8
TypeScript 6
Shows how time zone support can be implemented
Vue 3
Vite 8
TypeScript 6
This example shows a customized event tooltip
Vue 3
Vite 8
TypeScript 6
This demo shows how to visualize travel time before/after an event
Vue 3
Vite 8
TypeScript 6
This example shows how to define the hours to render and what hour should be scrolled to initially
Vue 3
Vite 8
TypeScript 6
This example shows a Year planner view of a year.
Note that this UI is designed for use with larger screen sizes
Note that this UI is designed for use with larger screen sizes
Vue 3
examples/frameworks/vue-3
Vue 3
This example shows the Bryntum Calendar web component integrated with Vue 3
Vue 3
This example shows the Calendar loading with lots and lots of events and resources
Vue 3
This example shows how to use a Scheduler in a Calendar in Vue 3
Vue 3
This example shows how to use a Scheduler in a Calendar with inline data in Vue 3
Vue 3
This example shows event editor customization
Vue 3
Shows how to bind inline data to the Vue 3 Calendar component
Vue 3
This example shows the Calendar loading with lots and lots of events and resources
Vue 2
examples/frameworks/vue-2
Vue 2
Shows how to implement filtering of events using Bryntum Calendar integrated into Vue framework