Ext.ux.TouchCalendar – A Sencha Touch Calendar component

20 Nov
2011

Overview

Ext.ux.TouchCalendar is an extension and series of related plugins that allow a calendar component to be integrated into Sencha Touch 1 and 2 applications.

Links to the repository, documentation and demos (along with some inline demos) can be found further down this post.

Sencha Touch 2 Support!

Finally the Ext.ux.TouchCalendar has been upgraded to be compatible with Sencha Touch 2 and we’re now looking for you guys to give it a try and give us your feedback. This is a first release, which has been long overdue, so there might be a few bugs lurking around so we’d appreciate you taking the time to report them on the GitHub repository.

Download

The extension can be downloaded from our GitHub repository – https://github.com/SwarmOnline/Ext.ux.TouchCalendar

For Sencha Touch 1 version see the ‘master’ branch of the repository – https://github.com/SwarmOnline/Ext.ux.TouchCalendar/tree/ST1

Features

Ext.ux.TouchCalendar/Ext.ux.TouchCalendarView

Month, Week and Day views
Gesture support to change current period
Time slot (day or time interval) selection

Ext.ux.TouchCalendarEvents

Bind a data store to the calendar to display Event Bars
Drag and Drop event moving

Ext.ux.TouchCalendarSimpleEvents

Bind a data store to the calendar to display ‘dots’ on days with events

Documentation

Please go to http://www.swarmonline.com/Ext.ux.TouchCalendar/docs for full documentation of this extension and its plugins. You will find it under the ‘ux’ namspace folder.

A big thanks to the Rene Saarsoo (@nene) and the other guys at Sencha for their work on JSDuck!

Demos

You can try out the extension live inside the following iPhone graphics or you can view the various other demos using the links below. All of these demos can be found in the ‘examples’ directory of the project.

Ext.ux.TouchCalendarView

Ext.ux.TouchCalendar

Ext.ux.TouchCalendarEvents

You are currently not using a WebKit browser. Please reopen this page in Google Chrome or Safari to get the full experience.

Issues or Suggestions?

As this is a first release we anticipate a few issues cropping up so please open an Issue on the GitHub repository and we’ll get onto it as soon as possible!

Matt G - Reply
December 12, 2011 at 6:31 pm
Nice extension! I’m just wondering what’s the licence on this? I see a copyright in the source code, but no mention of a licence.

Stuart - Reply
December 18, 2011 at 11:54 am
Hi Matt,
Sorry for the late reply! Thanks for your feedback. The extension is free to use in your projects but we ask that you leave the copyright and author details in place.
We’d love to see it in action so if you include it in your app then send us a link when it’s done!
Cheers
Stuart

Rob - Reply
January 4, 2012 at 7:06 am
Looks good! Is there an easy way to localize the calendar to display in different languages?
Michael - Reply
January 4, 2012 at 8:52 am
Hi, great component! I have a slight problem though: we have a rather simple calendar with events from a store (based on one of your examples). But whenever you tap an event bar in month view, the calendar switches to the previous month. It seems that the tap event bubbles up since the event wrapper is located in that top left cell of the table. But I can’t see why this happens in our case while it doesn’t in your example. Any hint what to look for?
BTW: we don’t need this in our project, but when I allow the events to be draggable, things start to get really weird. When you try to drop an event it will be placed in a completely different (non-neighbouring) cell. Repeating the same drop will lead to different results almost every time, sometimes the event will even land in a cell in a different month! Don’t know if these two problems are related.
Thanks for the great work!
Michael

Stuart - Reply
January 4, 2012 at 9:44 am
Hi Michael,
Thanks for the bug report! You were spot on with the problem so I have pushed a fix to the repository – if you grab the latest it should be fixed.
I will investigate the issues you found with the drag and drop and see if I can locate the problem.
Let me know if you have any further problems or questions.
Cheers
Stuart

Hector - Reply
January 4, 2012 at 3:48 pm
Hi. I’ve recently found the extension. Let me say that it is just awesome.
Im trying to add the calendar functionality to my new project, but i would also like to use it as an agenda. I was wondering if it is possible to add, edit and delete events using the calendar you’ve created.
If it is not, i assume it will be necessary to add these functionalities to it. Do you have any advice in order to do it the best wat possible?
Thanks in advance. Greetings.

Stuart - Reply
January 4, 2012 at 8:51 pm
Hi Hector,
If you include the Ext.ux.TouchCalendarEvents or Ext.ux.TouchCalendarSimpleEvents plugins you can bind a store to the calendar and it will display the events within your store on the calendar. You can then manipulate this store as you normally would (adding, editing and deleting items) and the calendar will reflect these changes.
Take a look at the “simple-events-list.html” and “Ext.ux.TouchCalendarEvents.html” examples in the examples folder. They will get you started with binding a store to the calendar.
Let me know how you get on and if you need any more help.
Thanks
Stuart

