CalendarMatrix

EXTJS Enhanced Calendar Component for custom styled Calendar Grids. Supports Read-Only, Range Select, Multi-Select, and Single Date Select.

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
Combination example of Single Date selection and Range selection within Forms, Grids (row editing and cell editing). Demonstrates custom implementation of CalendarMatrix utilizing Ext.form.field.Date which allows manual date input with validation, but where CalendarMatrix replaces the standard datepicker. DateFieldMixin.js is provided which demonstrates how a Mixin class can be used to simplify repetitive implementations of common functionality.

CalendarMatrix Demo: http://www.gomainerentals.com/Sencha/CalendarMatrixDemo/index.html

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/CalendarApp/index.html
- Select date within Year tab to open Day tab
- Select month title with 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.

This software can be downloaded at:
https://github.com/swluken/CalendarMatrix
**Don't forget to STAR this repository in GITHUB to be notified for frequent changes !!

The relevant files are found in ./CalendarMatrixDemo/src/ux/CalendarMatrix/ directory:
- DateMatrixPickerExtension.js
- CalendarMatrix.js (see comments for config documentation; see CalendarMatrixDemo project for how to implement events "calendarselect", "monthselect" and "mouseover" and how to implement custom styling via CSS)
- DateFieldMixin.js (see comments for detailed usage)

Sencha Forum thread: http://www.sencha.com/forum/showthread.php?298088-CalendarMatrix-Component&p=1088490#post1088490

The equivalent Sencha Touch "CalendarPicker" component can be found at:
https://github.com/swluken/TouchTreeGrid
CalendarPicker Demo
http://www.gomainerentals.com/Sencha/CalendarPicker/app.html

CNSawyer/CalendarMatrix

CalendarMatrix

License