Bryntum Scheduler Pro

Use cases

Map integration - This example shows how to integrate the Scheduler with a Mapbox GL JS API.
Flight Dispatch Scheduling demo - Shows a typical flight dispatch UI implemented with Scheduler Pro
Embedded Line Chart demo - 3rd party charts can be embedded as an extra layer inside each row
Skill matching - Define skills for resources and annotate tasks with the skills required to perform the task
Planned vs Actual demo - Toggle between showing planned dates and actual dates
SchedulerPro realtime updates demo - Shows changes made by other clients in real time

Additional widgets

Pro Resource histogram demo - Show a Scheduler Pro and a Resource Histogram visualizing resource allocation in sync
Pro Resource utilization demo - Show a Scheduler Pro and a Resource Utilization visualizing resource allocation in sync
Pro Timeline demo - Scheduler Pro with Timeline widget

Features

Infinite scroll and CrudManager - Shows a SchedulerPro with both infinite timeline scroll and infinite resource scroll, managed by the CrudManager. The backend is made in PHP.
Nested events with drag-n-drop support - Uses the NestedEvents feature to display nested events with drag-n-drop support
Nested events configuration options - A more advanced demo using nested events, letting you try out different configuration options for the feature
Lazy loaded nested events - This demo demonstrates nested events using a lazy loaded project
Pro Split events demo - Shows the events split to segments that can be dragged and resized individually
Pro Conflicts demo - Shows the conflict resolution popup in action
Pro Constraints demo - Using constraints on events to affect their scheduling
Pro Event effort demo - Show events that distribute their effort across their duration. Scheduler Pro and a Resource Utilization visualize effort allocation in sync.
Pro Dependencies demo - Shows a basic Scheduler Pro setup with dependencies affecting scheduling
Dependencies between nested events - Shows using dependencies between nested events, that affects the scheduling
Pro Grouping demo - Shows a Scheduler Pro with resources / machines grouped separately but assigned to same tasks
Pro non-working time demo - Shows a Scheduler Pro setup with a working hours calendar and time axis filtering
Pro Percent done demo - Scheduler Pro using the percentBar feature to visualize percentDone
Pro Event non-working time demo - Shows Scheduler Pro using and visualizing per event calendars
Pro Recurring events demo - Shows a Scheduler Pro with recurring events
Pro Calendar editor demo - Shows Calendar editor allowing to modify resource working hours
Pro Resource non-working time demo - Shows a Scheduler Pro setup with a working hour calendars per resource
Pro Weekends demo - Shows a Scheduler Pro with a weekend calendar, visualized in the UI and respected when scheduling
Pro Time zone demo - Shows how time zone support can be implemented
Travel time demo - This demo shows how to visualize travel time before/after an event
Tree Summary Heatmap demo - This demo shows how to summarize the number of events per date and group with a heat map

Customization

Custom event layout demo - Grouping events inside the resource row
Localization demo - Shows how to preload a specific locale and localize the application.
Pro TaskEditor demo - Scheduler Pro with task editor customizations

Highlighting

Highlighting Event Calendars - Help end users understand the scheduling logic by visualizing event calendars
Highlighting Resource Calendars - Help end users understand the scheduling logic by visualizing resource calendars
Highlighting time spans - Help end users understand the scheduling rules by visualizing the event scheduling boundaries

Drag drop

Pro Drag from grid demo - Drag tasks from a list onto Scheduler to schedule them or onto other tasks connect them with dependencies
Drag unplanned tasks from a grid - Drag unplanned tasks from a list onto the Scheduler component
Scheduling Orders - Create orders and drag onto the Scheduler to schedule
Nested events draggable from grid - A more advanced demo using nested events, letting you drag and drop events from a grid to assign to a parent event

Misc

Big data set demo - Demonstrates Scheduler Pro using a big project.
Pro inline data demo - Shows using inline data for Scheduler Pro
Deeper nesting of events - A demo that shows how to handle two levels of nesting of events

Integration

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>
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 SchedulerProBase and webpack to do a custom build from our sources
Custom build using WebPack and thin bundles - This very basic demo shows how to use SchedulerProBase and webpack to do a custom build from our thin packages

Power demos (Basic Scheduler)

Separating resources into a "locked" section at the top - Demonstrates showing a set of resources locked at the top of the Scheduler
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.
Property booking demo - This example shows a demo booking application, using ResourceTimeRanges and the summary feature.
Infinite scroll with lazy loading - Shows a Scheduler with both infinite timeline scroll as well as infinite resource scroll. The backend is made in PHP.
Nested events demo - Shows a more advanced use of eventRenderer to render 'nested events'.
Paged Scheduler with mocked Ajax - This example demonstrates that the Scheduler can access large data sets page by page
Partner timelines demo - Dual timelines in sync
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
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.
Timeline histogram demo - Shows a timeline histogram
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 (Basic Scheduler)

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 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 Scheduler)

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 (Basic Scheduler)

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 (Basic Scheduler)

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
Field Filters demo - Shows how to use FieldFilterPickerGroup to filter the resource and event stores of the Schedule.
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 Timeline 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 SchedulerAssignmentStore to support multi assignment
Multi assignment using resourceIds field demo - Shows a basic scheduler using resourceIds field 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.
Scroll Buttons demo - Shows buttons at the start/end of each row to let users scroll to the next event quickly.
Simple event editor demo - Double click event bars to edit name easily
Schedule tick cell hover widget - Shows how to position a widget overlayed at the tick cell that the pointer is hovering
Schedule tick cell hover widget - Shows how to position a widget overlayed at the tick cell that the pointer is hovering
Splitting demo - This example demonstrates how split the scheduler into multiple views
Summary demo - This example shows the summary feature.
Header summary demo - This example shows a summary in the timeaxis header
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 Summary demo - This demo shows how to rollup and summarize tree data
Customized Tree Summary demo - This demo shows how to rollup and summarize tree data and customize the way the rollup data are shown
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
Multi group membership demo - This example shows how resources may be members of multiple groups
Multi tree-group membership demo - This example shows how resources may be members of multiple tree groups
Locking rows demo - This example demonstrates how to freeze rows at the top of the Scheduler using the LockRows feature

Customization (Basic Scheduler)

Custom event rendering demo - Shows a how to render custom HTML into the event bars
Airport dolly scheduling demo - This demo visualizes transport scheduling at an airport
Docked Event Editor - This example shows the event editor docked inside the browser viewport.
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
Layers demo - Shows how to move the different layers along the z-axis
Tooltips demo - Shows you how to customize the event tooltip
Custom event buttons demo - Shows how to render custom buttons into the event bar
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.

Export (Basic Scheduler)

Export to PDF demo - Demonstrates how to export the scheduler to PDF/PNG
Print demo - Demonstrates how to print component using browser print dialog
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 write-excel-file (https://www.npmjs.com/package/write-excel-file)
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 (Basic Scheduler)

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)
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
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.
Custom build using WebPack - This very basic demo shows how to use SchedulerBase and webpack to do a custom build from our sources
Custom build using WebPack and thin bundles - This very basic demo shows how to use SchedulerBase and webpack to do a custom build from our thin packages