Michael - Reply
January 4, 2012 at 4:34 pm
Hi Stuart
Wow, that was fast! The fix works like a charm. Many thanks!
I have actually noticed another problem: I implemented a floating form panel that pops up when you click on a day so that you can add a new event. The form contains a slider element. If drag and drop is enabled for the calendar, the calendar will also receive a drop event after dragging and releasing the slider in the form. But that event will result in an error in the console (“Uncaught TypeError: Cannot call method ‘get’ of undefined” in line 257 of Ext.ux.TouchCalendarEvents.js). Maybe you could check if the object that was dragged actually “belongs” to the calendar?
-Michael

Stuart - Reply
January 4, 2012 at 9:20 pm
Hi Michael,
Thanks for taking the time to report these bugs. That is exactly what’s happening so I have added a check to ensure the dragged item belongs to the calendar. I have committed this fix to the repo so if you want to take the latest it should be working now!
Cheers
Stuart

Hector - Reply
January 4, 2012 at 11:51 pm
Stuart.
Thanks for your fast reply. It’s been really helpful.
However i still have a doubt about the forms which are used to alter the store you mentioned. It seems i would have to create them in order to edit the store. Unless im actually missing something in the docs or the code.
Thanks a lot.

Stuart - Reply
January 5, 2012 at 10:47 am
Hi Hector,
There are no forms for editing/creatng events bundled with the extension. At the moment it is designed to be as independent of your application’s specifics as possible, so you will need to build these forms yourself and combine them with the calendar.
Thanks
Stuart

Hector - Reply
January 5, 2012 at 3:49 pm
Thanks Stuart.
I was wondering if you could provide support to create these forms. We would need to arrange the fee that would be required in order to do this.
I think it would be better if we talk about this by email.
hriestra@gmail.com
Greetings
Michael - Reply
January 6, 2012 at 10:11 am
Hi Stuart
I found something else – this one was tough though… Whenever I switched my eventStore from inline data (as taken from your example) to my “real” store, nothing worked anymore, ie. no event bars, but lots of “Cannot call method ‘get’ of undefined” errors.
I eventually found out (hours later…) that there was a type problem with record IDs. My model had an id field like this:
{name: ‘id’, type: ‘integer’}
Therefore an event store record would have:
internalId: 1
In your Ext.ux.CalendarEventBarModel you have:
{name: ‘EventID’, type: ‘string’}
So for the same record you will get:
EventID: “1″
I think you can see where this is going, because in getEventRecord() you compare on type as well:
return rec.internalId === eventID;
After changing that to a simple equality comparison, everything worked fine for me.
I can see why you chose string for EventID, since generated IDs look something like “ext-record-9″. But the comparison on type still seems problematic as demonstrated in my case.
Cheers
Michael

Stuart - Reply
January 6, 2012 at 12:46 pm
Once again, thanks for taking the time to figure out and report these issues, it’s really appreciated.
Your solution is great but it does open a few more problems because of the internalIDs being added to the event bars as classes which can’t begin with numbers. I will work on a solution to combine these internalIDs with a prefix to avoid this. I’ll drop you an email when I’ve committed a fix.
Cheers
Stuart

Javier Roca - Reply
January 9, 2012 at 5:59 am
amazing plugin, there is a bug if you use sencha-touch-all.js do you know why?

Andy - Reply
January 30, 2012 at 1:50 pm
What error are you getting? Are you using Sencha Touch 1?

aNj - Reply
January 17, 2012 at 9:24 am
Hi!
This is a great extension and I would like to test it, but does it work with sencha touch 2? I tried it, but it fails on some places:
Ext.ux.TouchCalendar.js:
this.mon(this.body, {
drag: this.onDrag,
dragThreshold: 5,
dragend: this.onDragEnd,
direction: this.direction,
scope: this
});
mon is deprecated, and scope should be the second parameter, i think
var origCurrentDate = this.viewConfig.currentDate.clone(),
does not work -> what do you expect here? currentDate is the javascript Date object
Same on function getViewDate:
getViewDate: function(date, i){
var scale = (this.mode === ‘WEEK’ ? ‘DAY’ : this.mode.toUpperCase()),
number = (this.mode === ‘WEEK’ ? (8 * i) : i);
return date.add(Date[scale], number)
},
date.add -> is not a function
I would be great to get it work on ST2, i saw you have an other branch, but this also does not work, or am I making something wrong?
best regards

Stuart - Reply
January 17, 2012 at 9:58 am
Hi aNj,
Currently the extension only supports Sencha Touch 1. We’re starting to upgrade it to work with ST2 (as you have seen in the ST2 branch on GitHub) but this is still a work in progress. We hope to have it complete before the final release, so please check back then!
Thanks
Stuart

