user experience matters

Examples



For Gxt Scheduler examples, click here!

Ext Scheduler: Mashups with remote data sources

Google Calendar

This example loads data from public Google Calendars.

Yahoo Upcoming

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

eBay

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

RadioTime

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

Ext JS Meetup Groups

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

Ext Scheduler: Advanced examples

Desktop example

This is an example showing the scheduler used in the Ext JS Desktop example.

Speech recognition

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

Chart example with basic rules

This is an example showing machine utilization levels in an external chart. The example also shows you how easy it is to add some basic restrictions to the scheduler.

Drawing a pie-chart with Raphaël

This example makes use of the drawing capabilities of the Raphaël library, using the scheduled data as input.

Grouping - Advanced example

This is a feature packed demo showcasing grouping and drag-selection. Additionally, you can also choose between 3 different row height options.

Editing event data

You can associate any meta data you want with a scheduled event. This example shows you one way of editing the meta data associated with the events in the scheduler (double click to show the editor).

Multiple rows per resource

Here's an example showing how you can show multiple "rows" for a single resource. It is all done using CSS, and it's very simple to do.

Column configuration options

This example shows you a variety of different column options. Each column can represent hours, days, weeks, months or years. If you need a custom configuration, that is very easy to create too.

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.

Drag drop from a grid

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

Lines and zones

Plugin demonstration for the Zones and Lines plugins. You can add custom zones and lines to indicate special events or time spans such as vacation time or milestones.

Locking and grouping view

This example shows a view that is both using grouping and the locking feature.

ASP.NET MVC

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

Experimental: Client side Export to Excel

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

Scrolling programmatically (new!)

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

Timegap plugin (new!)

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

Ext Gantt Examples

Basic Gantt Chart

This example is a very basic implmentation of the Ext Gantt.

Advanced Gantt Chart

This example shows a more advanced implementation of the Ext Gantt, you can setup inter-task dependencies easily by using drag and drop.

Paging Gantt Chart

This example is a simple demonstration of how you can use paging to work with large datasets.