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

3D bars demo - Demonstrates customs styling to turn events into 3D bars
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 EventContextMenu
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 layouts demo - The Scheduler can layout events in 3 different ways: `stack` (the default), `pack` or `none` (overlapping).
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.
Localization demo - Shows how to preload a specific locale.
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'.
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

Rough.js demo - Uses the Rough.js library to draw sketchy events.
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.
Dependencies demo - This example shows how you can have dependencies visualized between tasks by loading data using the CrudManager.
Drag from a grid demo - This example shows how easy it is to drag tasks from a separate list or grid onto the schedule.
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 drop between multiple schedulers - You can drag drop tasks between different scheduler instances on the page
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)
Group summary demo - This example shows how you can display group summaries with custom rendering
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.
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.
Partner timelines demo - Dual timelines in sync
Histogram summary demo - This example shows how to make a simple animated histogram summary.
Tasks demo - An application demo with lots of custom rendering
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

PHP demo - Demonstrates an editable Scheduler with a simple PHP backend (only stores data in session, no database)
CrudManager demo - Demonstrates an editable Scheduler using CrudManager to communicate with the backend (only stores data in session, no database)
EcmaScript module demo - This example shows how to include and use the grid using EcmaScript modules (import)
RequireJS demo - This example uses RequireJS to load the grid (CommonJS format).
Script tag demo - This example shows how to include and use the grid bundle using an ordinary script tag.
ExtJS Modern 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>
Ionic demo - This demo contains an Ionic component that wraps Bryntum Grid and a small demo to showcase it.
Salesforce demo - This demo shows how to embed Bryntum Scheduler into the Lightning Component to use in your salesforce org.
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 Animations demo - The Scheduler will animate any changes to your rendered Events by default.
Angular Basic - This example shows Basic example of integrating Bryntum Scheduler into Angular application
Dependencies Angular demo - his example shows how you can have dependencies visualized between tasks by loading data using the CrudManager in Angular.
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 Localization demo - This example shows how to use Scheduler localization together with i18next library in Angular
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 Tasks - This example shows organization of resources in tree structure combined with Scheduler running in Angular framework
Drag from Grid - The example of dragging unplanned tasks from a grid to the Scheduler in Angular
Angular Drag between 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.
Angular 1 demo - This demo contains an Angular 1 component that wraps Bryntum Scheduler and a small demo to showcase it.
Angular 2 demo - This demo contains an Angular 2 component that wraps Bryntum Scheduler and a small demo to showcase it.
Angular 4 demo - This demo contains an Angular 4 component that wraps Bryntum Scheduler and a small demo to showcase it.
Angular 5 demo - This demo contains an Angular 5 component that wraps Bryntum Scheduler and a small demo to showcase it.
Angular 6 demo - This demo contains an Angular 6 component that wraps Bryntum Scheduler and a small demo to showcase it.
Angular 7 demo - This demo contains an Angular 7 component that wraps Bryntum Scheduler and a small demo to showcase it.

Integration/React

Advanced React + Redux 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.
Filtering Scheduler React+TypeScript 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 demo - This demo contains a React component that wraps Bryntum Grid and a small demo to showcase it.
React + TypeScript demo - This demo contains a React component that wraps Bryntum Grid using TypeScript and a small demo to showcase it.
React Custom Event Editor demo - This demo contains an example with custom React event editor popup.
React drag between schedulers demo - This demo contains a React drag between schedulers example.
React drag from grid demo - This demo contains a React drag from grid example.
React drag onto tasks demo - This demo contains a React drag onto tasks example.
Filtering Scheduler React demo - This shows how to use Bryntum Scheduler and Widgets to take user input and filter or highlight the scheduler tasks.
React animation demo - This demo contains a React animation example.
React dependencies demo - This demo contains a React dependencies example.
React localization demo - This demo contains a React localization example.
React simple demo - This demo contains a React simple example.

Integration/Vue

Advanced Vue demo - Shows an advanced way of Scheduler integration using Vue router and Vuex
Animations Vue demo - Shows how to use Scheduler animations in Vue
Dependencies Vue demo - Shows how to use Scheduler dependencies in Vue
Drag tasks from Grid Vue demo - The example of dragging unplanned tasks from a grid to the Scheduler in Vue
Drag between Schedulers Vue demo - Shows how to implement dragging between Schedulers in Vue
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.
Vuestic Admin demo - Responsive admin dashboard demo for Scheduler built with Vue and Bootstrap 4.
Vue demo - This demo contains a Vue component that wraps Bryntum Grid and a small demo to showcase it.
Localization Vue demo - Shows how to combine i18next framework with Scheduler localizations in Vue
Simple Vue demo - Shows simple Scheduler integration
Tasks Vue demo - Shows how to resource tree combined with Scheduler in Vue
Vue Custom Event Editor demo - This demo contains an example with custom Vue event editor popup.