aNj - Reply
January 17, 2012 at 10:10 am
All right! Thanks stuart!
Arte - Reply
February 4, 2012 at 5:49 pm
hello, great plugin!
but we encounter two problems that we fail to fix “correctly”.
The first is when using the mode “WEEK”. Indeed, from the second swipe, the same week is displayed in a loop. This bug is reset after a mode change, so I deduced that the problem is located in “onCardSwitch” of TouchCalendar.js. It is possible to fix by editing:
this.insert (0, new Ext.ux.TouchCalendarView (this.getViewConfig (newCard.currentDate.add (Date [this.mode], -1))));
with “getViewDate ()” in “onCardSwitch: function ()”. But with this technique some weeks are not displayed randomly (and rarely enough: sometimes after 1 or 2 months), and we do not know why!
The second bug is less important. when the user quickly swipe a second time (before the first annimation is complete), new views are not generated. : x
Thanks in advance.
Arte.

Stuart - Reply
February 22, 2012 at 10:16 am
Hi Arte,
Thanks for the feedback and the bug reports. We’ll add them to the list and try and get them fixed asap.
Cheers
Stuart

Umesh - Reply
February 16, 2012 at 6:31 am
Hi Stuart,
Nice Calendar Plugin for sencha. I have implemented TouchCalendarEvents plugin in my code. I was trying to do a test check on how multiple events would be displayed for a date.
Observation was that if i have more events to be shown for a day in Week view and Monthly view, then the events overflow to the date on top in case of monthly view and on to month title in case week view.
Please suggest how such cases can be handle using TouchCalendarEvents.js
I do not intent to use TouchCalendarSimpleEvents.js as plugin
Regards,
Umesh.

Stuart - Reply
February 16, 2012 at 9:21 am
Hi Umesh,
Yes, this is a limitation of the calendar at present which means they will overflow the cell if there are too many on a single date. We will be adding a fix for this in the next release so it is handled more gracefully.
Thanks
Stuart

Umesh - Reply
February 16, 2012 at 11:54 am
Hi Stuart,
Thanks for the update . Looking forward for the next release, so please keep us posted.
Regards,
Umesh.
q210 - Reply
February 21, 2012 at 3:38 pm
Hello guys, your plugin is awesome!
There is a small problem through — if there no method “onSelectionChange” defined in Ext.ux.TouchCalendar instance, plugin throws an error (i think it’s due to codeline 75 in file Ext.ux.TouchCalendar-min-debug.js in current master branch HEAD — there is no onSelectionChange attribute in Ext.ux.TouchCalendar class definition)

Stuart - Reply
February 22, 2012 at 10:15 am
Hi
Thanks for the bug report, we’ll try to include fixes for these as soon as possible.
Cheers
Stuart

Bob - Reply
February 22, 2012 at 12:34 am
Hey Stuart
Any idea when a working version for ST2 will be available?
Thanks

Stuart - Reply
February 22, 2012 at 10:14 am
Hi Bob,
I’m afraid we don’t have any firm dates or timescales for the upgrade but there’s a lot of interest so it will get done sooner rather than later I think.
Cheers
Stuart

freeduck - Reply
February 22, 2012 at 9:33 am
Hi…
It is very useful plugin…
Thanks…
I have a question.
It is too slow load one year data from my external server.
How can I check event previous month or next month…
I want to make store this month and who push the button then load other month data..

Stuart - Reply
February 22, 2012 at 10:12 am
Hi
You can hook into the periodchange event (http://www.swarmonline.com/Ext.ux.TouchCalendar/docs/#!/api/Ext.ux.TouchCalendarView-event-periodchange) which fires when the calendar switches to the next period. To catch date taps you can use the selectionchange event (http://www.swarmonline.com/Ext.ux.TouchCalendar/docs/#!/api/Ext.ux.TouchCalendarView-event-selectionchange).
Cheers
Stuart

freeduck - Reply
February 22, 2012 at 10:09 am
and How can I catch event who click date?
Jonathan - Reply
March 2, 2012 at 10:36 pm
Hi Stuart,
I already saw your ST2 Branch but I see that you haven’t done any updates since 2 months ago, how could I contribute in the migration?. Is there a way to see the new code?
Thanks
Dipin Kumar - Reply
March 8, 2012 at 9:51 am
This is an excellent plugin for sencha, thank you for your efforts behind this. Is this plugin Touch2 ready? If no when will it be ready?
Sara - Reply
April 9, 2012 at 6:52 am
Hi Stuart,
Is Touch 2 version of Calender done or its still in progress.
thanks
-Sara
Karla :) - Reply
April 11, 2012 at 12:23 am
I’d love to see the ST2 optimized version. Any ETA for that?
hoanghuu - Reply
April 11, 2012 at 5:08 am
Hi Stuart,
Thanks for useful extension.
But i have a question for you.
How can i render the repeat events on calendar, because i have some events repeating by day, week or month.

Stuart - Reply
April 13, 2012 at 9:44 am
Hi
At the moment repeat events would have to be included by adding multiple event records to your store with separate Start/End Dates.
Stuart

Doug - Reply
April 13, 2012 at 3:36 am
Is there a working example of this component? I’ve been to the demo page: http://www.swarmonline.com/wp-content/uploads/Ext.ux.TouchCalendar/examples/Ext.ux.TouchCalendar.html
however, the calendar doesn’t present.
Safari, Chrome, PC, Mac, iPad/Safari – nuthin’ .

