Bryntum Scheduler

Power demos

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.
Nested events demo - Shows a more advanced use of eventBodyTemplate to render 'nested events'.
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
Property booking demo - This example shows a demo booking application, using ResourceTimeRanges and the summary feature.
Sharing CrudManager demo - Demonstrates two schedulers both showing a subset of the resources from a shared CrudManager
Stress test demo - This demo lets you test the scheduler when external edits are received, to simulate a real world app with web sockets.
Tasks demo - An application demo with lots of custom rendering
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

Drag & drop

Drag drop between multiple schedulers - You can drag drop tasks between different scheduler instances on the page
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 from external grid to a tree - This example shows how to drag tasks from a grid onto a tree schedule.
Drag equipment from a list - This example shows how to drag items from a list and drop them onto a task to update some aspect of it.
Drag from a tree grid demo - This example shows how easy it is to drag tasks from a tree 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 events out of the scheduler - This example shows how to drag events to an element outside the scheduler.

Basics

Basic demo - Shows a very basic scheduler setup
Configuration demo - Built-in and custom made view presets along with zooming feature
Columns demo - Displays columns of different types on left and right sides of the schedule
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.
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>
Scheduler state demo - 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

Event animations demo - The Scheduler will animate any changes to your rendered Events by default.
Custom event styling - Custom rendering of events using the <code>eventRenderer()</code> function
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 the resources/ folder to see how it is done.
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.
Event styles demo - Shows how using eventStyle and eventColor affects appearance
Milestone layout demo - Shows the different options available to make milestones part of the event layout
Icons - You can render not only event bars, but also icons representing a milestone.

Features

Collapsible group headers demo - A Scheduler with collapsible grouped columns in its grid section
Drag selection mode - Click and drag to select multiple events easily
Dependencies demo - This example shows how you can have dependencies visualized between tasks by loading data using the CrudManager.
Dependencies in vertical mode - Shows a scheduler in vertical mode with dependencies
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.
Grouping demo - This example shows how you can group resources
Group summary demo - This example shows how you can display group summaries with custom rendering
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.
Merge cells demo - 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
Multi assignment demo - Shows a basic scheduler using an AssignmentStore to support multi assignment
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-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
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.
Responsive demo - Shows how the scheduler can be easily made responsive using a combination of configs and styling.
Simple event editor demo - Double click event bars to edit name easily
Summary demo - This example shows the summary feature.
Histogram summary demo - This example shows how to make a simple animated histogram summary.
TimeRanges demo - Shows how to use the TimeRanges feature to add vertical lines and zones to the schedule
Time zone demo - Shows how time zone support can be implemented
Time Selection demo - Shows how to select time ranges in the time axis header
Tree demo - This demo visualizes hierarchical data in the form of a tree
Tree grouping demo - Uses the TreeGroup feature to transform the resource tree's structure
Undo/Redo demo - This demo shows undo / redo functionality one can use in an application using standard State Tracking Manager facility.
Vertical mode demo - Shows a basic scheduler using vertical mode
Vertical mode with column widths - Shows a basic scheduler using vertical mode with defined column widths
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

Customization

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
Localization demo - Shows how to preload a specific locale and localize the application.
Tooltips demo - Shows you how to customize the event tooltip
Custom Event Editor demo - A custom event editor implemented with Bootstrap
Custom Event menu demo - A custom event menu implemented with Bootstrap
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.
Docked Event Editor - This example shows the event editor docked inside the browser viewport.

Export

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
Extract a test case - 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

Integration

CrudManager PHP & MySQL demo - Scheduler with a CrudManager using a backend built on PHP & MySQL
CSP demo - This example uses a Content-Security-Policy meta tag to show that Scheduler works with CSP.
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>
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.
Ionic + Angular Scheduler demo - This demo is based on the Ionic framework and uses the Bryntum Angular Scheduler wrappers.
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.