Bryntum Scheduler is a full featured resource scheduler with support for all the features you need like grouping, filtering, tree view, dependency lines and much more. 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.

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 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 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 context menu demo - Shows how to customize the items of the EventMenu
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.
Grouping demo - This example shows how you can group resources
Icons - You can render not only event bars, but also icons representing a milestone.
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).
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 AssignmentStore to support multi assignment
Nested events demo - Shows a more advanced use of eventBodyTemplate to render 'nested events'.
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.
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

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 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
Export to PDF demo - Demonstrates how to export the scheduler to PDF/PNG
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

.NET demo - Shows scheduler with .NET backend
.NET demo - Shows scheduler with .NET backend
CrudManager demo - Demonstrates an editable Scheduler using CrudManager to communicate with the backend (only stores data in session, no database)
Custom build using WebPack - This very basic demo shows how to use webpack to do a custom build from our sources.
WebPack 4
Custom Event Editor demo - A custom event editor implemented with Bootstrap
Custom Event menu demo - A custom event menu 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)
RequireJS demo - This example uses RequireJS to load the grid (CommonJS format).
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 grid. Currently the only browsers supporting Custom elements are Chrome and Safari.

Integration/Angular

Angular 1 demo - This demo contains an Angular 1 component that wraps Bryntum Scheduler and a small demo to showcase it.
Angular 1
Angular 2 demo - This demo contains an Angular 2 component that wraps Bryntum Scheduler and a small demo to showcase it.
Angular 2
Angular 4 demo - This demo contains an Angular 4 component that wraps Bryntum Scheduler and a small demo to showcase it.
Angular 4
Angular 5 demo - This demo contains an Angular 5 component that wraps Bryntum Scheduler and a small demo to showcase it.
Angular 5
Angular 6 demo - This demo contains an Angular 6 component that wraps Bryntum Scheduler and a small demo to showcase it.
Angular 6
Angular 7 demo - This demo contains an Angular 7 component that wraps Bryntum Scheduler and a small demo to showcase it.
Angular 7
Angular 8 demo - This demo contains an Angular 8 component that wraps Bryntum Scheduler and a small demo to showcase it.
Angular 8
Angular Routing + NgRx demo - This example shows how to use Bryntum Scheduler in an Angular application with routing and with state managed by NgRx.
Angular 8
Angular Animations demo - The Scheduler will animate any changes to your rendered Events by default.
Angular 8
Angular Basic - This example shows Basic example of integrating Bryntum Scheduler into Angular application
Angular 8
Angular Custom Event Editor demo - Shows how to use Angular-based custom event editor instead of the default one.
Angular 8
Dependencies Angular demo - his example shows how you can have dependencies visualized between tasks by loading data using the CrudManager in Angular.
Angular 8
Angular Drag between Schedulers - You can drag drop tasks between different scheduler instances on the page
Angular 8
Drag from Grid - The example of dragging unplanned tasks from a grid to the Scheduler in Angular
Angular 8
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.
Angular 8
Angular 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
Angular Localization demo - This example shows how to use Scheduler localization together with i18next library in Angular
Angular 8
PDF Export Angular demo - This example shows how you can export Scheduler content into PDF/PNG in Angular.
Angular 8
Angular Recurring Events demo - Shows how to use recurring events feature in Angular 9.
Angular 9
Angular Tasks - This example shows organization of resources in tree structure combined with Scheduler running in Angular framework
Angular 8

Integration/Ionic

Ionic demo - This demo contains an Ionic component that wraps Bryntum Grid and a small demo to showcase it.
Ionic 4
Ionic themes demo - This demo shows how to include and switch themes in Ionic application with Bryntum Scheduler.
Ionic 4

Integration/React

React + Redux advanced demo - This demo shows how to use Bryntum Scheduler in an advanced React application. This demo uses Redux-Saga, loading data with Axios, localization with i18-next and a simple middleware logger.
React 16
React animation demo - This demo contains a React animation example.
React 16
React dependencies demo - This demo contains a React dependencies example.
React 16
React drag between schedulers demo - This demo contains a React drag between schedulers example.
React 16
React drag from grid demo - This demo contains a React drag from grid example.
React 16
React drag onto tasks demo - This demo contains a React drag onto tasks example.
React 16
React Filtering Demo - This shows how to use Bryntum Scheduler and Widgets to take user input and filter or highlight the scheduler tasks.
React 16
React localization demo - This demo contains a React localization example.
React 16
React PDF export demo - This demo contains a React PDF export example.
React 16
React simple demo - This demo contains a React simple example.
React 16
React Custom Event Editor demo - This demo contains an example with custom React event editor popup.
React 16
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

Integration/Vue

Simple Vue demo - Shows simple Scheduler integration
Vue 2
Advanced Vue demo - Shows an advanced way of Scheduler integration using Vue router and Vuex
Vue 2
Animations Vue demo - Shows how to use Scheduler animations in Vue
Vue 2
Dependencies Vue demo - Shows how to use Scheduler dependencies in Vue
Vue 2
Drag between Schedulers Vue demo - Shows how to implement dragging between Schedulers in Vue
Vue 2
Drag tasks from Grid Vue demo - The example of dragging unplanned tasks from a grid to the Scheduler in Vue
Vue 2
Drag onto tasks Vue demo - This example shows how to drag any DOM node and drop it onto a task to update some aspect of it.
Vue 2
Localization Vue demo - Shows how to combine i18next framework with Scheduler localizations in Vue
Vue 2
PDF export Vue demo - Shows how to use Scheduler PDF export feature in Vue
Vue 2
Tasks Vue demo - Shows how to resource tree combined with Scheduler in Vue
Vue 2
Vue Custom Event Editor demo - This demo contains an example with custom Vue event editor popup.
Vue 2
Vuestic Admin demo - Responsive admin dashboard demo for Scheduler built with Vue and Bootstrap 4.
Vue 2