Stuart - Reply
April 13, 2012 at 9:38 am
Hi Doug,
You can view demos a couple of ways – the main blog post has demos embedded inside iPhone ‘wrappers’ (hard to distinguish between plain screenshots, I know!) under the Demos heading. Alternatively, you can see the demos fullscreen with the following links –
http://www.swarmonline.com/Ext.ux.TouchCalendar/examples/Ext.ux.TouchCalendar.html
http://www.swarmonline.com/Ext.ux.TouchCalendar/examples/Ext.ux.TouchCalendarView.html
http://www.swarmonline.com/Ext.ux.TouchCalendar/examples/Ext.ux.TouchCalendarEvents.html
I will add these to the page so they are easier found in the future!
Thanks
Stuart

hoanghuu - Reply
April 17, 2012 at 9:44 am
Hi,
I have done render repeat event but i found a small issue with your plugin.
When i changed view mode from day view to month view or week view, sometime the scroller not working properly.
Please review and fix it.
Steps to test:
Step1: Select view mode ‘Day View’
Step2: Scroll page to bottom.
Step3: Change view mode to ‘Month View’ or ‘Week View’. The calendar will happen issue.
Pingback: Starting with Sencha Touch 2.0 | Aspiring To Be Ordinary
Shahid - Reply
September 6, 2012 at 11:43 pm
Hi,
I have implemented this calendar in my app developed in sencha touch 2.0 and I face a problem.When I run my application source code in a web browser, Calendar works fine. But when I generate the production & package of the app the calendar not work and following issues occur.Moreover these issues also occur when app run in a device:
1): Cell not select in the month view of calendar.
2): Next and Previous not work in the month, week and day view of calendar.
3): This seems to me that on tap events cannot get bind
Example :
this.element.on({
tap: this.onTableHeaderTap,
scope: this,
delegate: ‘td’
});
this.element.on({
tap: this.onTimeSlotTap,
scope: this,
delegate: this.getItemSelector()
});
Please help me to get rid of this hurdle.
I shall be very thank full to you.
Shahid - Reply
September 7, 2012 at 1:01 pm
I have solved this problem:
1) add the EXT.ux.TouchCalendarView.js in your view folder
2) after that create its object in constructor
like this
my-calender = Ext.create(‘myapp.view.TouchCalendarView’,{ viewConfig : { mode : ‘month’, weekStart : 0, value : new Date() } });
Ext.apply(this.initialConfig, config); Ext.apply(this, config); myapp.view.CompanyCalender.superclass.constructor.apply(this, arguments); this.add(my-calender);
Marc - Reply
November 18, 2012 at 9:34 am
Hi, I’m new to Sencha Touch and using Architect 2. Do you have an example .xds project of how this extension slots into an architect project? Or some guidelines on how to include it?
Thanks

Stuart - Reply
December 5, 2012 at 11:42 pm
Hi Marc,
Unfortunately we have never tried to integrate it with Sencha Architect but it should follow the same pattern as other plugins. I’m afraid we don’t have any examples to share as we haven’t done this ourselves! Sorry we can’t be of more help!
Cheers
Stuart

nilabh - Reply
December 27, 2012 at 1:38 pm
Hi, great component. How can i integrate my store to show dots using simple events?

Stuart - Reply
December 28, 2012 at 4:43 am
Hi
If you create your store and attach it to your Calendar using the ‘store’ config. You can then define the SimpleEvents plugin in the ‘plugins’ array. Check out the sample code on the GitHub repo – https://github.com/SwarmOnline/Ext.ux.TouchCalendar#extuxtouchcalendarsimpleevents-1
Cheers
Stuart

