Validation
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).
Column Positioning
This example shows you how you can position your “static” columns in your schedule.
Grouping View
This is a demo showing how you can group the resources, using 2 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.
Ext Scheduler Customization
Localization
This example shows you how easy it is to localize date formats and texts used in the Scheduler.
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
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).
Drag Selector Plugin
Plugin allowing you to select multiple events at once by clicking and dragging.
Simple Editor Plugin
This is a simple example showing how you can edit the event title using a plugin.
Ext Scheduler Advanced Examples
HTML & 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
Drag drop from an external grid onto the scheduler. Also includes a basic way of handling resource availability.
Saving State
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.
Server Integration Examples
ASP.NET MVC
This example integrates the scheduler with ASP.NET MVC (v2) using LINQ and Ext.data.JsonWriter.
Java/Spring/Hibernate
This example integrates the scheduler with a Java backend using Spring and Hibernate.
Ext Scheduler + VB.NET
Sample implementation combining Ext Scheduler with classic VB.NET, using LINQ and Ext.data.JsonWriter.
Mashups with Remote Data Sources
Sencha Meetup User Groups
This example shows a timeline of all the Ext JS user groups registered with meetup.com.
Google Spreadsheet
This example visualizes a simple schedule stored in an online Google Spreadsheet.
Online Radio Stations
This example visualizes the program schedule for different online radio stations.