ion2-calendar - npm Package Compare versions

Comparing version 2.0.0-beta.7 to 2.0.0

dist/calendar.controller.d.ts

 import { ModalController } from 'ionic-angular';
-import { ModalOptions, CalendarControllerOptions } from './calendar.model';
+import { ModalOptions, CalendarModalOptions } from './calendar.model';
 import { CalendarService } from './services/calendar.service';
@@ -9,3 +9,9 @@ export declare class CalendarController {
     constructor(modalCtrl: ModalController, calSvc: CalendarService);
-    openCalendar(calendarOptions: CalendarControllerOptions, modalOptions?: ModalOptions): any;
+    /**
+     * @deprecated
+     * @param {CalendarModalOptions} calendarOptions
+     * @param {ModalOptions} modalOptions
+     * @returns {any}
+     */
+    openCalendar(calendarOptions: CalendarModalOptions, modalOptions?: ModalOptions): any;
     setHistory(param: any): void;
@@ -12,0 +18,0 @@ getHistory(id: any): Object;

dist/calendar.controller.js

@@ -10,4 +10,9 @@ import { Injectable } from '@angular/core';
     }
+    /**
+     * @deprecated
+     * @param {CalendarModalOptions} calendarOptions
+     * @param {ModalOptions} modalOptions
+     * @returns {any}
+     */
     CalendarController.prototype.openCalendar = function (calendarOptions, modalOptions) {
-        var _this = this;
         if (modalOptions === void 0) { modalOptions = {}; }
@@ -21,4 +26,4 @@ var options = this.calSvc.safeOpt(calendarOptions);
             calendarModal.onDidDismiss(function (data) {
-                if (data && Array.isArray(data)) {
-                    resolve(_this.calSvc.wrapResult(data, options.pickMode));
+                if (data) {
+                    resolve(data);
                 }
@@ -25,0 +30,0 @@ else {

dist/calendar.model.d.ts

@@ -52,3 +52,3 @@ export interface CalendarOriginal {
 }
-export interface CalendarControllerOptions {
+export interface CalendarModalOptions {
     autoDone?: boolean;
@@ -81,2 +81,5 @@ from?: Date;
     countNextMonths?: number;
+    /**
+     * @deprecated this version notwork
+     */
     showYearPicker?: boolean;
@@ -83,0 +86,0 @@ daysConfig?: Array<DayConfig>;

dist/calendar.model.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"CalendarOriginal":{"__symbolic":"interface"},"CalendarDay":{"__symbolic":"interface"},"CalendarMonth":{"__symbolic":"class"},"DayConfig":{"__symbolic":"interface"},"CalendarOptions":{"__symbolic":"class"},"ModalOptions":{"__symbolic":"interface"},"CalendarControllerOptions":{"__symbolic":"interface"},"CalendarComponentOptions":{"__symbolic":"interface"},"CalendarResult":{"__symbolic":"class"}}},{"__symbolic":"module","version":1,"metadata":{"CalendarOriginal":{"__symbolic":"interface"},"CalendarDay":{"__symbolic":"interface"},"CalendarMonth":{"__symbolic":"class"},"DayConfig":{"__symbolic":"interface"},"CalendarOptions":{"__symbolic":"class"},"ModalOptions":{"__symbolic":"interface"},"CalendarControllerOptions":{"__symbolic":"interface"},"CalendarComponentOptions":{"__symbolic":"interface"},"CalendarResult":{"__symbolic":"class"}}}]
+[{"__symbolic":"module","version":3,"metadata":{"CalendarOriginal":{"__symbolic":"interface"},"CalendarDay":{"__symbolic":"interface"},"CalendarMonth":{"__symbolic":"class"},"DayConfig":{"__symbolic":"interface"},"CalendarOptions":{"__symbolic":"class"},"ModalOptions":{"__symbolic":"interface"},"CalendarModalOptions":{"__symbolic":"interface"},"CalendarComponentOptions":{"__symbolic":"interface"},"CalendarResult":{"__symbolic":"class"}}},{"__symbolic":"module","version":1,"metadata":{"CalendarOriginal":{"__symbolic":"interface"},"CalendarDay":{"__symbolic":"interface"},"CalendarMonth":{"__symbolic":"class"},"DayConfig":{"__symbolic":"interface"},"CalendarOptions":{"__symbolic":"class"},"ModalOptions":{"__symbolic":"interface"},"CalendarModalOptions":{"__symbolic":"interface"},"CalendarComponentOptions":{"__symbolic":"interface"},"CalendarResult":{"__symbolic":"class"}}}]

dist/components/calendar.component.d.ts

 import { OnInit, EventEmitter } from '@angular/core';
-import { CalendarMonth, CalendarControllerOptions, CalendarComponentOptions } from '../calendar.model';
+import { CalendarMonth, CalendarModalOptions, CalendarComponentOptions } from '../calendar.model';
 import { CalendarService } from "../services/calendar.service";
@@ -12,3 +12,3 @@ import { ControlValueAccessor } from '@angular/forms';
     onChange: EventEmitter<any>;
-    _d: CalendarControllerOptions;
+    _d: CalendarModalOptions;
     _calendarMonthValue: any[];
@@ -15,0 +15,0 @@ _onChanged: Function;

dist/components/calendar.component.js

@@ -37,3 +37,2 @@ import { Component, Input, Output, EventEmitter, forwardRef } from '@angular/core';
         }
-        console.log(this._calendarMonthValue[0]);
     };
@@ -40,0 +39,0 @@ CalendarComponent.prototype.registerOnChange = function (fn) {

dist/components/calendar.modal.d.ts

 import { ElementRef, ChangeDetectorRef, Renderer } from '@angular/core';
 import { NavParams, ViewController, Content, InfiniteScroll } from 'ionic-angular';
-import { CalendarDay, CalendarMonth, CalendarOptions, CalendarControllerOptions } from '../calendar.model';
+import { CalendarDay, CalendarMonth, CalendarOptions, CalendarModalOptions } from '../calendar.model';
 import { CalendarService } from '../services/calendar.service';
@@ -37,3 +37,3 @@ export declare class CalendarModal {
     _color: string;
-    _d: CalendarControllerOptions;
+    _d: CalendarModalOptions;
     constructor(_renderer: Renderer, _elementRef: ElementRef, params: NavParams, viewCtrl: ViewController, ref: ChangeDetectorRef, calSvc: CalendarService);
@@ -40,0 +40,0 @@ ionViewDidLoad(): void;

dist/components/calendar.modal.js

@@ -30,3 +30,3 @@ import { Component, ViewChild, ElementRef, ChangeDetectorRef, Renderer } from '@angular/core';
         var params = this.params;
-        this._d = params.get('options');
+        this._d = this.calSvc.safeOpt(params.get('options'));
         var startTime = moment(this._d.from).valueOf();
@@ -119,3 +119,3 @@ var endTime = moment(this._d.to).valueOf();
     CalendarModal.prototype.done = function () {
-        this.viewCtrl.dismiss(this.datesTemp);
+        this.viewCtrl.dismiss(this.calSvc.wrapResult(this.datesTemp, this._d.pickMode));
     };
@@ -276,3 +276,3 @@ CalendarModal.prototype.canDone = function () {
                 selector: 'ion-calendar-modal',
-                template: "\n    <ion-header>\n\n      <ion-navbar [color]=\"_color\">\n\n        <!--<ion-buttons start [hidden]=\"!showYearPicker\">-->\n        <!--<ion-select [(ngModel)]=\"year\" (ngModelChange)=\"changedYearSelection()\" interface=\"popover\">-->\n        <!--<ion-option *ngFor=\"let y of years\" value=\"{{y}}\">{{y}}</ion-option>-->\n        <!--</ion-select>-->\n        <!--</ion-buttons>-->\n\n        <ion-buttons start>\n          <button ion-button icon-only clear (click)=\"onCancel()\">\n            <span *ngIf=\"closeLabel !== '' && !closeIcon\">{{closeLabel}}</span>\n            <ion-icon *ngIf=\"closeIcon\" name=\"close\"></ion-icon>\n          </button>\n        </ion-buttons>\n\n        <ion-title>{{title}}</ion-title>\n\n        <ion-buttons end>\n          <button ion-button icon-only *ngIf=\"!_d.autoDone\" clear [disabled]=\"!canDone()\" (click)=\"done()\">\n            <span *ngIf=\"doneLabel !== '' && !doneIcon\">{{doneLabel}}</span>\n            <ion-icon *ngIf=\"doneIcon\" name=\"checkmark\"></ion-icon>\n          </button>\n\n        </ion-buttons>\n\n      </ion-navbar>\n\n      <ion-calendar-week\n        [color]=\"_color\"\n        [weekArray]=\"weekdays\"\n        [weekStart]=\"weekStart\">\n      </ion-calendar-week>\n\n    </ion-header>\n\n    <ion-content (ionScroll)=\"onScroll($event)\" class=\"calendar-page\"\n                 [ngClass]=\"{'multi-selection': options.pickMode === 'multi'}\">\n\n      <div #months>\n        <div *ngFor=\"let month of calendarMonths;let i = index;\" class=\"month-box\" [attr.id]=\"'month-' + i\">\n          <h4 class=\"text-center month-title\">{{month.original.date | date:monthFormatFilterStr}}</h4>\n          <ion-calendar-month [month]=\"month\"\n                              [pickMode]=\"options.pickMode\"\n                              [isSaveHistory]=\"isSaveHistory\"\n                              [id]=\"_id\"\n                              [color]=\"_color\"\n                              (onChange)=\"onChange($event)\"\n                              [(ngModel)]=\"datesTemp\">\n\n          </ion-calendar-month>\n        </div>\n      </div>\n\n      <ion-infinite-scroll (ionInfinite)=\"nextMonth($event)\">\n        <ion-infinite-scroll-content></ion-infinite-scroll-content>\n      </ion-infinite-scroll>\n\n    </ion-content>\n  ",
+                template: "\n    <ion-header>\n\n      <ion-navbar [color]=\"_color\">\n\n        <!--<ion-buttons start [hidden]=\"!showYearPicker\">-->\n        <!--<ion-select [(ngModel)]=\"year\" (ngModelChange)=\"changedYearSelection()\" interface=\"popover\">-->\n        <!--<ion-option *ngFor=\"let y of years\" value=\"{{y}}\">{{y}}</ion-option>-->\n        <!--</ion-select>-->\n        <!--</ion-buttons>-->\n\n        <ion-buttons start>\n          <button ion-button icon-only clear (click)=\"onCancel()\">\n            <span *ngIf=\"closeLabel !== '' && !closeIcon\">{{closeLabel}}</span>\n            <ion-icon *ngIf=\"closeIcon\" name=\"close\"></ion-icon>\n          </button>\n        </ion-buttons>\n\n        <ion-title>{{title}}</ion-title>\n\n        <ion-buttons end>\n          <button ion-button icon-only *ngIf=\"!_d.autoDone\" clear [disabled]=\"!canDone()\" (click)=\"done()\">\n            <span *ngIf=\"doneLabel !== '' && !doneIcon\">{{doneLabel}}</span>\n            <ion-icon *ngIf=\"doneIcon\" name=\"checkmark\"></ion-icon>\n          </button>\n\n        </ion-buttons>\n\n      </ion-navbar>\n\n      <ion-calendar-week\n        [color]=\"_color\"\n        [weekArray]=\"weekdays\"\n        [weekStart]=\"weekStart\">\n      </ion-calendar-week>\n\n    </ion-header>\n\n    <ion-content (ionScroll)=\"onScroll($event)\" class=\"calendar-page\"\n                 [ngClass]=\"{'multi-selection': options.pickMode === 'multi'}\">\n\n      <div #months>\n        <ng-template ngFor let-month [ngForOf]=\"calendarMonths\" [ngForTrackBy]=\"trackByTime\" let-i=\"index\">\n          <div class=\"month-box\" [attr.id]=\"'month-' + i\">\n            <h4 class=\"text-center month-title\">{{month.original.date | date:monthFormatFilterStr}}</h4>\n            <ion-calendar-month [month]=\"month\"\n                                [pickMode]=\"options.pickMode\"\n                                [isSaveHistory]=\"isSaveHistory\"\n                                [id]=\"_id\"\n                                [color]=\"_color\"\n                                (onChange)=\"onChange($event)\"\n                                [(ngModel)]=\"datesTemp\">\n\n            </ion-calendar-month>\n          </div>\n        </ng-template>\n      \n      </div>\n\n      <ion-infinite-scroll (ionInfinite)=\"nextMonth($event)\">\n        <ion-infinite-scroll-content></ion-infinite-scroll-content>\n      </ion-infinite-scroll>\n\n    </ion-content>\n  ",
             },] },
@@ -279,0 +279,0 @@ ];

dist/components/calendar.modal.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"CalendarModal":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ion-calendar-modal","template":"\n    <ion-header>\n\n      <ion-navbar [color]=\"_color\">\n\n        <!--<ion-buttons start [hidden]=\"!showYearPicker\">-->\n        <!--<ion-select [(ngModel)]=\"year\" (ngModelChange)=\"changedYearSelection()\" interface=\"popover\">-->\n        <!--<ion-option *ngFor=\"let y of years\" value=\"{{y}}\">{{y}}</ion-option>-->\n        <!--</ion-select>-->\n        <!--</ion-buttons>-->\n\n        <ion-buttons start>\n          <button ion-button icon-only clear (click)=\"onCancel()\">\n            <span *ngIf=\"closeLabel !== '' && !closeIcon\">{{closeLabel}}</span>\n            <ion-icon *ngIf=\"closeIcon\" name=\"close\"></ion-icon>\n          </button>\n        </ion-buttons>\n\n        <ion-title>{{title}}</ion-title>\n\n        <ion-buttons end>\n          <button ion-button icon-only *ngIf=\"!_d.autoDone\" clear [disabled]=\"!canDone()\" (click)=\"done()\">\n            <span *ngIf=\"doneLabel !== '' && !doneIcon\">{{doneLabel}}</span>\n            <ion-icon *ngIf=\"doneIcon\" name=\"checkmark\"></ion-icon>\n          </button>\n\n        </ion-buttons>\n\n      </ion-navbar>\n\n      <ion-calendar-week\n        [color]=\"_color\"\n        [weekArray]=\"weekdays\"\n        [weekStart]=\"weekStart\">\n      </ion-calendar-week>\n\n    </ion-header>\n\n    <ion-content (ionScroll)=\"onScroll($event)\" class=\"calendar-page\"\n                 [ngClass]=\"{'multi-selection': options.pickMode === 'multi'}\">\n\n      <div #months>\n        <div *ngFor=\"let month of calendarMonths;let i = index;\" class=\"month-box\" [attr.id]=\"'month-' + i\">\n          <h4 class=\"text-center month-title\">{{month.original.date | date:monthFormatFilterStr}}</h4>\n          <ion-calendar-month [month]=\"month\"\n                              [pickMode]=\"options.pickMode\"\n                              [isSaveHistory]=\"isSaveHistory\"\n                              [id]=\"_id\"\n                              [color]=\"_color\"\n                              (onChange)=\"onChange($event)\"\n                              [(ngModel)]=\"datesTemp\">\n\n          </ion-calendar-month>\n        </div>\n      </div>\n\n      <ion-infinite-scroll (ionInfinite)=\"nextMonth($event)\">\n        <ion-infinite-scroll-content></ion-infinite-scroll-content>\n      </ion-infinite-scroll>\n\n    </ion-content>\n  "}]}],"members":{"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"ionic-angular","name":"Content"}]}]}],"monthsEle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["months"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"ionic-angular","name":"NavParams"},{"__symbolic":"reference","module":"ionic-angular","name":"ViewController"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"../services/calendar.service","name":"CalendarService"}]}],"ionViewDidLoad":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"initDefaultDate":[{"__symbolic":"method"}],"findCssClass":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}],"done":[{"__symbolic":"method"}],"canDone":[{"__symbolic":"method"}],"getHistory":[{"__symbolic":"method"}],"createYearPicker":[{"__symbolic":"method"}],"nextMonth":[{"__symbolic":"method"}],"backwardsMonth":[{"__symbolic":"method"}],"scrollToDefaultDate":[{"__symbolic":"method"}],"onScroll":[{"__symbolic":"method"}],"findInitMonthNumber":[{"__symbolic":"method"}],"changedYearSelection":[{"__symbolic":"method"}],"_getDayTime":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CalendarModal":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ion-calendar-modal","template":"\n    <ion-header>\n\n      <ion-navbar [color]=\"_color\">\n\n        <!--<ion-buttons start [hidden]=\"!showYearPicker\">-->\n        <!--<ion-select [(ngModel)]=\"year\" (ngModelChange)=\"changedYearSelection()\" interface=\"popover\">-->\n        <!--<ion-option *ngFor=\"let y of years\" value=\"{{y}}\">{{y}}</ion-option>-->\n        <!--</ion-select>-->\n        <!--</ion-buttons>-->\n\n        <ion-buttons start>\n          <button ion-button icon-only clear (click)=\"onCancel()\">\n            <span *ngIf=\"closeLabel !== '' && !closeIcon\">{{closeLabel}}</span>\n            <ion-icon *ngIf=\"closeIcon\" name=\"close\"></ion-icon>\n          </button>\n        </ion-buttons>\n\n        <ion-title>{{title}}</ion-title>\n\n        <ion-buttons end>\n          <button ion-button icon-only *ngIf=\"!_d.autoDone\" clear [disabled]=\"!canDone()\" (click)=\"done()\">\n            <span *ngIf=\"doneLabel !== '' && !doneIcon\">{{doneLabel}}</span>\n            <ion-icon *ngIf=\"doneIcon\" name=\"checkmark\"></ion-icon>\n          </button>\n\n        </ion-buttons>\n\n      </ion-navbar>\n\n      <ion-calendar-week\n        [color]=\"_color\"\n        [weekArray]=\"weekdays\"\n        [weekStart]=\"weekStart\">\n      </ion-calendar-week>\n\n    </ion-header>\n\n    <ion-content (ionScroll)=\"onScroll($event)\" class=\"calendar-page\"\n                 [ngClass]=\"{'multi-selection': options.pickMode === 'multi'}\">\n\n      <div #months>\n        <div *ngFor=\"let month of calendarMonths;let i = index;\" class=\"month-box\" [attr.id]=\"'month-' + i\">\n          <h4 class=\"text-center month-title\">{{month.original.date | date:monthFormatFilterStr}}</h4>\n          <ion-calendar-month [month]=\"month\"\n                              [pickMode]=\"options.pickMode\"\n                              [isSaveHistory]=\"isSaveHistory\"\n                              [id]=\"_id\"\n                              [color]=\"_color\"\n                              (onChange)=\"onChange($event)\"\n                              [(ngModel)]=\"datesTemp\">\n\n          </ion-calendar-month>\n        </div>\n      </div>\n\n      <ion-infinite-scroll (ionInfinite)=\"nextMonth($event)\">\n        <ion-infinite-scroll-content></ion-infinite-scroll-content>\n      </ion-infinite-scroll>\n\n    </ion-content>\n  "}]}],"members":{"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"ionic-angular","name":"Content"}]}]}],"monthsEle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["months"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"ionic-angular","name":"NavParams"},{"__symbolic":"reference","module":"ionic-angular","name":"ViewController"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"../services/calendar.service","name":"CalendarService"}]}],"ionViewDidLoad":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"initDefaultDate":[{"__symbolic":"method"}],"findCssClass":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}],"done":[{"__symbolic":"method"}],"canDone":[{"__symbolic":"method"}],"getHistory":[{"__symbolic":"method"}],"createYearPicker":[{"__symbolic":"method"}],"nextMonth":[{"__symbolic":"method"}],"backwardsMonth":[{"__symbolic":"method"}],"scrollToDefaultDate":[{"__symbolic":"method"}],"onScroll":[{"__symbolic":"method"}],"findInitMonthNumber":[{"__symbolic":"method"}],"changedYearSelection":[{"__symbolic":"method"}],"_getDayTime":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"CalendarModal":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ion-calendar-modal","template":"\n    <ion-header>\n\n      <ion-navbar [color]=\"_color\">\n\n        <!--<ion-buttons start [hidden]=\"!showYearPicker\">-->\n        <!--<ion-select [(ngModel)]=\"year\" (ngModelChange)=\"changedYearSelection()\" interface=\"popover\">-->\n        <!--<ion-option *ngFor=\"let y of years\" value=\"{{y}}\">{{y}}</ion-option>-->\n        <!--</ion-select>-->\n        <!--</ion-buttons>-->\n\n        <ion-buttons start>\n          <button ion-button icon-only clear (click)=\"onCancel()\">\n            <span *ngIf=\"closeLabel !== '' && !closeIcon\">{{closeLabel}}</span>\n            <ion-icon *ngIf=\"closeIcon\" name=\"close\"></ion-icon>\n          </button>\n        </ion-buttons>\n\n        <ion-title>{{title}}</ion-title>\n\n        <ion-buttons end>\n          <button ion-button icon-only *ngIf=\"!_d.autoDone\" clear [disabled]=\"!canDone()\" (click)=\"done()\">\n            <span *ngIf=\"doneLabel !== '' && !doneIcon\">{{doneLabel}}</span>\n            <ion-icon *ngIf=\"doneIcon\" name=\"checkmark\"></ion-icon>\n          </button>\n\n        </ion-buttons>\n\n      </ion-navbar>\n\n      <ion-calendar-week\n        [color]=\"_color\"\n        [weekArray]=\"weekdays\"\n        [weekStart]=\"weekStart\">\n      </ion-calendar-week>\n\n    </ion-header>\n\n    <ion-content (ionScroll)=\"onScroll($event)\" class=\"calendar-page\"\n                 [ngClass]=\"{'multi-selection': options.pickMode === 'multi'}\">\n\n      <div #months>\n        <ng-template ngFor let-month [ngForOf]=\"calendarMonths\" [ngForTrackBy]=\"trackByTime\" let-i=\"index\">\n          <div class=\"month-box\" [attr.id]=\"'month-' + i\">\n            <h4 class=\"text-center month-title\">{{month.original.date | date:monthFormatFilterStr}}</h4>\n            <ion-calendar-month [month]=\"month\"\n                                [pickMode]=\"options.pickMode\"\n                                [isSaveHistory]=\"isSaveHistory\"\n                                [id]=\"_id\"\n                                [color]=\"_color\"\n                                (onChange)=\"onChange($event)\"\n                                [(ngModel)]=\"datesTemp\">\n\n            </ion-calendar-month>\n          </div>\n        </ng-template>\n      \n      </div>\n\n      <ion-infinite-scroll (ionInfinite)=\"nextMonth($event)\">\n        <ion-infinite-scroll-content></ion-infinite-scroll-content>\n      </ion-infinite-scroll>\n\n    </ion-content>\n  "}]}],"members":{"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"ionic-angular","name":"Content"}]}]}],"monthsEle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["months"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"ionic-angular","name":"NavParams"},{"__symbolic":"reference","module":"ionic-angular","name":"ViewController"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"../services/calendar.service","name":"CalendarService"}]}],"ionViewDidLoad":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"initDefaultDate":[{"__symbolic":"method"}],"findCssClass":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}],"done":[{"__symbolic":"method"}],"canDone":[{"__symbolic":"method"}],"getHistory":[{"__symbolic":"method"}],"createYearPicker":[{"__symbolic":"method"}],"nextMonth":[{"__symbolic":"method"}],"backwardsMonth":[{"__symbolic":"method"}],"scrollToDefaultDate":[{"__symbolic":"method"}],"onScroll":[{"__symbolic":"method"}],"findInitMonthNumber":[{"__symbolic":"method"}],"changedYearSelection":[{"__symbolic":"method"}],"_getDayTime":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CalendarModal":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ion-calendar-modal","template":"\n    <ion-header>\n\n      <ion-navbar [color]=\"_color\">\n\n        <!--<ion-buttons start [hidden]=\"!showYearPicker\">-->\n        <!--<ion-select [(ngModel)]=\"year\" (ngModelChange)=\"changedYearSelection()\" interface=\"popover\">-->\n        <!--<ion-option *ngFor=\"let y of years\" value=\"{{y}}\">{{y}}</ion-option>-->\n        <!--</ion-select>-->\n        <!--</ion-buttons>-->\n\n        <ion-buttons start>\n          <button ion-button icon-only clear (click)=\"onCancel()\">\n            <span *ngIf=\"closeLabel !== '' && !closeIcon\">{{closeLabel}}</span>\n            <ion-icon *ngIf=\"closeIcon\" name=\"close\"></ion-icon>\n          </button>\n        </ion-buttons>\n\n        <ion-title>{{title}}</ion-title>\n\n        <ion-buttons end>\n          <button ion-button icon-only *ngIf=\"!_d.autoDone\" clear [disabled]=\"!canDone()\" (click)=\"done()\">\n            <span *ngIf=\"doneLabel !== '' && !doneIcon\">{{doneLabel}}</span>\n            <ion-icon *ngIf=\"doneIcon\" name=\"checkmark\"></ion-icon>\n          </button>\n\n        </ion-buttons>\n\n      </ion-navbar>\n\n      <ion-calendar-week\n        [color]=\"_color\"\n        [weekArray]=\"weekdays\"\n        [weekStart]=\"weekStart\">\n      </ion-calendar-week>\n\n    </ion-header>\n\n    <ion-content (ionScroll)=\"onScroll($event)\" class=\"calendar-page\"\n                 [ngClass]=\"{'multi-selection': options.pickMode === 'multi'}\">\n\n      <div #months>\n        <ng-template ngFor let-month [ngForOf]=\"calendarMonths\" [ngForTrackBy]=\"trackByTime\" let-i=\"index\">\n          <div class=\"month-box\" [attr.id]=\"'month-' + i\">\n            <h4 class=\"text-center month-title\">{{month.original.date | date:monthFormatFilterStr}}</h4>\n            <ion-calendar-month [month]=\"month\"\n                                [pickMode]=\"options.pickMode\"\n                                [isSaveHistory]=\"isSaveHistory\"\n                                [id]=\"_id\"\n                                [color]=\"_color\"\n                                (onChange)=\"onChange($event)\"\n                                [(ngModel)]=\"datesTemp\">\n\n            </ion-calendar-month>\n          </div>\n        </ng-template>\n      \n      </div>\n\n      <ion-infinite-scroll (ionInfinite)=\"nextMonth($event)\">\n        <ion-infinite-scroll-content></ion-infinite-scroll-content>\n      </ion-infinite-scroll>\n\n    </ion-content>\n  "}]}],"members":{"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"ionic-angular","name":"Content"}]}]}],"monthsEle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["months"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"ionic-angular","name":"NavParams"},{"__symbolic":"reference","module":"ionic-angular","name":"ViewController"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"../services/calendar.service","name":"CalendarService"}]}],"ionViewDidLoad":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"initDefaultDate":[{"__symbolic":"method"}],"findCssClass":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}],"done":[{"__symbolic":"method"}],"canDone":[{"__symbolic":"method"}],"getHistory":[{"__symbolic":"method"}],"createYearPicker":[{"__symbolic":"method"}],"nextMonth":[{"__symbolic":"method"}],"backwardsMonth":[{"__symbolic":"method"}],"scrollToDefaultDate":[{"__symbolic":"method"}],"onScroll":[{"__symbolic":"method"}],"findInitMonthNumber":[{"__symbolic":"method"}],"changedYearSelection":[{"__symbolic":"method"}],"_getDayTime":[{"__symbolic":"method"}]}}}}]

