12 Feb 2015 3:47 PM #1
CalendarMatrix is an EXTJS 5.x component that extends Ext.picker.Date to provide incredible flexibility in the implementation of Sencha's date picker component. This component will work with earlier version of EXTJS with slight modifications. Following examples are included in the demo and within the enclosed CalendarMatrixDemo project (Architect 3.2 project also included):
- MarketWatch style Options Expiration read-only Calendar with Legend
- Multi "random" date selection example
- Single Date selection popup demonstrating numerous advanced features including: International Language support, customized HTML within each date cell, custom weekend styling, customized disabled dates
- TripAdvisor, Trivago, Expedia and Travelocity styled date range selector examples
Also see how CalendarMatrix can be used to enhance EXTJS provided Calendar Application by adding "Year" tab with selection features similar to Yahoo calendar:
Calendar App Demo: http://www.gomainerentals.com/Sencha...App/index.html
- Select date within Year tab to open Day tab
- Select month title within Year tab to open Month tab
- Can also be used to replace the DatePicker selector on left providing week and month highlighting features consistent with Google and Yahoo calendars.
**Don't forget to STAR this repository in GITHUB to be notified for frequent changes !!
The equivalent Sencha Touch "CalendarPicker" component can be found at:
CalendarPicker Demo: http://www.gomainerentals.com/Sencha...icker/app.html
13 Feb 2015 7:29 AM #2
Very nice! Thanks for sharing this work with the community.
Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: firstname.lastname@example.org
2 Mar 2015 4:00 PM #3
Enhanced Combination Example
Enhanced Combination Example
Added Combination example of Single Date selection plus Range selection within Forms and Grids (both row and cell editors). It demonstrates custom implementation of CalendarMatrix utilizing Ext.form.field.Date which allows manual date input with validation, but where CalendarMatrix replaces the standard datepicker.
- If both dates empty and user clicks on FromDate, then implement SINGLE selection mode (i.e. FromDate only input)
- If both dates empty and user clicks on ToDate, then implement RANGE selection mode.
After ToDate selected, ToDate is anchored and user allowed to continue selection of FromDate in a "one stroke" selection method.
- If both dates populated then accept either ToDate or FromDate based on datefield selection
- TradeDate example demonstrates disabled days after today and provided mixin methods to simplify conditional visibility of month navigation arrows.
DateFieldMixin.js is provided which demonstrates how a Mixin class can be used to simplify repetitive implementations of common functionality.
Refer to ./app/ux/CalendarMatrix/DateFieldMixin.js for additional documentation.
After referencing DateFieldMixin in you View Controller, Implementation is as simple as: