Ext.ux.TouchCalendar is an extension, and set of related plugins, for the Sencha Touch 1.x framework that allows easy integration of a calendar component into applications.
Work has begun on upgrading the extension for use with Sencha Touch 2 and its progress can be found in the ST2 branch. We hope to have it complete in time for the final release of Sencha Touch 2 so please check back soon!
Ext.ux.TouchCalendarSimpleEvents Demo
Ext.ux.TouchCalendarEvents Demo
Calendar with Linked List Demo
The main extension is contained in the root folder of the repository and can be included in your project (along with its CSS file located within the resources/css folder) and will give you a basic calendar view (either showing a month, week or day) that can be configured with various options.
This extension wraps the Ext.ux.TouchCalendarView in a Ext.Carousel component and allows the calendar to respond to swipe gestures to switch the displayed period. It works by creating 3 Ext.ux.TouchCalendarViews and dynamically creating/removing views as the user moves back/forward through time.
This plugin can be added to an Ext.ux.TouchCalendar instance to allow a store to be bound to the calendar so events can be shown in a similar style to the iPhone does with a dot added to each day to represent the presence of an event.
Ext.ux.TouchCalendarSimpleEvents Demo
This plugin also allows a store to be bound to the Ext.ux.TouchCalendar and will display the store's events as bars spanning its relevant days.
Ext.ux.TouchCalendarEvents Demo
Include the extension's JS file and related CSS file in your HTML page.
<link rel="stylesheet" type="text/css" href="resources/css/Ext.ux.TouchCalendarView.css" media="all"/>
<script src="Ext.ux.TouchCalendarView.js" type="text/javascript" language="JavaScript"></script>
In your onReady function instantiate an Ext.ux.TouchCalendarView instance passing in any configuration options you want it to have.
Ext.setup({
onReady: function(){
var calendarView = new Ext.ux.TouchCalendarView({
mode: 'month',
value: new Date()
});
var panel = new Ext.Panel({
fullscreen: true,
layout: 'fit',
items: [calendarView]
});
}
});
This extension requires its own source JS to be included as well as the Ext.ux.TouchCalendarView's code.
<script src="Ext.ux.TouchCalendar.js" type="text/javascript" language="JavaScript"></script>
In your onReady function instantiate an Ext.ux.TouchCalendar instance passing in any configuration options you want it to have. You can specify a viewConfig option which will be used to configure the underlying Ext.ux.TouchCalendarView instances and accepts any options that that component can.
Ext.setup({
onReady: function(){
var calendar = new Ext.ux.TouchCalendar({
fullscreen: true,
viewConfig: {
mode: 'month',
weekStart: 1,
value: new Date()
}
});
}
});
This plugin requires its own source JS and CSS to be included (within the Ext.ux.TouchCalendarSimpleEvents folder) as well as the main extension's code.
<script src="Ext.ux.TouchCalendarSimpleEvents.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="resources/css/Ext.ux.TouchCalendarSimpleEvents.css" media="all"/>
The next step is to create an Ext.data.Store with event data that we can bind to the calendar.
Ext.regModel('Event', {
fields: [{
name: 'event',
type: 'string'
}, {
name: 'location',
type: 'string'
}, {
name: 'start',
type: 'date',
dateFormat: 'c'
}, {
name: 'end',
type: 'date',
dateFormat: 'c'
}]
});
var eventStore = new Ext.data.Store({
model: 'Event',
data: [{
event: 'Sencha Con',
location: 'Austin, Texas',
start: new Date(2011, 9, 23),
end: new Date(2011, 9, 26)
}]
});
We can now instantiate the Ext.ux.TouchCalendarSimpleEvents plugin within the main calendar's plugins configuration. We
also pass a store config option to the Ext.ux.TouchCalendar.
var calendar = new Ext.ux.TouchCalendarView({
value: new Date(),
store: eventStore,
plugins: [new Ext.ux.TouchCalendarSimpleEvents()]
});
Once again the plugins files must be included in your HTML file and a store created as we have done in the instructions above.
We can then instantiate the Ext.ux.TouchCalendarEvents plugin and supply it with a simple Ext.XTemplate which will be
used to render the contents of each Event's bar.
var calendar = new Ext.ux.TouchCalendarView({
value: new Date(),
store: eventStore,
plugins: [new Ext.ux.TouchCalendarEvents({
eventBarTpl: new Ext.XTemplate('{event} - {location}')
})]
});
The Ext.ux.TouchCalendar can be easily localised to display month and day names in any language.
Unfortunately there are no locale files included with ST1 but we can borrow them from the Ext JS 3 package (available here http://www.sencha.com/products/extjs3/download/ext-js-3.4.0/). If you download this package and navigate to the src/locale folder you should file numerous translations.
If you open up the locale file you want you should see the Date translations near the top. If you copy and paste these into your application (or include them in any current locale file you have) before your application launches you should see the Ext.ux.TouchCalendar display in your chosen language.
The overrides you will require look something like the code below:
Date.shortMonthNames = [
"Janv",
"Févr",
"Mars",
"Avr",
"Mai",
"Juin",
"Juil",
"Août",
"Sept",
"Oct",
"Nov",
"Déc"
];
Date.getShortMonthName = function(month) {
return Date.shortMonthNames[month];
};
Date.monthNames = [
"Janvier",
"Février",
"Mars",
"Avril",
"Mai",
"Juin",
"Juillet",
"Août",
"Septembre",
"Octobre",
"Novembre",
"Décembre"
];
Date.monthNumbers = {
"Janvier" : 0,
"Février" : 1,
"Mars" : 2,
"Avril" : 3,
"Mai" : 4,
"Juin" : 5,
"Juillet" : 6,
"Août" : 7,
"Septembre" : 8,
"Octobre" : 9,
"Novembre" : 10,
"Décembre" : 11
};
Date.getMonthNumber = function(name) {
return Date.monthNumbers[Ext.util.Format.capitalize(name)];
};
Date.dayNames = [
"Dimanche",
"Lundi",
"Mardi",
"Mercredi",
"Jeudi",
"Vendredi",
"Samedi"
];
Date.getShortDayName = function(day) {
return Date.dayNames[day].substring(0, 3);
};
Date.parseCodes.S.s = "(?:er)";
Ext.override(Date, {
getSuffix : function() {
return (this.getDate() == 1) ? "er" : "";
}
});
There are a few known issues that will be ironed out after the first release, namely:
- When using the Ext.ux.TouchCalendar the setValue logic isn't complete for dealing with selections across the 3 views.
- The Ext.ux.TouchCalendarEvents/Ext.ux.TouchCalendarSimpleEvents plugins aren't compatible with the Day mode.
I'd like to thank @megous for his sencha-touch-ux-datepicker extension which this extension originally grew from.