Saturday, September 8, 2012

Titanium Calendar Month View

This blog post moved here.

Please refer here for more details.



Calendar View / Month View
Calendar View / Month View

28 comments:

  1. Nice job! I needed a cal for iPhone and Android and this really works.

    ReplyDelete
  2. Works great and responsive (unlike the other webview alternatives floating around). Thanks!

    ReplyDelete
  3. Awesome work! Is there a way to connect to an external json source to get data and send data, like for a booking system?

    ReplyDelete
    Replies
    1. I am afraid you will have to make your own adjustments to the system to do that. This is merely the base calendar.

      Delete
    2. This is created using Titanium JavaScript and not the native calendar.

      Delete
  4. Also works on Android 2.1. Awesome.

    ReplyDelete
    Replies
    1. Hopefully this will work on all the platform which supports the Titanium Platform. Enjoy :)

      Delete
    2. hi i tried your code its really gud but there is a fault when i select any date in january 2013 it gives a some wrong date but when i tried selecting different months after jan then go back again to jan and select any date then it works fine

      Delete
  5. Hi Avtarsingh, your code was useful to get the basics going for a calendar.

    The scrolling through the months with animation wasn't really working for me, so I started to reimplement. What I came up with was really simple and you lose the animations but I'm sure someone can take this to the next level if animations are important.

    Instead of adding the three calendarviews to the window, just create a scrollableView like so

    var scrollableView = Ti.UI.createScrollableView({
    views:[prevCalendarView,thisCalendarView,nextCalendarView],
    showPagingControl:false,
    scrollingEnabled:false,
    currentPage:1
    });

    win.add(scrollableView);

    Removed all the animations.
    Then in the next and previous button listeners, remove the animation stuff again and then reset the views for scrollableView views like:

    scrollableView.views [prevCalendar,thisCalendar,nextCalendar]; // replace with your var names

    This just allows us to use the scrollable view to store the views.

    The next level would be to use scrollableView.moveNext() and figure out how to scoot the calendars around in the views accordingly. That would give you animation.

    Hope this helps somebody who struggles with changing months.

    ReplyDelete
    Replies
    1. Something else I did was to allow this code to work with tablets. It's not that hard, if you want the code contact me.

      Lastly I noticed a problem with the orientation changing, so when orientation changes you need to redraw the calendar.

      Delete
    2. Hello Dave Horton,

      Thank you so much for your time and providing me the suggestions on this.

      This view is improved/updated a lot after writing this blog & still under improvement stage.

      Once I complete the full flage, I will surely update the blog so you can take that as well.

      You mentioned about animation issue you are facing, That also resolved but will updated here soon.

      Again thank you for providing your valuable feedback.

      Delete
    3. Hi Avtarsingh, any updates on the latest code base?

      Thanks,
      Andrew

      Delete
  6. Hello

    When trying to incorporate this into a current app I am recieving an error in the ti.js file saying window.open(option) is not a funciton.

    Do you have any thoughts on why I could be receiving the error?

    Thanks

    ReplyDelete
  7. Hi Avtarsingh,

    Thanks for providing this code example. However, I have problems getting it to run on Iphone simulator. On compile it runs the simulator but right away it closes simulator stating the application has exited simulator. I´m running with IOS 6 simulator version. IOS 6 SDK.

    ReplyDelete
  8. Hi,
    I wanted to display the calendar in different format. month starting from monday. could you suggest required changes in your existing code?
    Thank You.

    ReplyDelete
    Replies
    1. try this:

      var dayOfWeek = new Date(a, b, 1).getDay()-1;
      var daysInNextMonth = (new Date(a, b, daysInMonth).getDay()) - 7;

      Delete
  9. Hi Avtarsingh,

    Thanks for sharing code, The code still has problems when you click next or previous then no date gets allocate to Saturday.
    Please help

    ReplyDelete
  10. i cant seem to find the code, where is that?

    ReplyDelete
    Replies
    1. Hello,

      Thanks for updating. I found that the URL was not working but now it is working and tested.

      Please let me know if you still facing issue. :)

      Delete
    2. Hello,

      I am interested in your module but can't find any working link to the code.

      Can u plz post the widget code here or a working link to it.

      Thanks

      Delete
  11. Hello, i can't find the code, could you please update the link?

    ReplyDelete
  12. Please update the code link, Cant find the code.

    ReplyDelete
  13. hello avatar, your code looks great but when i am trying to goto next month or prev month, only month name is changing there is no view for that view and even though i am trying to come back to current month it is still blank.

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  15. Link is not working ?

    Can any once let me know the correct link for the source code?

    ReplyDelete