Ext Scheduler Examples

These examples use our latest 4.x version which is based on Ext JS 6. We also have a 3.x version based on Ext JS 5. Additionally there is a 2.x version for Ext JS 4 (unsupported). When you purchase a license you will get access to all versions and previous releases. We would very much appreciate your help with reporting bugs if you find any.


This example shows you how you can validate the tasks in your schedule while interacting with them.

Understanding Events

This example logs the events fired by the scheduler and its data stores (loading both XML and JSON data).

Scrolling Programmatically

This example shows how you can scroll to a point in time, or to a specific event in your data store.

Tree View

A Tree Scheduler sample showing an airport schedule.

Printing Your Schedule

Simple example showing how you can print your scheduled data.

Configuration Options

The timescale can be configured with a resolution ranging from seconds to years.

Week View

This example shows you a classic calendar view.


Zooming from minutes to years

PDF Export

You can easily export the Scheduling chart to PDF or PNG.

Vertical Orientation

See how the Scheduler can be used in vertical orientation.

Drawing arrows between tasks

The Scheduler can easily visualize relationships between tasks by using an extra data store

Big data set

The Scheduler can handle hundreds or thousands of rows / events, demonstrated in this sample.


Ext Scheduler Customization



This example shows you how easy it is to localize date formats and texts used in the Scheduler.

Custom Header

This example shows you how to create your own custom header.

Custom Event Template

This example uses a custom template to show a resource load times.

Customizing Row Height

This example shows you how you can customize row height and event bar height.

Customizing Time Resolution

This example shows you how you can customize the time resolution used by the scheduler.



Ext Scheduler Plugins


Lines and Zones (Using XML)

You can add custom zones and lines to indicate special events or time spans such as vacation time or milestones.

Simple Editor Plugin

This is a simple example showing how you can edit the event title using a plugin.

Column Summary Plugin

This example shows you how the new ColumnSummary plugin works. For each resource, a number indicating either the total time or percentage allocated in the current view.

Editing Event Data

You can associate any meta data you want with a scheduled event. This example shows you the EventEditor plugin used to edit the data associated with the events in the scheduler (double click to show the editor).

Pan Plugin

Plugin allowing you to pan the schedule by clicking and dragging.

Drag Selector Plugin

Plugin allowing you to select multiple events at once by clicking and dragging.



Ext Scheduler Advanced Examples


Multiple Event Templates

Here’s an example showing how you can change the look of your event template based on event type. It is all done using CSS and is very simple to do.

Custom Time Axis

This example show how you can customize the time axis powering the Scheduler.

Drag Drop from a Grid

Drag drop from an external grid onto the scheduler. Also includes a basic way of handling resource availability.


Slightly advanced example that uses the powerful charting capabilities of Ext JS 4.

Experimental: Client Side Excel Export

This example is a proof of concept showing export functionality leveraging the data URI scheme. Only been tested in Firefox.



Server Integration Examples



Download the trial


Download the trial


Download the trial



Mashups with Remote Data Sources



This is an example showing ongoing auctions from the eBay API.

Google Spreadsheet

This example visualizes a simple schedule stored in an online Google Spreadsheet.