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.
Table of Contents
Introducing Ext Scheduler
Before we start, let’s see what the Ext Scheduler looks like in action.
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.
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
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:
What's your reaction?
0
0
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.
This Websense category is filtered: Uncategorized.
Mind-blowing!
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
@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.
Cheers
Mats
@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.
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).
Looks like you guys updated the time on the post but the two week old comments kind of mess that up.
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.
That’s false advertising. I’m a subscriber so I knew to look for the date when I saw it at the top of my feed reader. No problem though.
Here’s a helpful tip for the use of strings as configurations like “MINUTE”, “hourAndDay”, etc…
Make them properties like constants:
Sch.SchedulerPanel.viewPreset.HOUR_AND_DAY,
Sch.SchedulerPanel.timeResolution.MINUTE, etc…
nice component
compatible EXT 4 ?
@med Will be very soon, sign up to our newsletter to be kept in the loop :)
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!!!
Trying to run the gant themes demo and Avast says it blocks a trojan.
@john bug in Avast, just update your definition files. More info: http://www.bryntum.com/forum/viewtopic.php?f=3&t=546&p=3320&hilit=Avast#p3320
great component! It’s so simple. How about compatible EXT 4 ?
@mindwork Scroll up about 40px to my previous comment :)
That’s going to make things a lot esaeir from here on out.
Is it compatible with latest version of Extjs 6.5.3? Will it continuously provide support to the latest version?
Yes, compatible with every Ext JS version since v2.0 in 2011 :) And we’ll continue to support all future Ext JS versions too!