Overview

36 Comments to "Ext.ux.TouchCalendar – A Sencha Touch Calendar component"

1. 

   Matt G

   December 12, 2011

   

   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.
2. 

   Stuart

   December 18, 2011

   

   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
3. 

   Rob

   January 4, 2012

   

   Looks good! Is there an easy way to localize the calendar to display in different languages?
4. 

   Michael

   January 4, 2012

   

   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
5. 

   Stuart

   January 4, 2012

   

   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
6. 

   Hector

   January 4, 2012

   

   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.
7. 

   Michael

   January 4, 2012

   

   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
8. 

   Stuart

   January 4, 2012

   

   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
9. 

   Stuart

   January 4, 2012

   

   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
10. 

    Hector

    January 4, 2012

    

    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.
11. 

    Stuart

    January 5, 2012

    

    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
12. 

    Hector

    January 5, 2012

    

    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
13. 

    Michael

    January 6, 2012

    

    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
14. 

    Stuart

    January 6, 2012

    

    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
15. 

    Javier Roca

    January 9, 2012

    

    amazing plugin, there is a bug if you use sencha-touch-all.js do you know why?
16. 

    aNj

    January 17, 2012

    

    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
17. 

    Stuart

    January 17, 2012

    

    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
18. 

    aNj

    January 17, 2012

    

    All right! Thanks stuart!
19. 

    Andy

    January 30, 2012

    

    What error are you getting? Are you using Sencha Touch 1?
20. 

    Arte

    February 4, 2012

    

    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.
21. 

    Umesh

    February 16, 2012

    

    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.
22. 

    Stuart

    February 16, 2012

    

    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
23. 

    Umesh

    February 16, 2012

    

    Hi Stuart,

    Thanks for the update . Looking forward for the next release, so please keep us posted.

    Regards,
    Umesh.
24. 

    q210

    February 21, 2012

    

    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)
25. 

    Bob

    February 22, 2012

    

    Hey Stuart

    Any idea when a working version for ST2 will be available?

    Thanks
26. 

    freeduck

    February 22, 2012

    

    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..
27. 

    freeduck

    February 22, 2012

    

    and How can I catch event who click date?
28. 

    Stuart

    February 22, 2012

    

    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
29. 

    Stuart

    February 22, 2012

    

    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
30. 

    Stuart

    February 22, 2012

    

    Hi

    Thanks for the bug report, we’ll try to include fixes for these as soon as possible.

    Cheers
    Stuart
31. 

    Stuart

    February 22, 2012

    

    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
32. 

    hoanghuu

    April 11, 2012

    

    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.
33. 

    Doug

    April 13, 2012

    

    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’ .
34. 

    Stuart

    April 13, 2012

    

    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
35. 

    Stuart

    April 13, 2012

    

    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
36. 

    hoanghuu

    April 17, 2012

    

    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.

Leave a Comment