A Peek Under the Hood at Ext Scheduler

Developing an interactive and flexible resource scheduler in Ext JS is a bit of a challenge since there is a lot of complexity hidden in this type of widget. Depending on the context in which it’s used, different requirements emerge. A decent scheduling tool should be able to show different time scales, allow for varying time resolution granularity, and visualize resource availability, just to mention a few. In a way, you could actually consider it to be more of a mini-application on its own rather than just a simple widget. Let’s take a peek under the hood of the Ext Scheduler.

Introducing Ext Scheduler

Before we start, let’s see what the Ext Scheduler looks like in action.

Ext Scheduler, built with Ext JS

As you can probably guess by looking at the screenshot, the scheduler is based on the popular GridPanel. All in all, the scheduler package consists of over 30 classes, but you mainly interact with the top level class, the SchedulerPanel. Since it inherits from GridPanel, you will find the setup and configuration very familiar, and you can use most of the GridPanel goodies such as cell editing, column resizing and so on. Although the grid only uses one data store for its rows, the scheduler uses two: a resourceStore (rows) and an eventStore (horizontal bars). These stores need to be configured in a certain way for the scheduler to work. The simple class diagram below shows some typical properties for these stores.

Ext Scheduler, built with Ext JS

In the resourceStore, you need to have a field named ID and in the eventStore, you need to have a field for “ResourceId” “StartDate” and “EndDate”. Each event in the eventStore belongs to a single resource through the ResourceId property. You can, of course, add any other metadata to your resource and event record definitions (as seen in the sample above).

Configuring the Time Scale

Getting data into the chart is essential but choosing a time granularity that makes sense is equally important. If you want to schedule meeting rooms, you will need a granularity of hours but if you run a vacation cabin rental business you probably want the schedule columns to show days or weeks. When configuring the scheduler, you control the column granularity by choosing the proper viewPreset. A view preset is a custom config object containing all the configurable properties relating to the schedule. Below, you can see an example of such a view preset:

hourAndDay : {
    timeColumnWidth : 40,      // Time column width, when locked columns are used
    displayDateFormat : 'G:i', // Controls how dates will be displayed in tooltips etc
    timeResolution : {         // Dates will be snapped to this resolution
        unit : "MINUTE",        
        increment : 15
    headerConfig : { // Definition of the header. You can define top, middle and bottom.
        middle : {     // "middle" object is mandatory        
            unit : "HOUR",
            dateFormat : 'G:i'
        top : {
            unit : "DAY",
            dateFormat : 'D d/m'

The scheduler comes with several predefined view presets that you can use:

  • “hourAndDay”
  • “dayAndWeek”
  • “weekAndDay”
  • “weekAndMonth”
  • “monthAndYear”
  • “year”

If none of these suits your needs, you can easily create your own view presets too.

A Simple Implementation

We now know how to feed data into the component, and how to define a useful viewPreset. All that’s left to do is to include some grid columns and a start and end date for the schedule:

// Set up the data stores used by the scheduler
var resourceStore = new Ext.data.JsonStore({
    // config options
var eventStore = new Ext.data.JsonStore({
    // config options
var scheduler = new Sch.SchedulerPanel({
    loadMask : true,
    columns : [
        {header : 'Staff', width:130, dataIndex : 'Name'}
    renderTo : Ext.getBody(),
    // A field name in the eventStore that will be rendered inside each event bar
    eventBarTextField : 'Name',         
    // Schedule configuration, show one work day 8-5 PM
    startDate : new Date(2011, 4, 1, 8),
    endDate : new Date(2011, 4, 1, 17),
    viewPreset: 'hourAndDay',
    resourceStore : resourceStore,
    eventStore : eventStore,
    listeners : {
        eventclick : function {
            console.log("You clicked a task, awesome!");

Styling and Customizing the Event Bars

If you want to show more information than just simple text inside your rendered bars, you can easily do so by defining your own eventTemplate and eventRenderer. The eventTemplate is a standard Ext.Template that is used to render the content markup of each bar. The eventRenderer is a method which supplies the data to be applied to the event template (much like a standard grid column renderer function). Below you can see an example of how the custom template and renderer affects the look of the scheduled bars.

var scheduler = new Sch.SchedulerPanel({
    eventBodyTemplate: new Ext.Template(
        '<div class="sch-event-header">{headerText}</div>' +
        '<div class="sch-event-footer">{footerText}</div>'
    eventRenderer: function (eventRecord, resourceRecord, tplData, row, col) {
        // You can apply inline styles (through 'style' property),
        // or set a CSS class on the bar element by using the 'cls' property
        tplData.style = 'background-color:' + resourceRecord.get('Color');
        return {
            headerText : eventRecord.get('StartDate').format("G:i"),
            footerText: eventRecord.get('Title')

Interacting with the Scheduler

Ext Scheduler, built with Ext JS Once you have your scheduler up and running, the fun begins. You can now drag and drop the task bars between rows, resize them and create new ones. As you are doing this, you can also validate the changes as they happen by overriding different validator functions. By using these validator functions, you can ensure that your developer Bob, for example, isn’t assigned a 22 hour non-stop task on Christmas Eve.

But What About…

This article is just a simple introduction to some of the features of the Ext Scheduler. There are lots more to explore if you visit the example section (link below). There, you can also check out Ext Gantt, which is an Ext JS Gantt chart component. If you are interested in keeping track of what is going on with these components, you can follow me on Twitter: @bryntum.

Additional Resources:

Written by

Mats Bryntse is the founder of Bryntum and has been part of the Sencha community since 2007. Over the years, he has created lots of Ext JS user extensions including Ext Scheduler and Ext Gantt — JavaScript-based scheduling components. In his spare time, Mats enjoys skiing and cursing over IE issues. You can follow Mats and Bryntum on Twitter @bryntum.


  1. Joeri Sebrechts says

    This is a really nice component. Writing code on top of it was fun and easy. I wish my feature priorities were different so I could go back and build some more functionality with it.

  2. Manjush B says

    Its not a good tool to work with when goes for back end……….we used in our project …..and it really created problem…coz it fetches all datas ……really looking to see the events in date picker of this calendar actually what i am trying to do is when a particular date is clicked on date picker then on datas on that dates should be viewed in calendar on that particular date column..if someone can help then it will be greatful

  3. says

    @Manjush, Did you post in our forums to ask for help? I don’t recall seeing any threads about this but please let us know what problems you’re having and we’d be happy to help. Forums are located at http://bryntum.com/forum.



  4. Dhugal says

    @Manjush B

    Sorry but I don’t agree. I used this in a large project and it worked wonderfully. You can easily page the data if required, just like in any grid and you can also filter the events retrieved.

    I am not sure exactly what it is that you are asking for but in our implementation we added a date picker in the toolbar to allow the user to easily jump to a given date. Perhaps you can elaborate slightly, or post on the forums.

    For anyone else considering this component all I can say is that it was the only web based scheduling tool I could find with anywhere near this level of functionality. Using it was a real pleasure and, when I did have questions/issues, I got assistance quickly via the relevant forum.

    Highly recommended.

  5. says

    We have been using Ext Scheduler and Ext Gantt ever since the first release, and I must say it’s very comprehensive, extendable, and reliable. We used it in a highly sensitive apps where we tend not to even use community extensions, but the core Ext JS. What Mats has done is truly superb. It’s really a treat too, couldn’t believe it’s that cheap for such performance.

    Just check out the examples, you’ll see the vast number of applications of these components (and Ext JS).

  6. says

    This article was originally published two weeks ago for the benefit of our newsletter subscribers! We change the date to bring it to the top of the blog when we share it with everyone.

  7. says

    Here’s a helpful tip for the use of strings as configurations like “MINUTE”, “hourAndDay”, etc…

    Make them properties like constants:
    Sch.SchedulerPanel.timeResolution.MINUTE, etc…

  8. says

    This is one of the most beautiful ExtJS applications I know of. Both how it’s setup and how it looks and feels is amazing. I really have respect for people who are able to think out of the box and create such creative solutions that actually solve problems. Of course this could only be done with the wonderful ExtJS framework.

    Good work Mats!!!

Leave a Reply

Your email address will not be published. Required fields are marked *