allenlako - Reply
December 29, 2012 at 3:04 am
Do you have any examples using the linked eventlist calendar with the simpleevents plugin in a MVC setup? I tried implementing your calendar in my MVC ST2 app, but was unable to get the simpleevents to work properly. I continue to get Object EventStore has no method ‘clearFilter’ when I try to enable the simpleevents. The EventStore specified in the error is the same store that populates the eventlist below the calendar. I was able to get the eventlist to work and show the events from the store when I click on a date. Just can’t see the dots and with the simpleevents. Here is my config of the calendar inside my calendar view of the MVC app I am building. I have also tried specifiying the simpleevents in the plugins array with no success either.
Ext.define(‘trackr.view.Calendar’, {
extend: ‘Ext.TabPanel’,
requires: [
'Ext.ux.TouchCalendar',
'Ext.ux.TouchCalendarView',
'Ext.ux.TouchCalendarSimpleEvents',
'Ext.SegmentedButton',
'Ext.dataview.List',
'Ext.util.Format',
'Ext.data.Store'
],
config: {
tabBarPosition: ‘bottom’,
items: [
{
title: 'Home',
iconCls: 'home',
html: [
'Add Welcome Here'
].join(“”)
},
{
title: ‘Calendar’,
iconCls: ‘calendar’,
xtype: ‘panel’,
id: ‘calendarPanel’,
displayField: ‘title’,
fullscreen: true,
layout: ‘fit’,
items: [new Ext.ux.TouchCalendar({
id: 'cald',
xtype:'calendar',
enableSimpleEvents: true,
viewConfig:{
mode: 'month',
weekStart: 0,
value: new Date(),
eventStore: 'EventStore'
},
listeners:{selectionchange: function(calendarview, newDate, prevDate){
var eventList = Ext.getCmp('calendarPanel').getDockedItems()[1];
Ext.getStore(‘EventStore’).clearFilter();
Ext.getStore(‘EventStore’).filterBy(function(record){
var startDate = Ext.Date.clearTime(record.get(‘start’), true).getTime();
var endDate = Ext.Date.clearTime(record.get(‘end’), true).getTime();
return (startDate = newDate);
}, this);
Ext.getStore(‘EventList’).setData(Ext.getStore(‘EventStore’).getRange());
},periodchange: function(calendarview,minDate,maxDate,direction){
alert(‘hello’);
var eventList = Ext.getCmp(‘calendarPanel’).getDockedItems()[1];
Ext.getStore(‘EventStore’).getProxy().setExtraParams({
mindt: Ext.Date.Format(minDate,’Y-m-d’),
maxdt: Ext.Date.Format(maxDate,’Y-m-d’)
});
eventList.getStore().load();
},painted: function(cal){
//Ext.getStore(‘EventStore’).setProxy({type: ‘ajax’,url: localStorage.getItem(‘server’) + ‘/app_data.php?store=events’, reader: {type: ‘json’,rootProperty: ‘data’}});
//Ext.getStore(‘EventStore’).load();
//Ext.getStore(‘EventStore’).on(‘load’,function(){
//Ext.getCmp(‘cald’).getInnerItems()[0].eventStore = Ext.getStore(‘EventStore’);
//Ext.getCmp(‘cald’).getInnerItems()[0].setPlugins(new Ext.ux.TouchCalendarSimpleEvents());
//Ext.getCmp(‘cald’).enableSimpleEvents = true;
//Ext.getCmp(‘simpleEvents’).addEvents(Ext.getStore(‘EventStore’));
//Ext.getCmp(‘cald’).simpleEventsPlugin.init();
Ext.getCmp(‘cald’).setValue(new Date());
Ext.getCmp(‘cald’).fireEvent(‘selectionchange’,this,new Date(),new Date());
//Ext.getCmp(‘cald’).getInnerItems()[0].refresh();
//});
}}
}),{
xtype: ‘toolbar’,
docked: ‘top’,
items: [{
xtype: 'segmentedbutton',
allowMultiple: false,
items: [{
text: 'Month',
pressed: true,
handler: function(){
var eventList = Ext.getCmp('cald').getInnerItems()[0];
eventList.setViewMode(‘month’);
}
}, {
text: ‘Week’,
handler: function(){
var eventList = Ext.getCmp(‘cald’).getInnerItems()[0];
eventList.setViewMode(‘week’);
}
}]
}]
},{
docked: ‘bottom’,
xtype: ‘list’,
height: 110,
itemTpl: ‘{event} – {location}’,
store: ‘EventStore’
}]
}
]
}
});

Stuart - Reply
February 1, 2013 at 3:47 am
Hi
I have just added a new MVC example to the repo (the Sencha Touch 2 version is now under MASTER branch) which should show you how to go about integrating it.
Thanks
Stuart

nilabh - Reply
January 1, 2013 at 8:42 pm
Hi,
Thanks for the example code but the problem is that the model i’m using is different from the model used in the example. Is it possible to have different model and integrate with simpleEvents.
Aruna - Reply
January 7, 2013 at 10:28 am
Hi,
This component is awesome. We are planning to use this in our project. We might have to tweak the component to add few more controls in the Calendar Cell. I am not sure if this is permitted. Please confirm.
Thanks
Aruna

Stuart - Reply
January 7, 2013 at 11:41 am
Hi Aruna,
The component is free to use as you wish so feel free to fork it on GitHub and tweak it to suit your project – though we always appreciate a link back somewhere! If you add any cool features make sure to submit a pull request and I’ll merge them into the main project for others to enjoy!
Cheers
Stuart

Kaz - Reply
January 24, 2013 at 8:45 pm
Had this working great with ST 2.0. Thanks. Doesn’t work at all in 2.1. Any plans to upgrade it?

Stuart - Reply
January 29, 2013 at 5:03 am
Hi Kaz,
There is a branch named ‘DayViewEvents’ in GitHub which supports ST2.1 and includes some new functionality, refactoring etc. This is due to be merged to the main branch but hasn’t happened just yet. Make sure you backup your project just in case anything goes awry but it is pretty stable as it is.
Cheers
Stuart