dist/components/month.component.d.ts

@@ -1,6 +0,6 @@
-import { ChangeDetectorRef, EventEmitter, OnInit } from '@angular/core';
+import { ChangeDetectorRef, EventEmitter, AfterViewInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { CalendarDay, CalendarMonth, PickMode } from '../calendar.model';
 export declare const MONTH_VALUE_ACCESSOR: any;
-export declare class MonthComponent implements ControlValueAccessor, OnInit {
+export declare class MonthComponent implements ControlValueAccessor, AfterViewInit {
     ref: ChangeDetectorRef;
@@ -14,9 +14,11 @@ month: CalendarMonth;
     _date: Array<CalendarDay | null>;
+    _isInit: boolean;
     _onChanged: Function;
     _onTouched: Function;
     constructor(ref: ChangeDetectorRef);
-    ngOnInit(): void;
+    ngAfterViewInit(): void;
     writeValue(obj: any): void;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
+    trackByTime(index: number, item: any): any;
     isEndSelection(day: CalendarDay): boolean;
@@ -23,0 +25,0 @@ isBetween(day: CalendarDay): boolean;

dist/components/month.component.js

@@ -1,2 +0,2 @@
-import { Component, ChangeDetectorRef, Input, Output, EventEmitter, forwardRef } from '@angular/core';
+import { Component, ChangeDetectorRef, Input, Output, EventEmitter, forwardRef, } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -13,9 +13,12 @@ export var MONTH_VALUE_ACCESSOR = {
         this.onChange = new EventEmitter();
-        this._date = [];
+        this._date = [null, null];
+        this._isInit = false;
     }
-    MonthComponent.prototype.ngOnInit = function () {
-        this._date = [];
+    MonthComponent.prototype.ngAfterViewInit = function () {
+        this._isInit = true;
     };
     MonthComponent.prototype.writeValue = function (obj) {
-        this._date = obj;
+        if (Array.isArray(obj)) {
+            this._date = obj;
+        }
     };
@@ -28,7 +31,10 @@ MonthComponent.prototype.registerOnChange = function (fn) {
     };
+    MonthComponent.prototype.trackByTime = function (index, item) {
+        return item ? item.time : index;
+    };
     MonthComponent.prototype.isEndSelection = function (day) {
         if (!day)
-            return;
-        if (this.pickMode !== 'range' || !Array.isArray(this._date) || this._date[1] === null) {
             return false;
+        if (this.pickMode !== 'range' || !this._isInit || this._date[1] === null) {
+            return false;
         }
@@ -39,20 +45,11 @@ return this._date[1].time === day.time;
         if (!day)
-            return;
-        if (this.pickMode !== 'range' || !Array.isArray(this._date)) {
             return false;
-        }
-        var start = 0;
-        var end = 0;
-        if (this._date[0] === null) {
+        if (this.pickMode !== 'range' || !this._isInit) {
             return false;
         }
-        else {
-            start = this._date[0].time;
-        }
-        if (this._date[1] === null) {
+        if (this._date[0] === null || this._date[1] === null) {
             return false;
         }
-        else {
-            end = this._date[1].time;
-        }
+        var start = this._date[0].time;
+        var end = this._date[1].time;
         return day.time < end && day.time > start;
@@ -62,5 +59,5 @@ };
         if (!day)
-            return;
-        if (this.pickMode !== 'range' || !Array.isArray(this._date) || this._date[0] === null) {
             return false;
+        if (this.pickMode !== 'range' || !this._isInit || this._date[0] === null) {
+            return false;
         }
@@ -89,3 +86,2 @@ return this._date[0].time === day.time && this._date[1] !== null;
         item.selected = true;
-        this.ref.detectChanges();
         if (this.pickMode === 'single') {
@@ -99,3 +95,2 @@ this._date[0] = item;
                 this._date[0] = item;
-                this.ref.detectChanges();
             }
@@ -110,3 +105,2 @@ else if (this._date[1] === null) {
                 }
-                this.ref.detectChanges();
             }
@@ -118,2 +112,3 @@ else {
             this.onChange.emit(this._date);
+            return;
         }
@@ -130,3 +125,2 @@ if (this.pickMode === 'multi') {
         }
-        this.ref.detectChanges();
     };
@@ -140,3 +134,3 @@ return MonthComponent;
                 providers: [MONTH_VALUE_ACCESSOR],
-                template: "\n    <div [class]=\"color\">\n      <div *ngIf=\"pickMode !== 'range'\">\n        <div class=\"days-box\">\n          <div class=\"days\" *ngFor=\"let day of month.days\">\n            <button [class]=\"'days-btn ' + day.cssClass\"\n                    *ngIf=\"day\"\n                    [class.today]=\"day.isToday\"\n                    (click)=\"onSelected(day)\"\n                    [class.marked]=\"day.marked\"\n                    [class.on-selected]=\"isSelected(day.time)\"\n                    [disabled]=\"day.disable\">\n              <p>{{day.title}}</p>\n              <small *ngIf=\"day.subTitle\">{{day?.subTitle}}</small>\n            </button>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"pickMode === 'range'\">\n        <div class=\"days-box\">\n          <div class=\"days\"\n               *ngFor=\"let day of month.days\"\n               [class.startSelection]=\"isStartSelection(day)\"\n               [class.endSelection]=\"isEndSelection(day)\"\n               [class.between]=\"isBetween(day)\">\n            <button [class]=\"'days-btn ' + day.cssClass\"\n                    *ngIf=\"day\"\n                    [class.today]=\"day.isToday\"\n                    (click)=\"onSelected(day)\"\n                    [class.marked]=\"day.marked\"\n                    [class.on-selected]=\"isSelected(day.time)\"\n                    [disabled]=\"day.disable\">\n              <p>{{day.title}}</p>\n              <small *ngIf=\"day.subTitle\">{{day?.subTitle}}</small>\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  ",
+                template: "\n    <div [class]=\"color\">\n      <ng-template [ngIf]=\"pickMode !== 'range'\" [ngIfElse]=\"rangeBox\">\n        <div class=\"days-box\">\n          <ng-template ngFor let-day [ngForOf]=\"month.days\" [ngForTrackBy]=\"trackByTime\">\n            <div class=\"days\">\n              <ng-container *ngIf=\"day\">\n                <button [class]=\"'days-btn ' + day.cssClass\"\n                        [class.today]=\"day.isToday\"\n                        (click)=\"onSelected(day)\"\n                        [class.marked]=\"day.marked\"\n                        [class.on-selected]=\"isSelected(day.time)\"\n                        [disabled]=\"day.disable\">\n                  <p>{{day.title}}</p>\n                  <small *ngIf=\"day.subTitle\">{{day?.subTitle}}</small>\n                </button>\n              </ng-container>\n            </div>\n          </ng-template>\n        </div>\n      </ng-template>\n\n      <ng-template #rangeBox>\n        <div class=\"days-box\">\n          <ng-template ngFor let-day [ngForOf]=\"month.days\" [ngForTrackBy]=\"trackByTime\">\n            <div class=\"days\"\n                 [class.startSelection]=\"isStartSelection(day)\"\n                 [class.endSelection]=\"isEndSelection(day)\"\n                 [class.between]=\"isBetween(day)\">\n              <ng-container *ngIf=\"day\">\n                <button [class]=\"'days-btn ' + day.cssClass\"\n                        [class.today]=\"day.isToday\"\n                        (click)=\"onSelected(day)\"\n                        [class.marked]=\"day.marked\"\n                        [class.on-selected]=\"isSelected(day.time)\"\n                        [disabled]=\"day.disable\">\n                  <p>{{day.title}}</p>\n                  <small *ngIf=\"day.subTitle\">{{day?.subTitle}}</small>\n                </button>\n              </ng-container>\n\n            </div>\n          </ng-template>\n        </div>\n      </ng-template>\n    </div>\n  ",
             },] },
@@ -143,0 +137,0 @@ ];

dist/components/month.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"MONTH_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"MonthComponent"},"multi":true},"MonthComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ion-calendar-month","providers":[{"__symbolic":"reference","name":"MONTH_VALUE_ACCESSOR"}],"template":"\n    <div [class]=\"color\">\n      <div *ngIf=\"pickMode !== 'range'\">\n        <div class=\"days-box\">\n          <div class=\"days\" *ngFor=\"let day of month.days\">\n            <button [class]=\"'days-btn ' + day.cssClass\"\n                    *ngIf=\"day\"\n                    [class.today]=\"day.isToday\"\n                    (click)=\"onSelected(day)\"\n                    [class.marked]=\"day.marked\"\n                    [class.on-selected]=\"isSelected(day.time)\"\n                    [disabled]=\"day.disable\">\n              <p>{{day.title}}</p>\n              <small *ngIf=\"day.subTitle\">{{day?.subTitle}}</small>\n            </button>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"pickMode === 'range'\">\n        <div class=\"days-box\">\n          <div class=\"days\"\n               *ngFor=\"let day of month.days\"\n               [class.startSelection]=\"isStartSelection(day)\"\n               [class.endSelection]=\"isEndSelection(day)\"\n               [class.between]=\"isBetween(day)\">\n            <button [class]=\"'days-btn ' + day.cssClass\"\n                    *ngIf=\"day\"\n                    [class.today]=\"day.isToday\"\n                    (click)=\"onSelected(day)\"\n                    [class.marked]=\"day.marked\"\n                    [class.on-selected]=\"isSelected(day.time)\"\n                    [disabled]=\"day.disable\">\n              <p>{{day.title}}</p>\n              <small *ngIf=\"day.subTitle\">{{day?.subTitle}}</small>\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  "}]}],"members":{"month":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"pickMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"isSaveHistory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"isEndSelection":[{"__symbolic":"method"}],"isBetween":[{"__symbolic":"method"}],"isStartSelection":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"onSelected":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"MONTH_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"MonthComponent"},"multi":true},"MonthComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ion-calendar-month","providers":[{"__symbolic":"reference","name":"MONTH_VALUE_ACCESSOR"}],"template":"\n    <div [class]=\"color\">\n      <div *ngIf=\"pickMode !== 'range'\">\n        <div class=\"days-box\">\n          <div class=\"days\" *ngFor=\"let day of month.days\">\n            <button [class]=\"'days-btn ' + day.cssClass\"\n                    *ngIf=\"day\"\n                    [class.today]=\"day.isToday\"\n                    (click)=\"onSelected(day)\"\n                    [class.marked]=\"day.marked\"\n                    [class.on-selected]=\"isSelected(day.time)\"\n                    [disabled]=\"day.disable\">\n              <p>{{day.title}}</p>\n              <small *ngIf=\"day.subTitle\">{{day?.subTitle}}</small>\n            </button>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"pickMode === 'range'\">\n        <div class=\"days-box\">\n          <div class=\"days\"\n               *ngFor=\"let day of month.days\"\n               [class.startSelection]=\"isStartSelection(day)\"\n               [class.endSelection]=\"isEndSelection(day)\"\n               [class.between]=\"isBetween(day)\">\n            <button [class]=\"'days-btn ' + day.cssClass\"\n                    *ngIf=\"day\"\n                    [class.today]=\"day.isToday\"\n                    (click)=\"onSelected(day)\"\n                    [class.marked]=\"day.marked\"\n                    [class.on-selected]=\"isSelected(day.time)\"\n                    [disabled]=\"day.disable\">\n              <p>{{day.title}}</p>\n              <small *ngIf=\"day.subTitle\">{{day?.subTitle}}</small>\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  "}]}],"members":{"month":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"pickMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"isSaveHistory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"isEndSelection":[{"__symbolic":"method"}],"isBetween":[{"__symbolic":"method"}],"isStartSelection":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"onSelected":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"MONTH_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"MonthComponent"},"multi":true},"MonthComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ion-calendar-month","providers":[{"__symbolic":"reference","name":"MONTH_VALUE_ACCESSOR"}],"template":"\n    <div [class]=\"color\">\n      <ng-template [ngIf]=\"pickMode !== 'range'\" [ngIfElse]=\"rangeBox\">\n        <div class=\"days-box\">\n          <ng-template ngFor let-day [ngForOf]=\"month.days\" [ngForTrackBy]=\"trackByTime\">\n            <div class=\"days\">\n              <ng-container *ngIf=\"day\">\n                <button [class]=\"'days-btn ' + day.cssClass\"\n                        [class.today]=\"day.isToday\"\n                        (click)=\"onSelected(day)\"\n                        [class.marked]=\"day.marked\"\n                        [class.on-selected]=\"isSelected(day.time)\"\n                        [disabled]=\"day.disable\">\n                  <p>{{day.title}}</p>\n                  <small *ngIf=\"day.subTitle\">{{day?.subTitle}}</small>\n                </button>\n              </ng-container>\n            </div>\n          </ng-template>\n        </div>\n      </ng-template>\n\n      <ng-template #rangeBox>\n        <div class=\"days-box\">\n          <ng-template ngFor let-day [ngForOf]=\"month.days\" [ngForTrackBy]=\"trackByTime\">\n            <div class=\"days\"\n                 [class.startSelection]=\"isStartSelection(day)\"\n                 [class.endSelection]=\"isEndSelection(day)\"\n                 [class.between]=\"isBetween(day)\">\n              <ng-container *ngIf=\"day\">\n                <button [class]=\"'days-btn ' + day.cssClass\"\n                        [class.today]=\"day.isToday\"\n                        (click)=\"onSelected(day)\"\n                        [class.marked]=\"day.marked\"\n                        [class.on-selected]=\"isSelected(day.time)\"\n                        [disabled]=\"day.disable\">\n                  <p>{{day.title}}</p>\n                  <small *ngIf=\"day.subTitle\">{{day?.subTitle}}</small>\n                </button>\n              </ng-container>\n\n            </div>\n          </ng-template>\n        </div>\n      </ng-template>\n    </div>\n  "}]}],"members":{"month":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"pickMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"isSaveHistory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"trackByTime":[{"__symbolic":"method"}],"isEndSelection":[{"__symbolic":"method"}],"isBetween":[{"__symbolic":"method"}],"isStartSelection":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"onSelected":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"MONTH_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"MonthComponent"},"multi":true},"MonthComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ion-calendar-month","providers":[{"__symbolic":"reference","name":"MONTH_VALUE_ACCESSOR"}],"template":"\n    <div [class]=\"color\">\n      <ng-template [ngIf]=\"pickMode !== 'range'\" [ngIfElse]=\"rangeBox\">\n        <div class=\"days-box\">\n          <ng-template ngFor let-day [ngForOf]=\"month.days\" [ngForTrackBy]=\"trackByTime\">\n            <div class=\"days\">\n              <ng-container *ngIf=\"day\">\n                <button [class]=\"'days-btn ' + day.cssClass\"\n                        [class.today]=\"day.isToday\"\n                        (click)=\"onSelected(day)\"\n                        [class.marked]=\"day.marked\"\n                        [class.on-selected]=\"isSelected(day.time)\"\n                        [disabled]=\"day.disable\">\n                  <p>{{day.title}}</p>\n                  <small *ngIf=\"day.subTitle\">{{day?.subTitle}}</small>\n                </button>\n              </ng-container>\n            </div>\n          </ng-template>\n        </div>\n      </ng-template>\n\n      <ng-template #rangeBox>\n        <div class=\"days-box\">\n          <ng-template ngFor let-day [ngForOf]=\"month.days\" [ngForTrackBy]=\"trackByTime\">\n            <div class=\"days\"\n                 [class.startSelection]=\"isStartSelection(day)\"\n                 [class.endSelection]=\"isEndSelection(day)\"\n                 [class.between]=\"isBetween(day)\">\n              <ng-container *ngIf=\"day\">\n                <button [class]=\"'days-btn ' + day.cssClass\"\n                        [class.today]=\"day.isToday\"\n                        (click)=\"onSelected(day)\"\n                        [class.marked]=\"day.marked\"\n                        [class.on-selected]=\"isSelected(day.time)\"\n                        [disabled]=\"day.disable\">\n                  <p>{{day.title}}</p>\n                  <small *ngIf=\"day.subTitle\">{{day?.subTitle}}</small>\n                </button>\n              </ng-container>\n\n            </div>\n          </ng-template>\n        </div>\n      </ng-template>\n    </div>\n  "}]}],"members":{"month":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"pickMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"isSaveHistory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"trackByTime":[{"__symbolic":"method"}],"isEndSelection":[{"__symbolic":"method"}],"isBetween":[{"__symbolic":"method"}],"isStartSelection":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"onSelected":[{"__symbolic":"method"}]}}}}]

