Bryntum Scheduler Examples
Power demos
Demonstrates showing a set of resources locked at the top of the Scheduler
Demonstrates that the scheduler performs well even with many many rows
Demonstrates that the scheduler performs well even with a large hierarchical data set
Demonstrates that the vertical scheduler performs well even with many many rows
This example shows a demo booking application, using ResourceTimeRanges and the summary feature
Shows a Scheduler with both infinite timeline scroll as well as infinite resource scroll. The backend is made in PHP
Shows a Scheduler with hierarchical resource data and both infinite timeline scroll as well as infinite resource scroll. The backend is made in PHP
Shows a more advanced use of eventRenderer to render "nested events"
This example demonstrates that the Scheduler can access large data sets page by page
Dual timelines in sync
This demo lets you test the scheduler when external edits are received, to simulate a real world app with web sockets
An application demo with lots of custom rendering
Shows how you can customize the TimeAxis class, which is used to generate the date ticks in the timeline header
Shows a timeline histogram
A demo that comes with a WebSocket server for multi-user realtime' interaction with the Schedule, see README.md for details on how to get it started
Drag & drop
You can drag drop tasks between different scheduler instances on the page
This example shows how easy it is to drag tasks from a separate list or grid onto the schedule
This example shows how easy it is to drag tasks from a separate list or grid onto the schedule
This example shows how to drag tasks from a grid onto a tree schedule
This example shows how to drag items from a list and drop them onto a task to update some aspect of it
This example shows how easy it is to drag tasks from a tree grid onto the schedule
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 to an element outside the scheduler
Charts
thin
Shows how to use a chart designer widget to configure and display a chart from Scheduler data
thin
This example shows how the SparklineColumn can display sparkline charts inline in a Scheduler row
thin
This example shows a Chart side by side with a Scheduler
Basics
Shows a very basic scheduler setup
Built-in and custom made view presets along with zooming feature
Demonstrates smooth zooming with zoom controls, TimeZoomSlider, and a large dataset
Displays columns of different types on left and right sides of the schedule
Allows adjusting row height and bar margin using sliders to get immediate feedback on the effect of those settings. Also shows the StickyCells feature
Here's an example of locating elements in the grid programmatically. You can scroll to a point in time, and you can also scroll to a certain event in the eventStore
The scheduler has support for snapping to the set time resolution. In the view below, you can snap in any increment between 5-60 minutes.
Note how drag, resize and create operations are affected by having Snap checked or not.
This example demonstrates auto state handling for the Scheduler. It allows the user to store state in localStorage and restore it across page reloads
Event layout & styling
The Scheduler will animate any changes to your rendered Events by default
Custom rendering of events using the
eventRenderer() function
Uses the Rough.js library to draw sketchy events
This demo has a custom theme, to showcase how you can create your own. Check the resources/ folder to see how it is done
The Scheduler can layout events in 3 different ways: `stack` (the default), `pack` or `none` (overlapping). Order of overlapping events is configurable
Shows how using eventStyle and eventColor affects appearance
Shows the different options available to make milestones part of the event layout
You can render not only event bars, but also icons representing a milestone
Features
A Scheduler with collapsible grouped columns in its grid section
Click and drag to select multiple events easily
This example shows how you can have dependencies visualized between tasks by loading data using the CrudManager
Shows a scheduler in vertical mode with dependencies
Shows how to use FieldFilterPickerGroup to filter the resource and event stores of the Schedule
This demo uses the `fillTicks` config to force events to be rendered as full ticks. Only affects rendering, the events retain their configured start and end dates on the data level
This demo shows you how easy it is to filter & highlight events and resources to quickly find what matters to you
This example shows how you can group resources
This example shows how you can display group summaries with custom rendering
A scheduler which contains a year's worth of events and may be scrolled continuously so that all events may be visited
This demo uses the Labels feature to display labels above/below events. Labels can display field data or use a custom renderer
This example shows how to use the `mergeCells` option on columns to merge cells with the same value into a single cell spanning multiple rows
Shows a basic scheduler using an AssignmentStore to support multi assignment
Shows a basic scheduler using resourceIds field to support multi assignment
Shows a basic scheduler using an multi assignment with dependencies, drawing dependency lines to all assignments of an event
This example shows how to display multiple summaries for the schedule part
The demo shows how to customize Scheduler's weekends and non-working days
Shows recurring events. All update/delete operations on recurring events required to be confirmed. You can change recurrence configuration using the default event editor
Shows how to use the TimeRanges feature with the recurring time spans to add repeating vertical lines and zones to the schedule
Using `eventLayout` field of the resource model you can control the collapsed state. "stack" means expanded, "none" means collapsed
Displays resource time ranges, similar to events in that they have a start and end date but different in that they do not take part in the layout. They always occupy full row height and are displayed behind events
Shows how the scheduler can be easily made responsive using a combination of configs and styling
Shows buttons at the start/end of each row to let users scroll to the next event quickly
Double click event bars to edit name easily
Shows how to position a widget overlayed at the tick cell that the pointer is hovering
Shows how to position a widget overlayed at the tick cell that the pointer is hovering
This example demonstrates how split the scheduler into multiple views
This example shows the summary feature
This example shows a summary in the timeaxis header
This example shows how to make a simple animated histogram summary
Shows how to use the TimeRanges feature to add vertical lines and zones to the schedule
Shows how time zone support can be implemented
Shows how to select time ranges in the time axis header
This demo visualizes hierarchical data in the form of a tree
This demo shows how to rollup and summarize tree data
This demo shows how to rollup and summarize tree data and customize the way the rollup data are shown
Uses the TreeGroup feature to transform the resource tree's structure
This demo shows undo / redo functionality one can use in an application using standard State Tracking Manager facility
Shows a basic scheduler using vertical mode
Shows a basic scheduler using vertical mode with defined column widths
This demo shows how to configure Scheduler to only show working hours and working days, stretching events to fill the gaps that would otherwise be seen
This example shows how resources may be members of multiple groups
This example shows how resources may be members of multiple tree groups
This example demonstrates how to freeze rows at the top of the Scheduler using the LockRows feature
Customization
Shows a how to render custom HTML into the event bars
This demo visualizes transport scheduling at an airport
This example shows the event editor docked inside the browser viewport
The Event Editor feature displays a popup where you can edit the fields for your events. Double click an event to show the editor. Hover over an event to show a tooltip with information
The Event Editor feature displays a popup where you can edit the fields for your events. The popup has two custom combo fields. The second combo item list depends on the first combo value
Shows how to customize the items of the EventMenu
Shows how to move the different layers along the z-axis
Shows how to preload a specific locale and localize the application
Shows you how to customize the event tooltip
Shows how to render custom buttons into the event bar
A custom event editor implemented with Bootstrap
A custom event menu implemented with Bootstrap
This example shows how to use TinyMCE as a field in the event editor popup
Validation can be done when dragging, creating or resizing tasks. You can also provide an error message shown to your users when the state of a task is invalid
Export
Demonstrates how to export the scheduler to PDF/PNG
Demonstrates how to print component using browser print dialog
This demo shows a custom solution of exporting Scheduler data 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 extract a starting point for a test case which can be useful for reproducing an issue when reporting it on Bryntum's support forum
Misc
thin
Comprehensive showcase of all the widgets included in the Bryntum package. Browse through text fields, date pickers, buttons, layouts, and more
Integration
Scheduler with a CrudManager using a backend built on PHP & MySQL
This example uses a Content-Security-Policy meta tag to show that Scheduler works with CSP
This example shows how to include and use the grid using EcmaScript modules (import)
ExtJS 7.4.0
Example of a Bryntum Scheduler embedded in an ExtJS Classic application. Read more about ExtJS here: https://www.sencha.com
ExtJS 6.5.3
Example of a Bryntum Scheduler embedded in an ExtJS Modern application. Read more about ExtJS here: https://www.sencha.com
Demonstrates an editable Scheduler with a simple PHP backend (only stores data in session, no database)
This demo shows how to embed Bryntum Scheduler into the Lightning Web Component to use in your salesforce org
This example shows how to include and use the grid bundle using an ordinary script tag
This example shows how to use the Custom elements version of the Scheduler
Shows scheduler with .NET backend
Shows scheduler with .NET backend
WebPack 5
This very basic demo shows how to use SchedulerBase and webpack to do a custom build from our sources
WebPack 5
thin
This very basic demo shows how to use SchedulerBase and webpack to do a custom build from our thin packages
Angular
examples/frameworks/angular
Angular 13
TypeScript 4
This example shows how to use Bryntum Angular Scheduler component in an Angular application with routing and with state managed by NgRx
Angular 11
TypeScript 4
Shows how to use Angular 11 routing with the Bryntum Angular Scheduler. Angular v6+ is fully supported
Angular 19
TypeScript 5
The Angular Scheduler control will animate any changes to your rendered events out of the box
Angular 19
TypeScript 5
This simple example shows how the Angular Scheduler component can be integrated into any Angular application
Angular 19
TypeScript 5
thin
This example shows setup the thin Angular Scheduler component
Angular 16
TypeScript 4
This example shows a booking application demo, using ResourceTimeRanges, the summary feature and angular components as renderers
Angular 13
TypeScript 4
Displays columns of different types on left and right sides of the schedule
Angular 13
TypeScript 4
Shows how to replace the default event editor with an Angular-based custom editor
Angular 15
TypeScript 4
This example shows how you can visualize dependencies between tasks by loading data using the CrudManager in Angular
Angular 15
TypeScript 4
You can drag drop tasks between different Angular Scheduler component instances on the page
Angular 19
TypeScript 5
The example shows how easy it is to allow end users to drag unplanned tasks from an external grid to the Angular Scheduler component
Angular 15
TypeScript 4
This example lets you drag external DOM nodes and drop them onto tasks to update some aspect of them, such as scheduling the use of equipment
Angular 19
TypeScript 5
The Event Editor feature displays a popup where you can edit the fields for your events. The popup has multiple custom fields, which have dependencies on each other
Angular 15
TypeScript 4
This demo shows you how easy it is to filter & highlight events and resources to quickly find what matters to you
Angular 20
TypeScript 5
Shows a Scheduler with hierarchical resource data and both infinite timeline scroll as well as infinite resource scroll. The backend is made in PHP
Angular 15
TypeScript 4
This example shows how to localize the Angular Scheduler control together with i18next library in Angular
Angular 20
TypeScript 5
Resources and events are lazily loaded on demand via NgRx (Store + Effects), so the scheduler scrolls on both axes
Angular 15
TypeScript 4
This example shows how you can export the Angular Scheduler content into PDF/PNG in Angular
Angular 15
TypeScript 4
Shows how to use recurring events feature in Angular Scheduler. You can use any recurrence pattern to control the event scheduling
Angular 13
TypeScript 4
Shows how to use the TimeRanges feature with the recurring time spans to add repeating vertical lines and zones to the schedule
Angular 13
TypeScript 4
Double click event bars to edit name easily
Angular 15
TypeScript 4
This example shows the Angular Scheduler with resources organized in a tree structure and per-row task coloring
Angular 22
TypeScript 6
Shows how you can customize the TimeAxis class, which is used to generate the date ticks in the timeline header
Angular 16
TypeScript 4
Shows a timeline histogram
React + Vite
examples/frameworks/react-vite
React 18
Vite 5
TypeScript 5
This demo contains a React component that wraps Bryntum Grid using TypeScript and a small demo to showcase it
React 18
Vite 5
TypeScript 5
thin
This demo contains a React component that wraps Bryntum Grid using TypeScript and a small demo to showcase it
React 18
Vite 4
TypeScript 4
Demonstrates that the Scheduler performs well with many resources and events and with enabled React JSX rendering
React 18
Vite 5
TypeScript 5
This example shows a demo booking application, using ResourceTimeRanges and the summary feature
React 18
Vite 5
TypeScript 5
This demo shows how easy it is to drag unscheduled tasks from an external grid onto the React Scheduler
React 19
Vite 6
TypeScript 5
The Event Editor feature displays a popup where you can edit the fields for your events. The popup has multiple custom fields, which have dependencies on each other
React 19
Vite 7
TypeScript 5
Shows a Scheduler with hierarchical resource data and both infinite timeline scroll as well as infinite resource scroll. The backend is made in PHP
React 18
Vite 5
TypeScript 5
The demo shows how to customize Scheduler's weekends and non-working days
React 19
Vite 6
TypeScript 5
This demo contains a React Scheduler with the Print feature enabled while using JSX event and cell renderer
React 19
Vite 6
TypeScript 5
This example demonstrates how to use React components as event renderers
React 19
Vite 7
TypeScript 5
This example demonstrates how to use React components in tooltips and other widgets
React 18
Vite 4
TypeScript 5
Shows how to configure React renderers to use the React Context
React 19
Vite 8
TypeScript 6
Resources and events are lazily loaded on demand via Redux Toolkit Query, so the scheduler scrolls smoothly through large datasets on both axes
React 19
Vite 8
TypeScript 6
Shows how you can customize the TimeAxis class, which is used to generate the date ticks in the timeline header
React 18
Vite 4
TypeScript 4
Shows a timeline histogram
React 18
Vite 5
TypeScript 5
This demo shows the React Scheduler in vertical mode with resource along the horizontal axis
React
examples/frameworks/react
React 18
Demo of using the Bryntum React Scheduler component in a React application using Redux Toolkit, loading data with Redux Toolkit Query
React 16
This demo contains a React Scheduler component and lets you play with the out-of-the-box animations after data changes
React 18
Displays columns of different types on left and right sides of the schedule
React 16
This demo contains a React Scheduler control with a custom event editor popup implemented in React
React 16
This demo contains a React Scheduler with the dependencies feature in action. You can connect tasks from any side
React 16
This demo contains two React Scheduler component instances and lets you drag tasks between them
React 16
This demo contains a React Scheduler component and you can drag and drop external DOM nodes onto the tasks to add equipment
React 16
This shows how to use the Bryntum React Scheduler and other Widgets to filter or highlight the scheduled tasks
React 16
This demo shows how to localize the React Scheduler. You can localize it to any language using the JSON language files provided
React 16
This demo contains a React Scheduler with the PDF export feature enabled. You can also export to PNG & Excel
React 17
This demo shows how to use React state with the React Scheduler control
React 16
This demo contains a very simple React Scheduler implementation example
React 18
Double click event bars to edit name easily
React 16
TypeScript 4
This shows how to use Bryntum Scheduler and Widgets to take user input and filter or highlight the scheduler tasks in React + TypeScript
React 16
TypeScript 4
This shows how to use Bryntum Scheduler recurring events configuration in React + TypeScript
React 16
TypeScript 4
Shows how to use the TimeRanges feature with the recurring time spans to add repeating vertical lines and zones to the schedule
React 17
TypeScript 4
thin
This demo includes a SPFx web part that uses TypeScript and React
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 Scheduler 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 Scheduler in Nuxt
Vue 3 + Vite
examples/frameworks/vue-3-vite
Vue 3
Vite 5
TypeScript 5
This example shows basic setup of the Bryntum Scheduler
Vue 3
Vite 5
TypeScript 5
thin
This example shows basic setup of the Bryntum Scheduler
Vue 3
Vite 5
TypeScript 4
This example shows a demo booking application, using ResourceTimeRanges and the summary feature
Vue 3
Vite 5
TypeScript 5
This demo contains an example of the Vue Scheduler with a custom Vue + Vuetify event editor popup replacing the default one
Vue 3
Vite 5
TypeScript 5
This demo shows how easy it is to drag unscheduled tasks from an external grid onto the Scheduler
Vue 3
Vite 5
TypeScript 5
This example shows a demo using custom Vue component as event renderer
Vue 3
Vite 7
TypeScript 5
Shows a Scheduler with hierarchical resource data and both infinite timeline scroll as well as infinite resource scroll. The backend is made in PHP
Vue 3
Vite 8
TypeScript 6
Resources and events are lazily loaded on demand via TanStack Query, so the scheduler scrolls smoothly through large datasets on both axes
Vue 3
Vite 8
TypeScript 6
Shows how you can customize the TimeAxis class, which is used to generate the date ticks in the timeline header
Vue 3
Vite 4
TypeScript 4
Shows a timeline histogram
Vue 3
Vite 6
TypeScript 5
This example shows how to configure a Vue component to render in widget or tooltip
Vue 3
examples/frameworks/vue-3
Vue 3
Displays columns of different types on left and right sides of the schedule
Vue 3
Shows a simple Vue Scheduler component integration with Vue 3
Vue 3
Double click event bars to edit name easily
Vue 2
examples/frameworks/vue-2
Vue 2
Shows an advanced integration of Vue Scheduler using the Vue router and Vuex state management
Vue 2
Shows how to configure event animations in the Vue Scheduler component. You can also disable animations completely
Vue 2
Shows how to use the Vue Scheduler dependencies features to connect tasks using drag and drop
Vue 2
Shows how to implement dragging events between two Vue Scheduler instances
Vue 2
This example shows how to drag any DOM node and drop it onto a task in the Vue Scheduler to update some aspect of it
Vue 2
Shows how to combine the i18next framework with Vue Scheduler localization
Vue 2
Shows how to use the PDF export feature in the Vue Scheduler component
Vue 2
Shows a super simple integration of the Vue Scheduler into a Vue app
Vue 2
Shows how to organize the resources in the Vue Scheduler into a tree combined with per-row coloring of tasks
Vue 2
The Bryntum Scheduler component for Vue lets you render native Vue Components into grid cells