Bryntum Scheduler Pro is a full featured resource scheduler with support for all the features you need like grouping, filtering, tree view, dependency lines and much more. It also supports automatic scheduling using Bryntum's Scheduling Engine and can work paired with Bryntum's Gantt. Scroll down to browse demos or click the 'Documentation' button above to view our guides and API docs. The info button lets you switch theme and locale for the demos.

Pro

Big data set demo - Demonstrates Scheduler Pro using a big project.
Pro
Pro Constraints demo - Using constraints on events to affect their scheduling
Pro
Custom event layout demo - Grouping events inside the resource row
Pro
Pro Dependencies demo - Shows a basic Scheduler Pro setup with dependencies affecting scheduling
Pro
Pro Drag from grid demo - Drag tasks from a list onto Scheduler to schedule them or onto other tasks connect them with dependencies
Pro
Scheduling Orders - Create orders and drag onto the Scheduler to schedule
Pro
Embedded Line Chart demo - 3rd party charts can be embedded as an extra layer inside each row
Pro
Pro Grouping demo - Shows a Scheduler Pro with resources / machines grouped separately but assigned to same tasks
Pro
Map integration - This example shows how to integrate the Scheduler with a Mapbox GL JS API.
Pro
Nested events with drag-n-drop support - Shows a more advanced use of eventBodyTemplate to render 'nested events' with drag-n-drop support.
Pro
Pro Non-working time demo - Shows a Scheduler Pro setup with a working hours calendar and time axis filtering
Pro
Pro Percent done demo - Scheduler Pro using the percentBar feature to visualize percentDone
Pro
Pro Resource non-working time demo - Shows a Scheduler Pro setup with a working hour calendars per resource
Pro
Pro Resource histogram demo - Show a Scheduler Pro and a Resource Histogram visualizing resource allocation in sync
Pro
Pro TaskEditor demo - Scheduler Pro with task editor customizations
Pro
Pro Timeline demo - Scheduler Pro with Timeline widget
Pro
Pro Weekends demo - Shows a Scheduler Pro with a weekend calendar, visualized in the UI and respected when scheduling
Pro

Integration/Pro

ExtJS Modern App integration demo - Example of a Bryntum Scheduler Pro embedded in an ExtJS Modern application. Read more about ExtJS here: <a href='https://www.sencha.com/products/extjs' style='color: white; font-weight: bold'>https://www.sencha.com</a>
ExtJS 7.2.0
Salesforce demo - This demo shows how to embed Bryntum Scheduler Pro into the Lightning  Web Component to use in your salesforce org.
Web Components demo - This example shows how to use the Custom elements version of the Scheduler Pro.
Custom build using WebPack - This very basic demo shows how to use webpack to do a custom build from our sources.
WebPack 4
Angular Scheduler Pro Resource Histogram demo - This demo shows how to use Resource Histogram which is part of Angular Scheduler Pro.
Angular 13
React Scheduler Pro Orders demo - This is an advanced demo showing creation of orders from a template. When you drag an order onto the schedule, its template tasks are added.
React 17
React Scheduler Pro Resource Histogram demo - This demo shows how to use Resource Histogram in React.
React 16.13
React Scheduler Pro Timeline Widget demo - A demo showing the Scheduler Pro component with Timeline widget inside a simple React app.
React 17
Vue Scheduler Pro Resource Histogram demo - The example shows how to configure the Vue Scheduler Pro partnered with the Resource Histogram.
Vue 2.6
Vue Scheduler Pro Cell Renderer demo - Bryntum Scheduler Pro lets you render Vue components into grid cells which makes it easy to reuse your existing Vue components
Vue 2.6
Vue 3 Scheduler Pro Resource Histogram demo - The example shows how to configure the Scheduler Pro to be partnered with the Resource Histogram in Vue 3
Vue 3.0

Basic