dist/index.d.ts

 export * from './calendar.model';
-export * from './components/index';
+export { CalendarModal } from "./components/calendar.modal";
+export { CalendarWeekComponent } from "./components/calendar-week.component";
+export { MonthComponent } from "./components/month.component";
+export { CalendarComponent } from "./components/calendar.component";
 export { CalendarModule } from './calendar.module';
 export { CalendarController } from './calendar.controller';

dist/index.js

 export * from './calendar.model';
-export * from './components/index';
+export { CalendarModal } from "./components/calendar.modal";
+export { CalendarWeekComponent } from "./components/calendar-week.component";
+export { MonthComponent } from "./components/month.component";
+export { CalendarComponent } from "./components/calendar.component";
 export { CalendarModule } from './calendar.module';
 export { CalendarController } from './calendar.controller';
 //# sourceMappingURL=index.js.map

dist/index.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./calendar.model"},{"from":"./components/index"},{"from":"./calendar.module","export":["CalendarModule"]},{"from":"./calendar.controller","export":["CalendarController"]}]},{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./calendar.model"},{"from":"./components/index"},{"from":"./calendar.module","export":["CalendarModule"]},{"from":"./calendar.controller","export":["CalendarController"]}]}]
+[{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./calendar.model"},{"from":"./components/calendar.modal","export":["CalendarModal"]},{"from":"./components/calendar-week.component","export":["CalendarWeekComponent"]},{"from":"./components/month.component","export":["MonthComponent"]},{"from":"./components/calendar.component","export":["CalendarComponent"]},{"from":"./calendar.module","export":["CalendarModule"]},{"from":"./calendar.controller","export":["CalendarController"]}]},{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./calendar.model"},{"from":"./components/calendar.modal","export":["CalendarModal"]},{"from":"./components/calendar-week.component","export":["CalendarWeekComponent"]},{"from":"./components/month.component","export":["MonthComponent"]},{"from":"./components/calendar.component","export":["CalendarComponent"]},{"from":"./calendar.module","export":["CalendarModule"]},{"from":"./calendar.controller","export":["CalendarController"]}]}]

