1. #1
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    Boston, MA
    Posts
    57
    Vote Rating
    6
    steve_luken is on a distinguished road

      4  

    Lightbulb CalendarMatrix Component

    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
    CalendarMatrix Demo: http://www.gomainerentals.com/Sencha...emo/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...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.
    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 equivalent Sencha Touch "CalendarPicker" component can be found at:
    https://github.com/swluken/TouchTreeGrid
    CalendarPicker Demo: http://www.gomainerentals.com/Sencha...icker/app.html

    ExpediaRangeSelectExample.jpg
    TrivagoRangeSelectExample.jpg
    InternationalSingleSelectExample.jpg
    MarketWatchStyleMatrixExample.jpg

    ExtJsCalendarWithYearTab.jpg

  2. #2
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    6,704
    Vote Rating
    182
    Gary Schlosberg is a splendid one to behold Gary Schlosberg is a splendid one to behold Gary Schlosberg is a splendid one to behold Gary Schlosberg is a splendid one to behold Gary Schlosberg is a splendid one to behold Gary Schlosberg is a splendid one to behold Gary Schlosberg is a splendid one to behold

      0  

    Default

    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 human resources manager: fabienne.bell@sencha.com

  3. #3
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    Boston, MA
    Posts
    57
    Vote Rating
    6
    steve_luken is on a distinguished road

      0  

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

    CombEx.jpg


    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:
    {
    xtype: 'datefield',
    useCalendarMatrix: true,
    listeners: {
    trigcalmatrix: 'onFromDtMixin',
    focus: 'onDatefieldFocusMixin'
    },
    dateFieldMixinConfig: {
    fromRef: 'fromDt2',
    toRef: 'toDt2'
    },
    reference: 'fromDt2',
    },
    {
    xtype: 'datefield',
    useCalendarMatrix: true,
    listeners: {
    trigcalmatrix: 'onToDtMixin',
    focus: 'onDatefieldFocusMixin'
    },
    dateFieldMixinConfig: {
    fromRef: 'fromDt2',
    toRef: 'toDt2'
    },
    reference: 'toDt2'
    }




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

Thread Participants: 1

Tags for this Thread