Mats Bryntse
7 January 2013

Touch Scheduler 1.0

Announcing Touch Scheduler 1.0 We are very happy to announce the 1.0 version of our new Touch Scheduler. The first […]

touch_scheduler_v3

Announcing Touch Scheduler 1.0

We are very happy to announce the 1.0 version of our new Touch Scheduler. The first release is based on Sencha Touch 2.1 and comes with several implementation samples and a Siesta test suite. The component is currently compatible with the same mobile browsers supported by Sencha Touch and we have tested it on iPad 1/2/3, Nexus 7, iPhone 4, BlackBerry PlayBook and Samsung Galaxy Tab. As soon as Windows Phone 8 support lands in Sencha Touch, we’ll support it as well.

Under the hood, the scheduler is built on top of a new grid panel implemented for Sencha Touch (codename UberGrid) which will be featured in an upcoming blog post soon. It supports any number of individually locked and scrollable sections, as well as sorting and buffering. Keep an eye out on our blog or Twitter account for more information of its release date.

Features

The Touch Scheduler user interaction is a bit different from the desktop version. Since there is no mouse or scroll-wheel, the UI must be driven by simple touch interactions such as tap, tap-hold, pinch and swipe. We have ported most of the core scheduling functionality over to the touch version and we think you will find quite a bit of interesting features:

It is also very easy to extend the component to add new functionality. There is a rich API allowing you to control the component programmatically (much of it is shared with the Ext Scheduler). With the event driven architecture, you can easily be notified of various events happening in the schedule – ‘eventtap’, ‘timeheadertap’, ‘schedulelongpress’ etc. Additionally, since the component is built upon Sencha Touch you can make full use of its toolbars, form components and charts to build custom editors or other visualizations of the store data.

Implementation details

If you’re already familiar with the Ext Scheduler, implementing the Touch version will be very simple. Essentially, you only have to load two data stores and plug those into the component at instantiation time. Below is a simple script which renders a basic scheduler:
[crayon striped=”false” lang=”javascript” nums=”false” toolbar=”false”]
Ext.setup({

onReady : function () {
var resourceStore = new Sch.data.ResourceStore({
data : [
{ Id : 1, Name : ‘Mike’ }
]
})

var eventStore = new Sch.data.EventStore({
data : [
{
Id : 1,
ResourceId : 1,
Name : ‘Some task’,
StartDate : ‘2013-01-01’,
EndDate : ‘2013-01-03’
}
]
});

var scheduler = new Sch.panel.SchedulerGrid({
viewPreset : ‘hourAndDay’,
startDate : new Date(2013, 0, 1),
endDate : new Date(2013, 0, 3),

rowHeight : 65,
barMargin : 3,
resourceStore : resourceStore,
eventStore : eventStore,

eventRenderer : function (event) {
return event.getName();
},

columns : [
{
header : ‘Name’,
dataIndex : ‘Name’,
width : 200
}
]
});

Ext.Viewport.add(scheduler);
}
});
[/crayon]

If you are new to our components or Sencha Touch, don’t worry – here are some good resources to get you started:
[list]

  • Live examples (view the source too)
  • API docs
  • Getting started guide
  • “Learn Sencha Touch” at sencha.com
  • Additional Sencha Touch resources
  • [/list]

    Ready to try it out?

    You can download a trial version or check out some of the live examples on our new site. To try the live samples, you need to use a WebKit-based browser such as Chrome or Safari for now. We have also updated our forum with a new section for the Touch Scheduler. If you have any feedback, please leave a comment or join our community forums and let us know.

    Mats Bryntse

    Product updates