Mihail - Reply
January 31, 2013 at 1:41 pm
Hello, Stuart,
It is a lovely calendar that you’ve created for Sencha Touch 2.1 mobile framework.
I’ve seen your examples and all I found they are all non-MVC, is it possible that your calendar is converted to a MVC style?
I’ve been trying to do this for two days and have no success. I’d like to know if I would have to give up, because I start to think it is not possible in this situation.
I am looking forward to hearings from you!
Best Regards

Stuart - Reply
February 1, 2013 at 3:33 am
Hi Mihail,
Thanks for the comment! I have just finished tidying up the branches and updating it with some more examples. So if you look at the GitHub repo (the MASTER branch, not the ST2 branch anymore…) you should see an “mvc” folder in the examples folder. This has a simple example of how to integrate it into the MVC pattern. There is also a Readme in that folder that should guide you through the main points.
Hope that helps!
Stuart

Mihail - Reply
February 1, 2013 at 7:19 am
Hello Stuart,
I am sure that having the MVC example for Sencha Touch 2 will make you TouchCalendar even more popular.
I am downloading it in the moment and I am impatient to check it out.
Regards!
Mihail - Reply
February 2, 2013 at 4:04 pm
Hello Stuart,
I have an issue with the TouchCalendar for Sencha Touch 2. When I try to add a TitleBar in the TouchCalendar it disapears on month change.
https://github.com/mvelikov/Ext.ux.TouchCalendar I’ve forked your project and I added such titlebar in the MVC example.
Is this something I do wrong? Is it a bug?
Best Regards!

Stuart - Reply
February 3, 2013 at 2:46 am
Hi
I wouldn’t recommend editing the extension’s source code as you have done as this will make upgrading it when changes are made a much more difficult task.
I would suggest you add another Panel or Container that will house the calendar and the TitleBar. If you take a look at the other examples they do a similar thing to show a toolbar at the top with the buttons to switch views.
Hope that helps!
Stuart

a brief - Reply
February 4, 2013 at 11:33 pm
Hi stuart,
Do you have another examples use for this great touchcalendar component ?
to show me how to use drag and drop event? colouring the days cell etc ?
Regards
Brief

Stuart - Reply
February 5, 2013 at 5:54 am
Hi
Unfortunately the drag and drop of events isn’t functional in the Sencha Touch 2 version of the component – we’re hoping to work on this very soon.
You can colour the event bars by including a ‘css’ field in your Event model which will contain the name of a CSS Class to be added to the event bar. If you grab the latest from the repo and look at the Ext.ux.TouchCalendarEvents.html example you should see this in action.
Cheers
Stuart

a brief - Reply
February 6, 2013 at 1:35 am
thank you for your reply … one more thing can I add another colour to only in holiday cells ? like every sunday will have red colour
a brief - Reply
February 6, 2013 at 2:32 am
and may be set a holiday for other days.

Stuart - Reply
February 6, 2013 at 3:52 am
At the moment there is no way to add additional CSS classes to specific days (apart from weekends where you can hook into the “weekend” class which is already added). I will add this feature to the todo list!
Stuart

Rachel - Reply
February 21, 2013 at 2:33 pm
Hello Stuart,
Thanks for the component.
But I have a problem with the simple event plugin.
It becomes duplicated dots in month view when I resize the window or
reorientate my phone.
It seems failed to remove the existing markup when refresh events.
Best Regards

Stuart - Reply
February 22, 2013 at 1:33 am
Hi Rachel,
Thanks for your bug report – I have committed a fix to the master branch of the GitHub repo.
Cheers
Stuart

Rachel - Reply
February 22, 2013 at 4:03 am
Thanks for your fast reply.
Waiting for the new branch
Best Regards

raj - Reply
March 11, 2013 at 12:24 pm
does it works with adding touchcalender,touchcalendarview,css and impementing in view of mvc architecture

admin - Reply
March 11, 2013 at 12:28 pm
Hi Raj,
Check out the mvc example in the examples folder for how to integrate it into the MVC architecture.

raj - Reply
March 11, 2013 at 2:08 pm
thank you
raj - Reply
March 12, 2013 at 5:43 am
i have done all the configuration as you said in mvc example bt its not showing the calendar
raj - Reply
March 12, 2013 at 5:45 am
my view is like this
var calendarView = Ext.create(‘Ext.ux.TouchCalendar’, {
xtype: ‘calendar’,
viewConfig: {
viewMode: ‘day’,
weekStart: 1,
value: new Date()
}
});
//alert(‘hi’);
var panel = Ext.create(‘Ext.Panel’, {
height:300,
fullscreen: true,
layout: ‘fit’,
tbar:[{
xtype: 'button',
text: 'Month View',
handler: function(){
calendarView.setViewMode('month');
}
}, {
xtype: 'button',
text: 'Week View',
handler: function(){
calendarView.setViewMode('week');
}
}, {
xtype: 'button',
text: 'Day View',
handler: function(){
calendarView.setViewMode('day');
}
}],
items: [calendarView]
});
this.add(panel);
console.log(calendarView);
console.log(panel);

Stuart - Reply
March 12, 2013 at 5:58 am
What does the ‘this’ refer to in your code sample (in this.add(panel))?

raj - Reply
March 12, 2013 at 6:28 am
container of that view
Ext.define(‘myapp.view.appointments.View’, {
extend: ‘Ext.Container’,
xtype: ‘appointmentsView’,
initialize : function() {
this.callParent(arguments);
//alert(‘hi’);
var calendarView = Ext.create(‘Ext.ux.TouchCalendar’, {
xtype: ‘calendar’,
viewConfig: {
viewMode: ‘day’,
weekStart: 1,
value: new Date()
}
});
alert(‘hi’);
var panel = Ext.create(‘Ext.Panel’, {
height:300,
fullscreen: true,
layout: ‘fit’,
tbar:[{
xtype: 'button',
text: 'Month View',
handler: function(){
calendarView.setViewMode('month');
}
}, {
xtype: 'button',
text: 'Week View',
handler: function(){
calendarView.setViewMode('week');
}
}, {
xtype: 'button',
text: 'Day View',
handler: function(){
calendarView.setViewMode('day');
}
}],
items: [calendarView]
});
this.add(calendarView);
console.log(calendarView);
console.log(panel);
raj - Reply
March 12, 2013 at 8:23 am
Ext.define(‘myapp.view.appointments.View’, {
extend: ‘Ext.Container’,
xtype: ‘appointmentsView’,
initialize : function() {
this.callParent(arguments);
//alert(‘hi’);
var calendarView = Ext.create(‘Ext.ux.TouchCalendar’, {
xtype: ‘calendar’,
viewConfig: {
viewMode: ‘day’,
weekStart: 1,
value: new Date()
}
});
alert(‘hi’);
var panel = Ext.create(‘Ext.Panel’, {
height:300,
fullscreen: true,
layout: ‘fit’,
tbar:[{
xtype: 'button',
text: 'Month View',
handler: function(){
calendarView.setViewMode('month');
}
}, {
xtype: 'button',
text: 'Week View',
handler: function(){
calendarView.setViewMode('week');
}
}, {
xtype: 'button',
text: 'Day View',
handler: function(){
calendarView.setViewMode('day');
}
}],
items: [calendarView]
});
this.add(calendarView);
console.log(calendarView);
console.log(panel);
Sam - Reply
March 26, 2013 at 7:11 am
Hello Stuart, I really like this plugin and thank you so much for availing it to other developers. I am new to developing and would like to use this plugin for an application that has an automatic messaging capability. I know this might be too much but do you have any advice as to how I should go about it?
Thanks a lot.

Stuart - Reply
March 31, 2013 at 3:42 am
Hi Sam,
Unfortunately I think your question is a bit too vague for me to offer any truly helpful advice. I think you will need to start building your application and come back if you have any questions about specific areas or code.
Cheers
Stuart

Salma - Reply
March 27, 2013 at 3:51 pm
Thank you for providing this calendar, its exactly what I need for my app!
Unfortunately, I am having trouble getting the events to work. I downloaded the code from GitHib (the main branch) and right out of the box the mvc example did not show any events.
I tried it in my app anyway and I am able to make it work in a separate HTML file , the events show up fine. Unfortunately, I need this to be part of my mvc app and not a separate HTML file. When I add the Ext.ux classes and configure the path then the Calendar shows up fine with no errors. The event plugin gives me the error below
Uncaught Error: [ERROR][Ext.data.Store#setModel] Model with name “CalendarEventBarModel” does not exist.
The error seems to happen on line 45 of the TouchCalendarEventBase.js file. This is the code.
this.eventBarStore = Ext.create(‘Ext.data.Store’, {
model: ‘Ext.ux.CalendarEventBarModel’,
How is the CalendarEventBarModel supposed to be found? This class doesn’t exist as a public class though I have seen it defined inside TouchCalendarEvent.js
It would be an enormous help if someone could explain what I am doing wrong and how this is supposed to work. I am new to Sencha and need to understand how the scope/visibility of classes works

Stuart - Reply
March 31, 2013 at 3:44 am
Hi
The CalendarEventBarModel is included within the TouchCalendarEvents.js file – are you certain you have that file included?

Salma - Reply
April 1, 2013 at 5:32 pm
Thank you so much for your reply. I am using Sencha Touch 2.1.1 and in my touch/src folder I created a ux folder and added the following files
CalendarEventBarModel.js
TouchCalendarMonthEvents.js
Faker.js
TouchCalendarSimpleEvents.js
TouchCalendar.js
TouchCalendarView.js
TouchCalendarDayEvents.js
TouchCalendarWeekEvents.js
TouchCalendarEvents.js
TouchCalendarEventsBase.js
auth (folder)
auth2 (folder)
I have the following paths defined in my app.js file
Ext.Loader.setPath({
‘Ext’: ‘touch/src’,
‘Ext.ux.’ : ‘touch/src/ux’
});
I am not sure why it can’t find the CalendarEventBarModel since the TouchCalendarEvents.js file is present in the ux folder. I really need to get this working so I appreciate any insights/advice that you have.
Sam - Reply
April 10, 2013 at 10:40 am
Hey Stuart,
I am trying to use the plugin for my app, specifically Ext.ux.TouchCalendarEvents.js. I understand it needs other js files to work so I created a folder, ‘ux’ and added the other js files as follows;
Ext.ux.TouchCalendarView.js
Ext.ux.TouchCalendarBaseEvents.js
Ext.ux.TouchCalendarDayEvents.js
Ext.ux.TouchCalendarWeekEvents.js
Ext.ux.TouchCalendarMonthEvents.js
Ext.ux.TouchCalendarEvents.js
I have also added them in html file including the Ext.ux.TouchCalendarEvents.css file. I want this plugin to be launched when a button is tapped, so within the button’s tap basic event I have defined the store and model as specified in the code. I have then instantiated the code to call Ext.ux.TouchCalendarEvents.js as instructed on git.
Here is where the problem is, whenever I run the app and try to launch the plugin, I get the following error, “Uncaught TypeError: Cannot call method ‘sort’ of undefined ” which is not defined in Ext.ux.TouchCalendarBaseEvents.js. Do you know how I can solve this and be able to launch the plugin successfully?
Thank you in advance.
Sam

Remi Bloch - Reply
May 16, 2013 at 10:57 am
I found out that the documentation is wrong. You need to define an eventStore, not a store. The undefined variable here is getCalendar().eventStore

dibish - Reply
April 30, 2013 at 12:51 pm
Dear Sir,
Am using your plugin in my project, its really a wonderful plugin. am using the mvc folder in your directory with simple event list. Here am getting a dot for particular events. I want to change these dots to number of events in that particular day, ie if there are 3 events on a day i wish to show it 3 instead of 3 dots. Please give me a suggestion about this.. your advice is much appreciated. thanks in advance

Vaibhav - Reply
May 4, 2013 at 6:46 am
Hi Dibish did you find the solution? Actually I am also looking for the same functionality.

Remi Bloch - Reply
May 16, 2013 at 10:55 am
Hi, i’m trying for hours to make the event plugin work and i’m starting to lose hope so i’m posting my problem here.
I’m simply trying to make the component work based on the doc. First of all i’ve a model :
Ext.define("SAIMobile.model.Event", { extend: "Ext.data.Model", config: { fields: [{ name: 'event', type: 'string' }, { name: 'location', type: 'string' }, { name: 'start', type: 'date', dateFormat: 'c' }, { name: 'end', type: 'date', dateFormat: 'c' }] } });
then i define the calendar objectExt.define("SAIMobile.view.TodayMonthCalendar", { extend: 'Ext.ux.TouchCalendarView', xtype:'todaymonthcalendar', config: { title:'Calendar', iconCls:'time', layout: 'fit', height:400,
plugins: [Ext.create('Ext.ux.TouchCalendarEvents', { eventBarTpl: new Ext.XTemplate('{event} - {location}') })] }, viewConfig:{ value: new Date(), height:400 }, eventStore: Ext.create('Ext.data.Store',{
config: { model: 'SAIMobile.model.Event', data: [{ event: 'Sencha Con', location: 'Austin, Texas', start: new Date(2013, 5, 14), end: new Date(2013, 5, 14) },{ event: 'Sencha Con', location: 'Austin, Texas', start: new Date(2013, 5, 14), end: new Date(2013, 5, 15) },{ event: 'Sencha Con', location: 'Austin, Texas', start: new Date(2013, 5, 12), end: new Date(2013, 5, 16) },{ event: 'Sencha Con', location: 'Austin, Texas', start: new Date(2013, 5, 5), end: new Date(2013, 5, 6) }] }}), });
When i display my calendar i get the view of today's month without any problem. However, there is absolutely NO event showing on the view. If i change this to the simpleEvent plugin, i don't get any dot. Could you please help me??
Another thing i found out is that if i'm using a custom store extending Ext.data.Store, your calendar component cannot find store functions like clearFilter(), even if they are supposed to exist in the Store component (i tried, i can use the functions in another component)
Thx in advance!
Remi

Remi Bloch - Reply
May 16, 2013 at 2:09 pm
I managed to do it.
The key is : no matter what do not follow the documentation, it’s wrong. Read the source code and make your code the way the component expect it to be.
Still, great component

Stuart - Reply
May 17, 2013 at 6:53 am
Hi Remi,
Admittedly the ‘eventStore’ config has been missed in the docs and I have updated them to include an entry for the it, however there is no mention of using the ‘store’ config – it is private (it is used to store the dates being shown) and marked as such in the docs.
There are also several examples in the ‘example’ folder which demonstrate this feature being used which you can use as a reference.
Thanks
Stuart

Vaibhav - Reply
May 4, 2013 at 6:39 am
Fixed this issue. reloaded the calendar and events on calendar button click.