Bryntum

These examples use our 2.x version which is based on Ext JS 4. We would very much appreciate your help with reporting bugs if you find any.

If you would rather try out the old 1.x release (based on Ext JS 3) click here

• Click download a free trial

  

  Basic Gantt Chart

  This example is a very basic implementation of the Ext Gantt, loading XML data.

  

  Assigning resources (updated!)

  Simple example showing how you can assign resources to your tasks.

  

  Baseline (updated!)

  This examples shows how you can include your project baseline along with the current plan.

  

  Gantt + Scheduler

  Simple example showing how both components can be used on the same page.

  

  Advanced Gantt Chart

  This example is feature packed and demonstrates a lot of the Ext Gantt capabilities.

  

  Theming and Styles

  Learn how easy it is to change the appearance of the Gantt chart using only CSS.

  

  Editing Dependencies (new!)

  Try the included dependency editor plugin.

  

  Print support (new!)

  The Gantt chart supports HTML based printing demonstrated in this example.

  

  Holidays and Working Days (new!)

  The Gantt chart can easily be configured to exclude weekends and other user defined holidays.

  

  Reordering Gantt Tasks (new!)

  Using drag and drop you can easily reorder your schedule.

• EXT SCHEDULER EXAMPLES

  

  Validation

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

  

  Understanding events

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

  

  Column positioning

  This example shows you how you can position your "static" columns in your schedule.

  

  Grouping view

  This is a feature packed demo showcasing grouping and 3 different row height options.

  

  Scrolling programmatically

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

  

  Configuration options

  This example shows you a variety of different configuration options for the timescale. Each column can represent hours, days, weeks, months or years.

  

  Printing your schedule (new!)

  Simple example showing how you can print your scheduled data.

  

  Buffered view (new!)

  This example uses a buffered scheduling view to show tasks for 1000 resources.

  

  Tree View (new!)

  New 2.0 TreeView.

  

  Vertical orientation (new!)

  See how the Scheduler can be used in vertical orientation.

• EXT SCHEDULER CUSTOMIZATION

  

  Localization

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

  

  Custom header (updated!)

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

  

  Custom event styles

  This example visualizes the loading time for different HTML resources during a page load.

  

  Custom Time Axis

  This example uses a custom time axis representing a work week with separate start/end times for the weekdays.

  

  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.

  

  Timegap plugin

  This example shows a TimeGap plugin, highlighting periods of time that are available for all resources in the chart.

  

  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 (updated!)

  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 select multiple events at once by clicking and dragging.

  

  Simple editor plugin (new!)

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

• EXT SCHEDULER ADVANCED EXAMPLES

  

  HTML5 & CSS3 Showcase

  This is an example using HTML5 and CSS3 features to create a cabin booking application.

  

  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.

  

  Filtering the time axis

  This is an advanced example showing how you filter the time axis based on custom logic to show only week days, week ends etc.

  

  Drag drop from a grid (updated!)

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

  

  Saving state (new!)

  The scheduler supports saving start date, end date and view preset in the registered state provider.

  

  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.

  

  Speech recognition

  This example is a proof of concept of scheduling using voice recognition. You can schedule tasks easily using your own voice.

  

  Charting

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

• SERVER INTEGRATION EXAMPLES

  

  ASP.NET MVC

  This example integrates the scheduler with ASP.NET MVC (v2), using LINQ and Ext.data.JsonWriter.

  

  Ext Gantt + ASP.NET Web Forms

  Sample implementation combining Ext Gantt with classic ASP.NET, using LINQ and Ext.data.JsonWriter.

  

  Ext Scheduler + VB.NET

  Sample implementation combining Ext Scheduler with classic VB.NET, using LINQ and Ext.data.JsonWriter.

Ext Scheduler: Mashups with remote data sources

• 

  This example loads data from public Google Calendars.

• 

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

• 

  This is a simple example that connects to the Yahoo Upcoming event service.

• 

  This example shows a timeline of all the Ext JS user groups registered with meetup.com.

• 

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

• 

  This example visualizes the program schedule for different online radio stations.