dist/services/calendar.service.d.ts

@@ -1,10 +0,10 @@
-import { CalendarOriginal, CalendarDay, CalendarMonth, CalendarControllerOptions, CalendarResult } from '../calendar.model';
+import { CalendarOriginal, CalendarDay, CalendarMonth, CalendarModalOptions, CalendarResult } from '../calendar.model';
 export declare class CalendarService {
     constructor();
-    safeOpt(calendarOptions: any): CalendarControllerOptions;
+    safeOpt(calendarOptions: any): CalendarModalOptions;
     createOriginalCalendar(time: number): CalendarOriginal;
-    findDayConfig(day: any, opt: CalendarControllerOptions): any;
-    createCalendarDay(time: number, opt: CalendarControllerOptions): CalendarDay;
-    createCalendarMonth(original: CalendarOriginal, opt: CalendarControllerOptions): CalendarMonth;
-    createMonthsByPeriod(startTime: number, monthsNum: number, opt: CalendarControllerOptions): Array<CalendarMonth>;
+    findDayConfig(day: any, opt: CalendarModalOptions): any;
+    createCalendarDay(time: number, opt: CalendarModalOptions): CalendarDay;
+    createCalendarMonth(original: CalendarOriginal, opt: CalendarModalOptions): CalendarMonth;
+    createMonthsByPeriod(startTime: number, monthsNum: number, opt: CalendarModalOptions): Array<CalendarMonth>;
     getHistory(id: string | number): Array<CalendarDay | null>;
@@ -11,0 +11,0 @@ savedHistory(savedDates: Array<CalendarDay | null>, id: string | number): void;

package.json

 {
   "name": "ion2-calendar",
-  "version": "2.0.0-beta.7",
+  "version": "2.0.0",
   "description": "A date picker for ionic2 ",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

README-CN.md

@@ -1,23 +0,30 @@
-# ion2-calendar
+# 📅 ion2-calendar
 
 [![Dependency Status](https://david-dm.org/HsuanXyz/ion2-calendar.svg)](https://david-dm.org/HsuanXyz/ion2-calendar)
-[![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][downloads-url] [![MIT License][license-image]][license-url]
+[![NPM version][npm-image]][npm-url]
+[![Downloads][downloads-image]][downloads-url]
+[![MIT License][license-image]][license-url]
 
-一个可配置与可选择范围日期的ionic2日历组件
+![date](https://github.com/HsuanXyz/hsuanxyz.github.io/blob/master/assets/ion2-calendar/calendar.png?raw=true)
 
-[![NPM](https://nodei.co/npm/ion2-calendar.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/ion2-calendar/)
+- 支持日期范围
+- 支持多选
+- 支持HTML组件
+- 可按周数禁用日期
+- 可按天设置事件
+- 支持本地化
+- Material 风格
 
-![date](https://github.com/HsuanXyz/hsuanxyz.github.io/blob/master/assets/ion2-calendar/calendar-gif.gif?raw=true)
+# Demo
+live demo [click me](https://hsuanxyz.github.io/demo/ion2-calendar/).
 
-
 # 使用
 ### 安装
-`$ npm install ion2-calendar --save`
-#### 如果你没有安装 moment
-`$ npm install moment --save`
+`$ npm install ion2-calendar moment --save`
+
 ### 引入模块
 
-```javascript
-import { NgModule, ErrorHandler } from '@angular/core';
-import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
+```typescript
+import { NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from 'ionic-angular';
 import { MyApp } from './app.component';
@@ -40,13 +47,48 @@ ...
     ...
-  ],
-  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
+  ]
 })
 export class AppModule {}
 ```
-### 使用
-```javascript
+
+# HTML 组件模式
+
+### 基本
+
+```html
+<ion-calendar [(ngModel)]="date"
+              (onChange)="onChange($event)"
+              [format]="'YYYY-MM-DD'">
+</ion-calendar>
+```
+
+```typescript
 import { Component } from '@angular/core';
 
-import {CalendarController} from "ion2-calendar/dist";
+@Component({
+  selector: 'page-home',
+  templateUrl: 'home.html'
+})
+export class HomePage {
+  date: string;
+  constructor() { }
 
+  onChange($event) {
+    console.log($event);
+  }
+  ...
+}
+```
+
+### 日期范围
+
+```html
+<ion-calendar [(ngModel)]="dateRange"
+              [options]="optionsRange"
+              [format]="'YYYY-MM-DD'">
+</ion-calendar>
+```
+
+```typescript
+import { Component } from '@angular/core';
+import { CalendarComponentOptions } from 'ion2-calendar'
 @Component({
@@ -57,14 +99,90 @@ selector: 'page-home',
 export class HomePage {
+  dateRange: { from: string; to: string; };
+  optionsRange: CalendarComponentOptions = {
+    pickMode: 'range'
+  };
+  constructor() { }
+  ...
+}
+```
 
+### 日期多选
+
+```html
+<ion-calendar [(ngModel)]="dateMulti"
+              [options]="optionsMulti"
+              [format]="'YYYY-MM-DD'">
+</ion-calendar>
+```
+
+```typescript
+import { Component } from '@angular/core';
+import { CalendarComponentOptions } from 'ion2-calendar'
+@Component({
+  selector: 'page-home',
+  templateUrl: 'home.html'
+})
+export class HomePage {
+  dateMulti: string[];
+  optionsMulti: CalendarComponentOptions = {
+    pickMode: 'multi'
+  };
+  constructor() { }
+  ...
+}
+```
+
+### 组件属性
+| Name            | Type          | Default        | Description |
+| --------------- | ------------- | -------------- | ----------- |
+| options         | CalendarComponentOptions| null | 配置选项对象     |
+| format          | string        | 'YYYY-MM-DD'   | 格式 |
+
+### CalendarComponentOptions
+| Name            | Type          | Default       | Description |
+| --------------- | ------------- | ------------- | ----------- |
+| from            | Date          | `new Date()`  | 开始日期  |
+| to              | Date          |  0 (Infinite) | 结束日期    |
+| color           | string        | `'primary'`   | 颜色 'primary', 'secondary', 'danger', 'light', 'dark' |
+| pickMode         | string       | `single`        | 模式 'multi', 'range', 'single'     |
+| disableWeeks | Array<number> | `[]`          | 按周数禁用 (0-6)                   |
+| monthFormat      | string        | `'MMM yyyy'`  | 标题格式  |
+| weekdays   | Array<string> | `['S', 'M', 'T', 'W', 'T', 'F', 'S']` | 每周显示文本 |
+| weekStart    | number        | `0` (0 or 1)           | 每周从星期几开始 |
+| daysConfig      | Array<***DaysConfig***> | `[]` | 按天配置 |
+
+# 模态框模式
+
+### 基本 
+
+引入 ion2-calendar 到你的组件控制器。
+
+```typescript
+import { Component } from '@angular/core';
+import { ModalController } from 'ionic-angular';
+import { CalendarModal, CalendarModalOptions, DayConfig } from "ion2-calendar";
+
+@Component({
+  selector: 'page-home',
+  templateUrl: 'home.html'
+})
+export class HomePage {
+
   constructor(
-    public calendarCtrl: CalendarController
-  ) {
+    public modalCtrl: ModalController,
+  ) { }
 
-  }
+  openCalendar() {
+    const options: CalendarModalOptions = {
+      title: 'BASIC',
+    };
+    let myCalendar =  this.modalCtrl.create(CalendarModal, {
+      options: options
+    });
 
-  openCalendar(){
-    this.calendarCtrl.openCalendar({
-      from:new Date()
+    myCalendar.present();
+
+    myCalendar.onDidDismiss(date => {
+      console.log(date);
     })
-    .then( res => { console.log(res) } );
   }
@@ -75,108 +193,122 @@
 
-# 演示
-[DEMO](https://hsuanxyz.github.io/demo/ion2-calendar/)
-### 选择单个日期
-![date](https://github.com/HsuanXyz/hsuanxyz.github.io/blob/master/assets/ion2-calendar/%E5%8D%95%E9%80%89%E6%97%A5%E6%9C%9F.gif?raw=true)
+### 日期范围
 
+设置 pickMode 为 'range'.
+
 ```typescript
- basic() {
-    this.calendarCtrl.openCalendar({
-      title:'basic demo',
-    })
-      .then( (res:any) => { console.log(res) })
-      .catch( () => {} )
+    openCalendar() {
+        const options: CalendarModalOptions = {
+          pickMode: 'range',
+          title: 'RANGE'
+        };
+    
+        let myCalendar = this.modalCtrl.create(CalendarModal, {
+          options: options
+        });
+    
+        myCalendar.present();
+    
+        myCalendar.onDidDismiss(date => {
+          console.log(date);
+        });
   }
 ```
 
-### 选择范围日期
-![date range](https://github.com/HsuanXyz/hsuanxyz.github.io/blob/master/assets/ion2-calendar/%E5%A4%9A%E9%80%89%E6%97%A5%E6%9C%9F.gif?raw=true)
+### 多选日期
 
+设置 pickMode 为 'multi'。
+
 ```typescript
-dateRange() {
-    this.calendarCtrl.openCalendar({
-      isRadio: false,
-    })
-      .then( (res:any) => { console.log(res) })
-      .catch( () => {} )
-  }
+    openCalendar() {
+        const options = {
+          pickMode: 'multi',
+          title: 'MULTI'
+        };
+    
+        let myCalendar =  this.modalCtrl.create(CalendarModal, {
+          options: options
+        });
+    
+        myCalendar.present();
+    
+        myCalendar.onDidDismiss(date => {
+          console.log(date);
+        })
+      }
 ```
 
-### 按星期禁用
-![disable weekdays](https://github.com/HsuanXyz/hsuanxyz.github.io/blob/master/assets/ion2-calendar/%E7%A6%81%E7%94%A8%E6%98%9F%E6%9C%9F.gif?raw=true)
+### 禁用周
 
+使用周索引 例子: `[0, 6]` 禁用周末.
+
 ```typescript
-  disableWeekdays() {
-    this.calendarCtrl.openCalendar({
-      disableWeekdays:[0,6]
-    })
-      .then( (res:any) => { console.log(res) })
-      .catch( () => {} )
+  openCalendar() {
+    const options: CalendarModalOptions = {
+      disableWeeks: [0, 6]
+    };
+
+    let myCalendar =  this.modalCtrl.create(CalendarModal, {
+      options: options
+    });
+
+    myCalendar.present();
+
+    myCalendar.onDidDismiss(date => {
+      console.log(date);
+    });
   }
 ```
 
-### 设置星期标题
-![weekdays title](https://github.com/HsuanXyz/hsuanxyz.github.io/blob/master/assets/ion2-calendar/%E8%87%AA%E5%AE%9A%E4%B9%89%E5%91%A8%E6%A0%87%E9%A2%98.gif?raw=true)
-### 设置月份标题
-![month title](https://github.com/HsuanXyz/hsuanxyz.github.io/blob/master/assets/ion2-calendar/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9C%88%E4%BB%BD%E6%A0%87%E9%A2%98.gif?raw=true)
+### 本地化
 
 ```typescript
- settingDisplay() {
-    this.calendarCtrl.openCalendar({
-      monthTitle:' MMMM-yy ',
-      weekdaysTitle:["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
-      closeLabel:''
-    })
-      .then( (res:any) => { console.log(res) })
-      .catch( () => {} )
+ openCalendar() {
+    const options: CalendarModalOptions = {
+      monthFormat: 'yyyy 年 MM 月 ',
+      weekdays: ['天', '一', '二', '三', '四', '五', '六'],
+      weekStart: 1,
+      defaultDate: new Date()
+    };
+
+    let myCalendar =  this.modalCtrl.create(CalendarModal, {
+      options: options
+    });
+
+    myCalendar.present();
+
+    myCalendar.onDidDismiss(date => {
+      console.log(date);
+    });
   }
 ```
 
-### 按天配置
-![days config](https://github.com/HsuanXyz/hsuanxyz.github.io/blob/master/assets/ion2-calendar/%E8%87%AA%E5%AE%9A%E4%B9%89%E5%A4%A9.gif?raw=true)
+### Days config
 
-```typescript
-daysConfig() {
+单独设置某一天或者多天
 
-    let _daysConfig = [
-      {
-        date:new Date(2017,0,1),
-        subTitle:'New Year\'s',
-        marked:true
-      },
-      {
-        date:new Date(2017,1,14),
-        subTitle:'Valentine\'s',
-        disable:true
-      },
-      {
-        date:new Date(2017,3,1),
-        subTitle:'April Fools',
-        marked:true
-      },
-      {
-        date:new Date(2017,3,7),
-        subTitle:'World Health',
-        marked:true
-      },
-      {
-        date:new Date(2017,4,31),
-        subTitle:'No-Smoking',
-        marked:true
-      },
-      {
-        date:new Date(2017,5,1),
-        subTitle:'Children\'s',
-        marked:true
-      }
-    ];
+```javascript
+openCalendar() {
+    let _daysConfig: DayConfig[] = [];
+    for (let i = 0; i < 31; i++) {
+      _daysConfig.push({
+        date: new Date(2017, 0, i + 1),
+        subTitle: `$${i + 1}`
+      })
+    }
 
-    _daysConfig.push(...this.days);
+    const options: CalendarModalOptions = {
+      from: new Date(2017, 0, 1),
+      to: new Date(2017, 11.1),
+      daysConfig: _daysConfig
+    };
 
-    this.calendarCtrl.openCalendar({
-      from: new Date(2017,0,1),
-      to  : new Date(2017,11.1),
-      daysConfig:_daysConfig
-    })
-      .then( (res:any) => { console.log(res) })
-      .catch( () => {} )
+    let myCalendar =  this.modalCtrl.create(CalendarModal, {
+      options: options
+    });
+
+    myCalendar.present();
+
+    myCalendar.onDidDismiss(date => {
+      console.log(date);
+    });
   }
@@ -186,69 +318,83 @@ ```
 # API
-## openCalendar(Options,ModalOptions)
+
+## 模态框控制器选项
+
 ### Options
-| 参数名            | 类型          | 默认       | 描述 |
+| Name            | Type          | Default       | Description |
 | --------------- | ------------- | ------------- | ----------- |
-| from            | Date          | `new Date()`  | 开始时间     |
-| to              | Date          |  0 (Infinite) | 结束时间     |
-| title           | string        | `'Calendar'`  | 标题         |
-| defaultDate     | Date          | 无          | 让视图滚动到默认日期|
-| cssClass        | string        | `''`          | 自定义css类，多个用空格分开 |
-| isRadio         | boolean       | `true`        | 设置是否单选 ，如果为false则选择日期范围    |
-| canBackwardsSelected        | boolean        | `false`        | 能否向后选择 |
-| disableWeekdays | Array<number> | `[]`          | 需要禁用的星期数 (0-6，重0开始)                   |
-| closeLabel      | string        | `cancel`      | 取消按钮文字，可以为空 |
-| monthTitle      | string        | `'MMM yyyy'`  | 设置月份显示格式  |
-| weekdaysTitle   | Array<string> | `"Di_Lu_Ma_Me_Je_Ve_Sa".split("_")` | 星期显示格式 |
-| weekStartDay    | number        | `0` (0 or 1)           | 设置周的开始 |
+| from            | Date          | `new Date()`  | 开始日期  |
+| to              | Date          |  0 (Infinite) | 结束日期    |
+| title           | string        | `'CALENDAR'`  | 标题       |
+| color           | string        | `'primary'`   | 颜色 'primary', 'secondary', 'danger', 'light', 'dark' |
+| defaultScrollTo | Date          | none          | 使进入视图是默认滚动到指定日期位置 |
+| defaultDate     | Date          | none          | 默认选择的日期，适用于 'single' 模式 |
+| defaultDates    | Array<Date>   | none          | 默认选择的多个日期，适用于 'multi' 模式  |
+| defaultDateRange | { from: Date, to: Date }  | none  | 默认选择的日期范围，适用于 'range' 模式 |
+| cssClass        | string        | `''`          | 将自定义 class 插入 模态框顶级，多个用逗号分割|
+| canBackwardsSelected        | boolean        | `false`        | 能否向后滚动 |
+| pickMode         | string       | `single`        | 'multi', 'range', 'single'     |
+| disableWeeks | Array<number> | `[]`          | 按周数禁用 (0-6)                   |
+| closeLabel      | string        | `CANCEL`      | 关闭按钮标题 |
+| doneLabel      | string        | `DONE`      | 完成按钮标题 |
+| closeIcon      | boolean        | `false`      | 使用关闭图标按钮 |
+| doneIcon      | boolean        | `false`      | 使用完成图标按钮  |
+| monthFormat      | string        | `'MMM yyyy'`  | 月份显示格式  |
+| weekdays   | Array<string> | `['S', 'M', 'T', 'W', 'T', 'F', 'S']` | 星期标题 |
+| weekStart    | number        | `0` (0 or 1)           | 设置每周开始时间 |
 | daysConfig      | Array<***DaysConfig***> | `[]` | 按天配置 |
+
 #### DaysConfig
-| 参数名          | 类型          | 默认  | 描述     |
+| Name          | Type          | Default  | Description
 | ------------- | ------------- | -------- | --------------- |
-| cssClass      | string        | `''`     | 用空格隔开|
-| date          | Date          | 必选 | 需要配置的天数时间对象 |
-| marked        | boolean       | false    | 是否高亮显示 |
-| disable       | boolean       | false    | 是否禁用         |
-| title         | string        | none     | 这天的标题 如"今天"      |
-| subTitle      | string        | none     | 这天的副标题 如 "春节" |
+| cssClass      | string        | `''`     | 多个用逗号分开|
+| date          | Date          | required | 被设置的那天 |
+| marked        | boolean       | false    | 高亮 |
+| disable       | boolean       | false    | 禁用         |
+| title         | string        | none     | 显示为什么 eg: `'今天'`      |
+| subTitle      | string        | none     | 副标题 eg: `新年` |
 
+### 返回字段
+| pickMode      | Type  |
+| ------------- | ----- |
+| single        | { date:  ***CalendarResult*** }  |
+| range         | { from: ***CalendarResult***, to: ***CalendarResult*** }  |
+| multi         | Array<***CalendarResult***>   |
 
-### ModalOptions
-| Name            | Type          | Default       | Description |
-| --------------- | ------------- | ------------- | ----------- |
-| showBackdrop            | boolean          | true  | 是否显示背景遮罩|
-| enableBackdropDismiss   | boolean          | true | 允许通过背景遮罩关闭 |
+### CalendarResult
+| Name          | Type    |
+| ------------- | ------- |
+| time          | number  |
+| unix          | number  |
+| dateObj       | Date    |
+| string        | string  |
+| years         | number  |
+| months        | number  |
+| date          | number  |
 
+# Contributing
 
+1. Fork it!
+2. Create your feature branch: git checkout -b my-new-feature
+3. Commit your changes: git commit -am 'Add some feature'
+4. Push to the branch: git push origin my-new-feature
+5. Submit a pull request :D
 
-### 输出 Promise
-| 参数名          | 类型  | 描述 |
-| ------------- | ----- | ----------- |
-| from          | ***Day***   | 如果 isRadio 为 false 的时候才会出现，这是用户选择的开始时间 |
-| to            | ***Day***   | 如果 isRadio 为 false 的时候才会出现，这是用户选择的结束时间    |
-| date          | ***Day***   | 如果 isRadio 为 true 的时候才会出现 ，这是用户选择的那天       |
-### Day
-| Name          | Type    | Description |
-| ------------- | ------- | ----------- |
-| time          | number  | 时间戳   |
-| marked        | boolean | 是否高亮   |
-| disable       | boolean | 是否禁用           |
-| title         | string  | 标题   |
-| subTitle      | string  | 副标题 |
+### Development
 
-### 待办事宜
-1. ~~添加样式设置~~
-2. ~~设置默日期，让视图滚动到默认日期~~
-3. 返回今天
-4. ~~向后滚动~~
-5. 设置周的开始日
-# 开发时的环境
+```bash
+cd ./dev
+npm install
+npm run ionic:serve
+# do something in ./dev/src/components/ion2-calendar
 ```
-Cordova CLI: 6.4.0
-Ionic Framework Version: 2.0.0
-Ionic CLI Version: 2.1.18
-Ionic App Lib Version: 2.1.9
-Ionic App Scripts Version: 1.1.3
+
+### Build
+
+```bash
+cd ./
+npm install
+npm run build
 ```
 
-[![NPM](https://nodei.co/npm-dl/ion2-calendar.png?months=3&height=1)](https://nodei.co/npm/ion2-calendar/)
+## 感谢阅读
 
@@ -255,0 +401,0 @@ [npm-url]: https://www.npmjs.com/package/ion2-calendar

README.md

@@ -1,29 +0,34 @@
-# ion2-calendar
+# 📅 ion2-calendar
 
 [![Dependency Status](https://david-dm.org/HsuanXyz/ion2-calendar.svg)](https://david-dm.org/HsuanXyz/ion2-calendar)
-[![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][downloads-url] [![MIT License][license-image]][license-url]
+[![NPM version][npm-image]][npm-url]
+[![Downloads][downloads-image]][downloads-url]
+[![MIT License][license-image]][license-url]
 
-A configurable and selectable range dates calendar component for ionic2
 
-[![NPM](https://nodei.co/npm/ion2-calendar.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/ion2-calendar/)
+![date](https://github.com/HsuanXyz/hsuanxyz.github.io/blob/master/assets/ion2-calendar/calendar.png?raw=true)
 
+> English is not my native language; please excuse typing errors.
 [中文文档](https://github.com/HsuanXyz/ion2-calendar/blob/master/README-CN.md)
 
+- Support date range.
+- Support multi date.
+- Support HTML components.
+- Disable weekdays or weekends.
+- Setting days event.
+- Setting localization.
+- Material design.
 
-![date](https://github.com/HsuanXyz/hsuanxyz.github.io/blob/master/assets/ion2-calendar/calendar-gif.gif?raw=true)
+# Demo
+live demo [click me](https://hsuanxyz.github.io/demo/ion2-calendar/).
 
-> English is not my native language; please excuse typing errors.
+# Usage
+### Installation
+`$ npm install ion2-calendar moment --save`
 
-### install
+### Import module
 
-  *if you do not use moment*
-`$ npm install moment --save`
-
-`$ npm install ion2-calendar --save`
-
-### import module
-
-```javascript
-import { NgModule, ErrorHandler } from '@angular/core';
-import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
+```typescript
+import { NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from 'ionic-angular';
 import { MyApp } from './app.component';
@@ -46,13 +51,48 @@ ...
     ...
-  ],
-  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
+  ]
 })
 export class AppModule {}
 ```
-### Use
-```javascript
+
+# Components Mode
+
+### Basic
+
+```html
+<ion-calendar [(ngModel)]="date"
+              (onChange)="onChange($event)"
+              [format]="'YYYY-MM-DD'">
+</ion-calendar>
+```
+
+```typescript
 import { Component } from '@angular/core';
 
-import {CalendarController} from "ion2-calendar/dist";
+@Component({
+  selector: 'page-home',
+  templateUrl: 'home.html'
+})
+export class HomePage {
+  date: string;
+  constructor() { }
 
+  onChange($event) {
+    console.log($event);
+  }
+  ...
+}
+```
+
+### Date range
+
+```html
+<ion-calendar [(ngModel)]="dateRange"
+              [options]="optionsRange"
+              [format]="'YYYY-MM-DD'">
+</ion-calendar>
+```
+
+```typescript
+import { Component } from '@angular/core';
+import { CalendarComponentOptions } from 'ion2-calendar'
 @Component({
@@ -63,14 +103,90 @@ selector: 'page-home',
 export class HomePage {
+  dateRange: { from: string; to: string; };
+  optionsRange: CalendarComponentOptions = {
+    pickMode: 'range'
+  };
+  constructor() { }
+  ...
+}
+```
 
+### Multi Date
+
+```html
+<ion-calendar [(ngModel)]="dateMulti"
+              [options]="optionsMulti"
+              [format]="'YYYY-MM-DD'">
+</ion-calendar>
+```
+
+```typescript
+import { Component } from '@angular/core';
+import { CalendarComponentOptions } from 'ion2-calendar'
+@Component({
+  selector: 'page-home',
+  templateUrl: 'home.html'
+})
+export class HomePage {
+  dateMulti: string[];
+  optionsMulti: CalendarComponentOptions = {
+    pickMode: 'multi'
+  };
+  constructor() { }
+  ...
+}
+```
+
+### Input Properties
+| Name            | Type          | Default        | Description |
+| --------------- | ------------- | -------------- | ----------- |
+| options         | CalendarComponentOptions| null | options     |
+| format          | string        | 'YYYY-MM-DD'   | value format |
+
+### CalendarComponentOptions
+| Name            | Type          | Default       | Description |
+| --------------- | ------------- | ------------- | ----------- |
+| from            | Date          | `new Date()`  | start date  |
+| to              | Date          |  0 (Infinite) | end date    |
+| color           | string        | `'primary'`   | 'primary', 'secondary', 'danger', 'light', 'dark' |
+| pickMode         | string       | `single`        | 'multi', 'range', 'single'     |
+| disableWeeks | Array<number> | `[]`          | week to be disabled (0-6)                   |
+| monthFormat      | string        | `'MMM yyyy'`  | month title format  |
+| weekdays   | Array<string> | `['S', 'M', 'T', 'W', 'T', 'F', 'S']` | weeks text |
+| weekStart    | number        | `0` (0 or 1)           | set week start day |
+| daysConfig      | Array<***DaysConfig***> | `[]` | days configuration |
+
+# Modal Mode
+
+### Basic
+
+Import ion2-calendar in component controller.
+
+```typescript
+import { Component } from '@angular/core';
+import { ModalController } from 'ionic-angular';
+import { CalendarModal, CalendarModalOptions, DayConfig } from "ion2-calendar";
+
+@Component({
+  selector: 'page-home',
+  templateUrl: 'home.html'
+})
+export class HomePage {
+
   constructor(
-    public calendarCtrl: CalendarController
-  ) {
+    public modalCtrl: ModalController,
+  ) { }
 
-  }
+  openCalendar() {
+    const options: CalendarModalOptions = {
+      title: 'BASIC',
+    };
+    let myCalendar =  this.modalCtrl.create(CalendarModal, {
+      options: options
+    });
 
-  openCalendar(){
-    this.calendarCtrl.openCalendar({
-      from:new Date()
+    myCalendar.present();
+
+    myCalendar.onDidDismiss(date => {
+      console.log(date);
     })
-    .then( res => { console.log(res) } );
   }
@@ -81,115 +197,121 @@
 
-# Demo
-[DEMO](https://hsuanxyz.github.io/demo/ion2-calendar/)
+### Date range
 
-### date
+Set pickMode to 'range'.
 
-![date](https://github.com/HsuanXyz/hsuanxyz.github.io/blob/master/assets/ion2-calendar/%E5%8D%95%E9%80%89%E6%97%A5%E6%9C%9F.gif?raw=true)
-
 ```typescript
- basic() {
-    this.calendarCtrl.openCalendar({
-      title:'basic demo',
-    })
-      .then( (res:any) => { console.log(res) })
-      .catch( () => {} )
+    openCalendar() {
+        const options: CalendarModalOptions = {
+          pickMode: 'range',
+          title: 'RANGE'
+        };
+    
+        let myCalendar = this.modalCtrl.create(CalendarModal, {
+          options: options
+        });
+    
+        myCalendar.present();
+    
+        myCalendar.onDidDismiss(date => {
+          console.log(date);
+        });
   }
 ```
 
-### date range
+### Multi Date
 
-![date range](https://github.com/HsuanXyz/hsuanxyz.github.io/blob/master/assets/ion2-calendar/%E5%A4%9A%E9%80%89%E6%97%A5%E6%9C%9F.gif?raw=true)
+Set pickMode to 'multi'.
 
 ```typescript
-dateRange() {
-    this.calendarCtrl.openCalendar({
-      isRadio: false,
-    })
-      .then( (res:any) => { console.log(res) })
-      .catch( () => {} )
-  }
+    openCalendar() {
+        const options = {
+          pickMode: 'multi',
+          title: 'MULTI'
+        };
+    
+        let myCalendar =  this.modalCtrl.create(CalendarModal, {
+          options: options
+        });
+    
+        myCalendar.present();
+    
+        myCalendar.onDidDismiss(date => {
+          console.log(date);
+        })
+      }
 ```
 
-### disable weekdays
+### Disable weeks
 
-![disable weekdays](https://github.com/HsuanXyz/hsuanxyz.github.io/blob/master/assets/ion2-calendar/%E7%A6%81%E7%94%A8%E6%98%9F%E6%9C%9F.gif?raw=true)
+Use index eg: `[0, 6]` denote Sunday and Saturday.
 
 ```typescript
-  disableWeekdays() {
-    this.calendarCtrl.openCalendar({
-      disableWeekdays:[0,6]
-    })
-      .then( (res:any) => { console.log(res) })
-      .catch( () => {} )
+  openCalendar() {
+    const options: CalendarModalOptions = {
+      disableWeeks: [0, 6]
+    };
+
+    let myCalendar =  this.modalCtrl.create(CalendarModal, {
+      options: options
+    });
+
+    myCalendar.present();
+
+    myCalendar.onDidDismiss(date => {
+      console.log(date);
+    });
   }
 ```
 
-### weekdays title format
+### Localization
 
-![weekdays title](https://github.com/HsuanXyz/hsuanxyz.github.io/blob/master/assets/ion2-calendar/%E8%87%AA%E5%AE%9A%E4%B9%89%E5%91%A8%E6%A0%87%E9%A2%98.gif?raw=true)
+```typescript
+ openCalendar() {
+    const options: CalendarModalOptions = {
+      monthFormat: 'yyyy 年 MM 月 ',
+      weekdays: ['天', '一', '二', '三', '四', '五', '六'],
+      weekStart: 1,
+      defaultDate: new Date()
+    };
 
-### month title format
+    let myCalendar =  this.modalCtrl.create(CalendarModal, {
+      options: options
+    });
 
-![month title](https://github.com/HsuanXyz/hsuanxyz.github.io/blob/master/assets/ion2-calendar/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9C%88%E4%BB%BD%E6%A0%87%E9%A2%98.gif?raw=true)
+    myCalendar.present();
 
-```typescript
- settingDisplay() {
-    this.calendarCtrl.openCalendar({
-      monthTitle:' MMMM-yy ',
-      weekdaysTitle:["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
-      closeLabel:''
-    })
-      .then( (res:any) => { console.log(res) })
-      .catch( () => {} )
+    myCalendar.onDidDismiss(date => {
+      console.log(date);
+    });
   }
 ```
-### days config
+### Days config
 
-![days config](https://github.com/HsuanXyz/hsuanxyz.github.io/blob/master/assets/ion2-calendar/%E8%87%AA%E5%AE%9A%E4%B9%89%E5%A4%A9.gif?raw=true)
+Configure one day.
 
 ```typescript
-daysConfig() {
+openCalendar() {
+    let _daysConfig: DayConfig[] = [];
+    for (let i = 0; i < 31; i++) {
+      _daysConfig.push({
+        date: new Date(2017, 0, i + 1),
+        subTitle: `$${i + 1}`
+      })
+    }
 
-    let _daysConfig = [
-      {
-        date:new Date(2017,0,1),
-        subTitle:'New Year\'s',
-        marked:true
-      },
-      {
-        date:new Date(2017,1,14),
-        subTitle:'Valentine\'s',
-        disable:true
-      },
-      {
-        date:new Date(2017,3,1),
-        subTitle:'April Fools',
-        marked:true
-      },
-      {
-        date:new Date(2017,3,7),
-        subTitle:'World Health',
-        marked:true
-      },
-      {
-        date:new Date(2017,4,31),
-        subTitle:'No-Smoking',
-        marked:true
-      },
-      {
-        date:new Date(2017,5,1),
-        subTitle:'Children\'s',
-        marked:true
-      }
-    ];
+    const options: CalendarModalOptions = {
+      from: new Date(2017, 0, 1),
+      to: new Date(2017, 11.1),
+      daysConfig: _daysConfig
+    };
 
-    _daysConfig.push(...this.days);
+    let myCalendar =  this.modalCtrl.create(CalendarModal, {
+      options: options
+    });
 
-    this.calendarCtrl.openCalendar({
-      from: new Date(2017,0,1),
-      to  : new Date(2017,11.1),
-      daysConfig:_daysConfig
-    })
-      .then( (res:any) => { console.log(res) })
-      .catch( () => {} )
+    myCalendar.present();
+
+    myCalendar.onDidDismiss(date => {
+      console.log(date);
+    });
   }
@@ -200,5 +322,4 @@ ```
 
-## openCalendar(Options,ModalOptions)
+### Modal Options
 
-### Options
 | Name            | Type          | Default       | Description |
@@ -208,15 +329,31 @@ | --------------- | ------------- | ------------- | ----------- |
 | to              | Date          |  0 (Infinite) | end date    |
-| title           | string        | `'Calendar'`  | title       |
-| defaultDate     | Date          | none          | let the view scroll to the default date|
+| title           | string        | `'CALENDAR'`  | title       |
+| color           | string        | `'primary'`   | 'primary', 'secondary', 'danger', 'light', 'dark' |
+| defaultScrollTo | Date          | none          | let the view scroll to the default date|
+| defaultDate     | Date          | none          | default date data, apply to single|
+| defaultDates    | Array<Date>   | none          | default dates data, apply to multi |
+| defaultDateRange | { from: Date, to: Date }  | none  | default date-range data, apply to range |
 | cssClass        | string        | `''`          | Additional classes for custom styles, separated by spaces. |
 | canBackwardsSelected        | boolean        | `false`        | can backwards selected |
-| isRadio         | boolean       | `true`        | true for one day ,false for range dates     |
-| disableWeekdays | Array<number> | `[]`          | week to be disabled (0-6)                   |
-| closeLabel      | string        | `cancel`      | cancel button label ,can be an empty string |
-| monthTitle      | string        | `'MMM yyyy'`  | month title format  |
-| weekdaysTitle   | Array<string> | `"Di_Lu_Ma_Me_Je_Ve_Sa".split("_")` | weeks title |
-| weekStartDay    | number        | `0` (0 or 1)           | set week start day |
+| pickMode         | string       | `single`        | 'multi', 'range', 'single'     |
+| disableWeeks | Array<number> | `[]`          | week to be disabled (0-6)                   |
+| closeLabel      | string        | `CANCEL`      | cancel button label |
+| doneLabel      | string        | `DONE`      | done button label |
+| closeIcon      | boolean        | `false`      | show cancel button icon |
+| doneIcon      | boolean        | `false`      | show done button icon  |
+| monthFormat      | string        | `'MMM yyyy'`  | month title format  |
+| weekdays   | Array<string> | `['S', 'M', 'T', 'W', 'T', 'F', 'S']` | weeks text |
+| weekStart    | number        | `0` (0 or 1)           | set week start day |
 | daysConfig      | Array<***DaysConfig***> | `[]` | days configuration |
 
+### onDidDismiss Output
+
+| pickMode      | Type  |
+| ------------- | ----- |
+| single        | { date:  ***CalendarResult*** }  |
+| range         | { from: ***CalendarResult***, to: ***CalendarResult*** }  |
+| multi         | Array<***CalendarResult***>   |
+
 #### DaysConfig
+
 | Name          | Type          | Default  | Description
@@ -228,39 +365,17 @@ | ------------- | ------------- | -------- | --------------- |
 | disable       | boolean       | false    | disable         |
-| title         | string        | none     | displayed title example:'today'       |
-| subTitle      | string        | none     | subTitle subTitle example:'christmas' |
+| title         | string        | none     | displayed title eg: `'today'`      |
+| subTitle      | string        | none     | subTitle subTitle eg: `'New Year\'s'` |
 
-### ModalOptions
-| Name            | Type          | Default       | Description |
-| --------------- | ------------- | ------------- | ----------- |
-| showBackdrop            | boolean          | true  | Whether to show the backdrop |
-| enableBackdropDismiss   | boolean          | true | Whether the popover should be dismissed by tapping the backdrop   |
+### CalendarResult
 
+| Name          | Type    |
+| ------------- | ------- |
+| time          | number  |
+| unix          | number  |
+| dateObj       | Date    |
+| string        | string  |
+| years         | number  |
+| months        | number  |
+| date          | number  |
 
-### Output Promise
-| Name          | Type  | Description |
-| ------------- | ----- | ----------- |
-| from          | ***Day***   | start date If `isRadio` it is `false` |
-| to            | ***Day***   | end date If `isRadio` it is `false`   |
-| date          | ***Day***   | date If `isRadio` it is `true`        |
-
-### Day
-| Name          | Type    | Description |
-| ------------- | ------- | ----------- |
-| time          | number  | timestamp   |
-| marked        | boolean | highlight color   |
-| disable       | boolean | disable           |
-| title         | string  | displayed title   |
-| subTitle      | string  | subTitle subTitle |
-
-
-### TODO
-
-1. ~~Add style settings.~~
-2. ~~Add default date, let the view scroll to the default date.~~
-3. To today
-4. ~~Scroll backwards ([#2](https://github.com/HsuanXyz/ion2-calendar/issues/2))~~
-5. ~~Settings week start day([#5](https://github.com/HsuanXyz/ion2-calendar/issues/5))~~
-
-
-
 # Contributing
@@ -291,3 +406,3 @@
 
-[![NPM](https://nodei.co/npm-dl/ion2-calendar.png?months=3&height=1)](https://nodei.co/npm/ion2-calendar/)
+## Thanks for reading
 
@@ -294,0 +409,0 @@ [npm-url]: https://www.npmjs.com/package/ion2-calendar

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

410

increased by38.98%

Worsened metrics

Total package byte prevSize

151915

decreased by-41.46%

Number of package files

50

decreased by-27.54%

Lines of code

1261

decreased by-69.9%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes