CalendarPicker is an extremely versatile and easy to implement Sencha Touch custom component that utilizes TouchTreeGrid to provide incredible flexibility for date selection and calendar display on Phones and Tablets. Calendars can be implemented with just a few configurations in overlay panels or traditional containers. Calendar is constructed using #months backward to #months forward configurations. Many features exist including: collapsible months for rapid single select, range select in single calendar popup, or multi-select random dates in single popup. Specific dates can be disabled from selection. Customizable styling exists for holidays, weekends, selected days, disabled days and custom days. Custom filters can be easily applied to only display specific months highlighting important upcoming dates. Day planner support is partially implemented and will be forthcoming. Provided examples work for Touch 2.2, 2.3-beta and for IE10/Windows phones.
- IPhone-style calendar layout examples
.... Range selection Example #2b
....Range selection Example #2c. Also changes background transparency to white instead
of default gray behind modal overlay panel.
....Financial DayCount (Example #6)
- Added Financial Calendar examples
....Daycounts from today using custom day renderer (Example #6)
....MarketWatch-style Options Expiration Calendar (Example #7)
- Support for multiple categories of custom dates within same calendar, each with unique styling and auto-generated Legend (Example #7)
- Sped up Expand All/ Collapse All for large calendars.
- Enhanced logic to auto-scroll to first month with pre-selected dates.
- Added pull-refresh style option to allow user to insert more months into beginning of calendar
- Added paging-plugin style option to allow user to append more months at end of calendar Example #2b.
Support auto-generation of Calendar Matrix view (intended for Tablets, but refer to CalendarPicker.pdf and downloaded code for Phone version of Day Planner).
Refined Day Planner examples for Year/Month/List/Day views implemented unique for Tablets vs. Phones.
- Automatically apply custom date descriptions to Month and Day calendars.
- Support month and day taps to quickly navigate between each of the views.
- Support swipe to navigate to next/previous calendar months.
- Also created new "yearMonthSelect" component utilizing TouchTreeGrid
to support rapid navigation between calendar months.
Added more configurations and CSS selectors to further customize calendar implementations.
- Auto-generation of re-occuring custom dates with descriptions
(i.e. anniverseries, birthdates, meetings, etc)
- Continued Day Planner support
- Feature to expand/collapse months using user-defined Function
- Horizontal scrolling calendars
- Optional categorize by Year feature.
- Soliciting other good ideas to integrate with this component
*** New CalendarPicker Features and Examples ***
Added support for international calendars including examples of 44 different languages.
Soliciting corrections, updates and additional language definitions.
Date translations extracted from EXTJS 4.2.1 locale files and should be verified (refer to ./app/controller/languageMixin.js and documentation at top of file in addition to Appendix D of CalendarPicker.pdf for language-specific configs)
Holiday Dates are US and for illustration only and would need to be customized for each language.
Some of the examples require additional localization logic for Legends, Titles and button text.
It is suggested that you leverage useIconsForExpCollapse=true config to display Expand/Collapse as arrows for international usage.