Event animations demo - The Scheduler will animate any changes to your rendered Events by default.
Basic demo - Shows a very basic scheduler setup
Configuration demo - Built-in and custom made view presets along with zooming feature
Custom event styling - Custom rendering of events using the <code>eventRenderer()</code> function
Drag selection mode - Click and drag to select multiple events easily
Event styles demo - Shows how using eventStyle and eventColor affects appearance
Fill ticks demo - 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.
Filtering demo - This demo shows you how easy it is to filter & highlight events and resources to quickly find what matters to you.
Resource collapsing demo - Using `eventLayout` field of the resource model you can control the collapsed state. 'stack' means expanded, 'none' means collapsed.
Resource time ranges demo - 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.
Variable Row height - Allows adjusting row height and bar margin using sliders to get immediate feedback on the effect of those settings
Scroll to demo - 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.
Simple event editor demo - Double click event bars to edit name easily
TimeRanges demo - Shows how to use the TimeRanges feature to add vertical lines and zones to the schedule
Time resolution demo - <p>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. </p><p>Note how drag, resize and create operations are affected by having Snap checked or not.</p>
Tooltips demo - Shows you how to customize the event tooltip
Vertical mode demo - Shows a basic scheduler using vertical mode

Intermediate

Big data set demo - Demonstrates that the scheduler performs well even with many many rows.
Big data set tree demo - Demonstrates that the scheduler performs well even with a large hierarchical data set
Big data set vertical demo - Demonstrates that the vertical scheduler performs well even with many many rows.
Columns demo - Displays columns of different types on left and right sides of the schedule
Event Editor demo - 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.
Event Editor with cascading combos demo - 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.
Event context menu demo - Shows how to customize the items of the EventMenu
Grouping demo - This example shows how you can group resources
Icons - You can render not only event bars, but also icons representing a milestone.
Infinite Scroll - A scheduler which contains a year's worth of events and may be scrolled continuously so that all events may be visited
Labels demo - This demo uses the Labels feature to display labels above/below events. Labels can display field data or use a custom renderer.
Event layouts demo - The Scheduler can layout events in 3 different ways: `stack` (the default), `pack` or `none` (overlapping). Order of overlapping events is configurable.
Localization demo - Shows how to preload a specific locale and localize the application.
Milestone layout demo - Shows the different options available to make milestones part of the event layout
Multi assignment demo - Shows a basic scheduler using an SchedulerAssignmentStore to support multi assignment
Nested events demo - Shows a more advanced use of eventBodyTemplate to render 'nested events'.
Non-working days demo - The demo shows how to customize Scheduler's weekends and non-working days
Recurring events - Shows recurring events. All update/delete operations on recurring events required to be confirmed. You can change recurrence configuration using the default event editor.
Recurring TimeRanges demo - Shows how to use the TimeRanges feature with the recurring time spans to add repeating vertical lines and zones to the schedule
Responsive demo - Shows how the scheduler can be easily made responsive using a combination of configs and styling.
Stress test demo - This demo lets you test the scheduler when external edits are received, to simulate a real world app with web sockets.
Summary demo - This example shows the summary feature.
Tree demo - This demo visualizes hierarchical data in the form of a tree
Validation demo - 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.
Working time demo - 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
Custom Event menu demo - A custom event menu implemented with Bootstrap

Advanced

Dependencies demo - This example shows how you can have dependencies visualized between tasks by loading data using the CrudManager.
Drag drop between multiple schedulers - You can drag drop tasks between different scheduler instances on the page
Drag equipment 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 a grid demo - This example shows how easy it is to drag tasks from a separate list or grid onto the schedule.
Export to PDF demo - Demonstrates how to export the scheduler to PDF/PNG
Export Scheduler to Excel - This demo shows a custom solution of exporting Scheduler data to Excel without involving the server based on a third party library called zipcelx (https://www.npmjs.com/package/zipcelx)
Export Events to ICS - This demo shows how to export an event to the ICS format to be added to Outlook and other calendars
Group summary demo - This example shows how you can display group summaries with custom rendering
Histogram summary demo - This example shows how to make a simple animated histogram summary.
Multi assignment + dependencies demo - Shows a basic scheduler using an multi assignment with dependencies, drawing dependency lines to all assignments of an event
Multi summary demo - This example shows how to display multiple summaries for the schedule part.
Partner timelines demo - Dual timelines in sync
Rough.js demo - Uses the Rough.js library to draw sketchy events.
Tasks demo - An application demo with lots of custom rendering
Custom theme demo - This demo has a custom theme, to showcase how you can create your own. Check <a href='resources/custom.scss'>custom.scss</a> in resources/ to see how it is done.
Non-continuous time axis demo - Shows how you can customize the TimeAxis class, which is used to generate the date ticks in the timeline header.
Undo/Redo demo - This demo shows undo / redo functionality one can use in an application using standard State Tracking Manager facility.
WebSockets demo - 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

Integration

CrudManager demo - Demonstrates an editable Scheduler using CrudManager to communicate with the backend (only stores data in session, no database)
Custom Event Editor demo - A custom event editor implemented with Bootstrap
EcmaScript module demo - This example shows how to include and use the grid using EcmaScript modules (import)
ExtJS Modern App integration demo - Example of a Bryntum Scheduler embedded in an ExtJS Modern application. Read more about ExtJS here: <a href='https://www.sencha.com/products/extjs' style='color: white; font-weight: bold'>https://www.sencha.com</a>
ExtJS 6.5.3
PHP demo - Demonstrates an editable Scheduler with a simple PHP backend (only stores data in session, no database)
Salesforce demo - This demo shows how to embed Bryntum Scheduler into the Lightning  Web Component to use in your salesforce org.
Script tag demo - This example shows how to include and use the grid bundle using an ordinary script tag.
Web Components demo - This example shows how to use the Custom elements version of the scheduler
.NET demo - Shows scheduler with .NET backend
.NET demo - Shows scheduler with .NET backend
Custom build using WebPack - This very basic demo shows how to use webpack to do a custom build from our sources.
WebPack 4

Integration/Angular

Angular Scheduler Component With Routing + NgRx demo - This example shows how to use Bryntum Angular Scheduler component in an Angular application with routing and with state managed by NgRx.
Angular 13
Angular 11 + Scheduler Routing demo - Shows how to use Angular 11 routing with the Bryntum Angular Scheduler. Angular v6+ is fully supported.
Angular 11
Angular 6 Scheduler demo - This demo contains the Bryntum Angular Scheduler and shows compatibility with Angular 6.
Angular 6
Bryntum Scheduler + Angular 7 - This demo contains an Angular 7 app which contains the Bryntum Angular Scheduler. The Scheduler is compatible with Angular 6+
Angular 7
Bryntum Scheduler + Angular 8 demo - This demo contains the Angular Scheduler component in a small demo to showcase its compatibility with Angular 8. Full compatibility with Angular 6+
Angular 8
Angular Scheduler Animations demo - The Angular Scheduler control will animate any changes to your rendered events out of the box.
Angular 13
Angular Scheduler Basic Demo - This simple example shows how the Angular Scheduler component can be integrated into any Angular application
Angular 8
Angular Scheduler With Custom Event Editor - Shows how to replace the default event editor with an Angular-based custom editor.
Angular 13
Angular Scheduler Dependencies demo - This example shows how you can visualize dependencies between tasks by loading data using the CrudManager in Angular.
Angular 8
Drag between Angular Schedulers - You can drag drop tasks between different Angular Scheduler component instances on the page.
Angular 8
Angular Scheduler Drag Tasks from Grid - 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 13
Angular Scheduler: Drag equipment onto tasks - 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 8
Angular Scheduler Filtering demo - This demo shows you how easy it is to filter & highlight events and resources to quickly find what matters to you.
Angular 8
Localization Of Angular Scheduler - This example shows how to localize the Angular Scheduler control together with i18next library in Angular
Angular 8
Exporting Angular Scheduler To PDF - This example shows how you can export the Angular Scheduler content into PDF/PNG in Angular.
Angular 8
Angular Scheduler Recurring Events - Shows how to use recurring events feature in Angular Scheduler. You can use any recurrence pattern to control the event scheduling.
Angular 9
Angular Recurring Timeranges demo - Shows how to use the TimeRanges feature with the recurring time spans to add repeating vertical lines and zones to the schedule
Angular 13
Angular Scheduler Tasks - This example shows the Angular Scheduler with resources organized in a tree structure and per-row task coloring.
Angular 8

Integration/Ionic

Ionic + Angular Scheduler demo - This demo is based on the Ionic framework and uses the Bryntum Angular Scheduler wrappers.
Ionic 4
Ionic + Angular Scheduler Themes Demo - This demo shows how to include and switch themes in an Ionic application incorporating the Angular wrapper of the Bryntum Scheduler.
Ionic 4

Integration/React

React Scheduler + Redux Toolkit demo - Demo of using the Bryntum React Scheduler component in a React application using Redux Toolkit, loading data with Redux Toolkit Query.
React 17
React Scheduler animation demo - This demo contains a React Scheduler component and lets you play with the out-of-the-box animations after data changes.
React 16
React Scheduler With Custom Editor - This demo contains a React Scheduler control with a custom event editor popup implemented in React.
React 16
React Scheduler + Dependencies demo - This demo contains a React Scheduler with the dependencies feature in action. You can connect tasks from any side.
React 16
Drag between React scheduler instances - This demo contains two React Scheduler component instances and lets you drag tasks between them.
React 16
React Scheduler - Drag from grid - This demo shows how easy it is to drag unscheduled tasks from an external grid onto the React Scheduler.
React 16
React Scheduler - Drag onto Tasks demo - This demo contains a React Scheduler component and you can drag and drop external DOM nodes onto the tasks to add equipment.
React 16
React Scheduler Filtering Demo - This shows how to use the Bryntum React Scheduler and other Widgets to filter or highlight the scheduled tasks.
React 16
React Scheduler localization demo - This demo shows how to localize the React Scheduler. You can localize it to any language using the JSON language files provided.
React 16
React Scheduler PDF export demo - This demo contains a React Scheduler with the PDF export feature enabled. You can also export to PNG & Excel
React 16
Scheduler using React state - This demo shows how to use React state with the React Scheduler control.
React 17
Simple React Scheduler demo - This demo contains a very simple React Scheduler implementation example.
React 16
React Scheduler in vertical mode - This demo shows the React Scheduler in vertical mode with resource along the horizontal axis.
React 17
React + TypeScript basic demo - This demo contains a React component that wraps Bryntum Grid using TypeScript and a small demo to showcase it.
React 16
React + TypeScript filtering demo - 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
React + TypeScript Recurring Events demo - This shows how to use Bryntum Scheduler recurring events configuration in React + TypeScript.
React 16
React + TypeScript Recurring Timeranges demo - Shows how to use the TimeRanges feature with the recurring time spans to add repeating vertical lines and zones to the schedule
React 16

Integration/Vue

Vue Scheduler + Vuex demo - Shows an advanced integration of Vue Scheduler using the Vue router and Vuex state management.
Vue 2
Vue Scheduler animations demo - Shows how to configure event animations in the Vue Scheduler component. You can also disable animations completely.
Vue 2
Vue Scheduler With Custom Editor - This demo contains an example of the Vue Scheduler with a custom Vue based event editor popup replacing the default one.
Vue 2
Vue Scheduler + Dependencies demo - Shows how to use the Vue Scheduler dependencies features to connect tasks using drag and drop.
Vue 2
Drag Between Vue Schedulers demo - Shows how to implement dragging events between two Vue Scheduler instances.
Vue 2
Vue Scheduler - Drag tasks from a grid - This example shows how to implement dragging of unplanned tasks from a grid onto the Vue Scheduler component.
Vue 2
Vue Scheduler - Drag onto tasks Vue - 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
Localization Vue Scheduler - Shows how to combine the i18next framework with Vue Scheduler localization.
Vue 2
PDF export of Vue Scheduler - Shows how to use the PDF export feature in the Vue Scheduler component.
Vue 2
Simple Vue Scheduler demo - Shows a super simple integration of the Vue Scheduler into a Vue app.
Vue 2
Custom Tree Scheduler demo - Shows how to organize the resources in the Vue Scheduler into a tree combined with per-row coloring of tasks.
Vue 2
Rendering Vue Components Into Grid Cells - The Bryntum Scheduler component for Vue lets you render native Vue Components into grid cells.
Vue 2
Vue Scheduler + Vuestic demo - A responsive admin dashboard demo built with Vue and Bootstrap 4 which incorporates the Vue Scheduler widget.
Vue 2
Vue 3 Scheduler Integration demo - Shows a simple Vue Scheduler component integration with Vue 3
Vue 3