ion2-calendar - npm Package Compare versions

Comparing version 2.0.0-beta.6 to 2.0.0-beta.7

dist/calendar.model.d.ts

@@ -1,4 +0,1 @@
-/**
- * Created by hsuanlee on 2017/4/26.
- */
 export interface CalendarOriginal {
@@ -30,3 +27,3 @@ time: number;
 }
-export declare class DayConfig {
+export interface DayConfig {
     date: Date;
@@ -87,2 +84,13 @@ marked?: boolean;
 }
+export interface CalendarComponentOptions {
+    from?: Date | number;
+    to?: Date | number;
+    pickMode?: string;
+    weekStart?: number;
+    disableWeeks?: Array<number>;
+    weekdays?: Array<string>;
+    monthFormat?: string;
+    color?: string;
+    daysConfig?: Array<DayConfig>;
+}
 export declare class CalendarResult {
@@ -98,3 +106,3 @@ time: number;
 export declare type DefaultDate = Date | string | number | null;
-export declare type Colors = 'primary' | 'secondary' | 'danger' | 'light' | 'dark';
+export declare type Colors = 'primary' | 'secondary' | 'danger' | 'light' | 'dark' | string;
 export declare type PickMode = 'multi' | 'single' | 'range';

dist/calendar.model.js

@@ -7,8 +7,2 @@ var CalendarMonth = (function () {
 export { CalendarMonth };
-var DayConfig = (function () {
-    function DayConfig() {
-    }
-    return DayConfig;
-}());
-export { DayConfig };
 var CalendarOptions = (function () {
@@ -15,0 +9,0 @@ function CalendarOptions() {

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":"class"},"CalendarOptions":{"__symbolic":"class"},"ModalOptions":{"__symbolic":"interface"},"CalendarControllerOptions":{"__symbolic":"interface"},"CalendarResult":{"__symbolic":"class"}}},{"__symbolic":"module","version":1,"metadata":{"CalendarOriginal":{"__symbolic":"interface"},"CalendarDay":{"__symbolic":"interface"},"CalendarMonth":{"__symbolic":"class"},"DayConfig":{"__symbolic":"class"},"CalendarOptions":{"__symbolic":"class"},"ModalOptions":{"__symbolic":"interface"},"CalendarControllerOptions":{"__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"},"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"}}}]

dist/calendar.module.js

@@ -1,13 +0,6 @@
-/**
- * Created by youyou on 16/12/4.
- */
 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { CalendarController } from './calendar.controller';
 import { IonicModule, ModalController } from 'ionic-angular';
-import { CalendarWeekComponent } from "./components/calendar-week.component";
-import { CalendarModal } from "./components/calendar.modal";
-import { MonthComponent } from "./components/month.component";
 import { CalendarService } from "./services/calendar.service";
-import { CalendarComponent } from './components/calendar.component';
+import { CALENDAR_COMPONENTS } from "./components/index";
 export function calendarController(modalCtrl, calSvc) {
@@ -24,4 +17,6 @@ return new CalendarController(modalCtrl, calSvc);
     { type: NgModule, args: [{
-                imports: [IonicModule, CommonModule],
-                declarations: [CalendarModal, CalendarWeekComponent, MonthComponent, CalendarComponent],
+                imports: [IonicModule],
+                declarations: CALENDAR_COMPONENTS,
+                exports: CALENDAR_COMPONENTS,
+                entryComponents: CALENDAR_COMPONENTS,
                 providers: [{
@@ -32,4 +27,2 @@ provide: CalendarController,
                     }, CalendarService],
-                exports: [CalendarComponent],
-                entryComponents: [CalendarModal],
                 schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -36,0 +29,0 @@ },] },

dist/calendar.module.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"calendarController":{"__symbolic":"function","parameters":["modalCtrl","calSvc"],"value":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"./calendar.controller","name":"CalendarController"},"arguments":[{"__symbolic":"reference","name":"modalCtrl"},{"__symbolic":"reference","name":"calSvc"}]}},"CalendarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"ionic-angular","name":"IonicModule"},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","module":"./components/calendar.modal","name":"CalendarModal"},{"__symbolic":"reference","module":"./components/calendar-week.component","name":"CalendarWeekComponent"},{"__symbolic":"reference","module":"./components/month.component","name":"MonthComponent"},{"__symbolic":"reference","module":"./components/calendar.component","name":"CalendarComponent"}],"providers":[{"provide":{"__symbolic":"reference","module":"./calendar.controller","name":"CalendarController"},"useFactory":{"__symbolic":"reference","name":"calendarController"},"deps":[{"__symbolic":"reference","module":"ionic-angular","name":"ModalController"},{"__symbolic":"reference","module":"./services/calendar.service","name":"CalendarService"}]},{"__symbolic":"reference","module":"./services/calendar.service","name":"CalendarService"}],"exports":[{"__symbolic":"reference","module":"./components/calendar.component","name":"CalendarComponent"}],"entryComponents":[{"__symbolic":"reference","module":"./components/calendar.modal","name":"CalendarModal"}],"schemas":[{"__symbolic":"reference","module":"@angular/core","name":"CUSTOM_ELEMENTS_SCHEMA"}]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"calendarController":{"__symbolic":"function","parameters":["modalCtrl","calSvc"],"value":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"./calendar.controller","name":"CalendarController"},"arguments":[{"__symbolic":"reference","name":"modalCtrl"},{"__symbolic":"reference","name":"calSvc"}]}},"CalendarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"ionic-angular","name":"IonicModule"},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","module":"./components/calendar.modal","name":"CalendarModal"},{"__symbolic":"reference","module":"./components/calendar-week.component","name":"CalendarWeekComponent"},{"__symbolic":"reference","module":"./components/month.component","name":"MonthComponent"},{"__symbolic":"reference","module":"./components/calendar.component","name":"CalendarComponent"}],"providers":[{"provide":{"__symbolic":"reference","module":"./calendar.controller","name":"CalendarController"},"useFactory":{"__symbolic":"reference","name":"calendarController"},"deps":[{"__symbolic":"reference","module":"ionic-angular","name":"ModalController"},{"__symbolic":"reference","module":"./services/calendar.service","name":"CalendarService"}]},{"__symbolic":"reference","module":"./services/calendar.service","name":"CalendarService"}],"exports":[{"__symbolic":"reference","module":"./components/calendar.component","name":"CalendarComponent"}],"entryComponents":[{"__symbolic":"reference","module":"./components/calendar.modal","name":"CalendarModal"}],"schemas":[{"__symbolic":"reference","module":"@angular/core","name":"CUSTOM_ELEMENTS_SCHEMA"}]}]}]}}}]
+[{"__symbolic":"module","version":3,"metadata":{"calendarController":{"__symbolic":"function","parameters":["modalCtrl","calSvc"],"value":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"./calendar.controller","name":"CalendarController"},"arguments":[{"__symbolic":"reference","name":"modalCtrl"},{"__symbolic":"reference","name":"calSvc"}]}},"CalendarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"ionic-angular","name":"IonicModule"}],"declarations":{"__symbolic":"reference","module":"./components/index","name":"CALENDAR_COMPONENTS"},"exports":{"__symbolic":"reference","module":"./components/index","name":"CALENDAR_COMPONENTS"},"entryComponents":{"__symbolic":"reference","module":"./components/index","name":"CALENDAR_COMPONENTS"},"providers":[{"provide":{"__symbolic":"reference","module":"./calendar.controller","name":"CalendarController"},"useFactory":{"__symbolic":"reference","name":"calendarController"},"deps":[{"__symbolic":"reference","module":"ionic-angular","name":"ModalController"},{"__symbolic":"reference","module":"./services/calendar.service","name":"CalendarService"}]},{"__symbolic":"reference","module":"./services/calendar.service","name":"CalendarService"}],"schemas":[{"__symbolic":"reference","module":"@angular/core","name":"CUSTOM_ELEMENTS_SCHEMA"}]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"calendarController":{"__symbolic":"function","parameters":["modalCtrl","calSvc"],"value":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"./calendar.controller","name":"CalendarController"},"arguments":[{"__symbolic":"reference","name":"modalCtrl"},{"__symbolic":"reference","name":"calSvc"}]}},"CalendarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"ionic-angular","name":"IonicModule"}],"declarations":{"__symbolic":"reference","module":"./components/index","name":"CALENDAR_COMPONENTS"},"exports":{"__symbolic":"reference","module":"./components/index","name":"CALENDAR_COMPONENTS"},"entryComponents":{"__symbolic":"reference","module":"./components/index","name":"CALENDAR_COMPONENTS"},"providers":[{"provide":{"__symbolic":"reference","module":"./calendar.controller","name":"CalendarController"},"useFactory":{"__symbolic":"reference","name":"calendarController"},"deps":[{"__symbolic":"reference","module":"ionic-angular","name":"ModalController"},{"__symbolic":"reference","module":"./services/calendar.service","name":"CalendarService"}]},{"__symbolic":"reference","module":"./services/calendar.service","name":"CalendarService"}],"schemas":[{"__symbolic":"reference","module":"@angular/core","name":"CUSTOM_ELEMENTS_SCHEMA"}]}]}]}}}]

dist/components/calendar-week.component.js

@@ -39,3 +39,3 @@ import { Component, Input } from '@angular/core';
                 selector: 'ion-calendar-week',
-                template: "\n        <ion-toolbar class=\"week-toolbar\"  no-border-top >\n            <ul [class]=\"'week-title ' + color\">\n                <li *ngFor=\"let w of _weekArray\">{{w}}</li>\n            </ul>\n        </ion-toolbar>\n    ",
+                template: "\n    <ion-toolbar class=\"week-toolbar\" no-border-top>\n      <ul [class]=\"'week-title ' + color\">\n        <li *ngFor=\"let w of _weekArray\">{{w}}</li>\n      </ul>\n    </ion-toolbar>\n  ",
             },] },
@@ -42,0 +42,0 @@ ];

dist/components/calendar-week.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"CalendarWeekComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ion-calendar-week","template":"\n        <ion-toolbar class=\"week-toolbar\"  no-border-top >\n            <ul [class]=\"'week-title ' + color\">\n                <li *ngFor=\"let w of _weekArray\">{{w}}</li>\n            </ul>\n        </ion-toolbar>\n    "}]}],"members":{"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"weekArray":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"adjustSort":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CalendarWeekComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ion-calendar-week","template":"\n        <ion-toolbar class=\"week-toolbar\"  no-border-top >\n            <ul [class]=\"'week-title ' + color\">\n                <li *ngFor=\"let w of _weekArray\">{{w}}</li>\n            </ul>\n        </ion-toolbar>\n    "}]}],"members":{"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"weekArray":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"adjustSort":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"CalendarWeekComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ion-calendar-week","template":"\n    <ion-toolbar class=\"week-toolbar\" no-border-top>\n      <ul [class]=\"'week-title ' + color\">\n        <li *ngFor=\"let w of _weekArray\">{{w}}</li>\n      </ul>\n    </ion-toolbar>\n  "}]}],"members":{"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"weekArray":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"adjustSort":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CalendarWeekComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ion-calendar-week","template":"\n    <ion-toolbar class=\"week-toolbar\" no-border-top>\n      <ul [class]=\"'week-title ' + color\">\n        <li *ngFor=\"let w of _weekArray\">{{w}}</li>\n      </ul>\n    </ion-toolbar>\n  "}]}],"members":{"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"weekArray":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"adjustSort":[{"__symbolic":"method"}]}}}}]

dist/components/calendar.component.d.ts

@@ -1,25 +0,29 @@
-import { ElementRef, ChangeDetectorRef, Renderer, OnInit } from '@angular/core';
-import { NavParams, ViewController } from 'ionic-angular';
-import { CalendarMonth, Colors } from '../calendar.model';
+import { OnInit, EventEmitter } from '@angular/core';
+import { CalendarMonth, CalendarControllerOptions, CalendarComponentOptions } from '../calendar.model';
 import { CalendarService } from "../services/calendar.service";
-export declare class CalendarComponent implements OnInit {
-    private _renderer;
-    _elementRef: ElementRef;
-    params: NavParams;
-    viewCtrl: ViewController;
-    ref: ChangeDetectorRef;
+import { ControlValueAccessor } from '@angular/forms';
+export declare const ION_CAL_VALUE_ACCESSOR: any;
+export declare class CalendarComponent implements ControlValueAccessor, OnInit {
     calSvc: CalendarService;
     monthOpt: CalendarMonth;
-    monthDate: Date;
-    color: Colors;
-    titleFormat: string;
-    weekStart: number;
-    disableWeeks: Array<number>;
-    from: number;
-    constructor(_renderer: Renderer, _elementRef: ElementRef, params: NavParams, viewCtrl: ViewController, ref: ChangeDetectorRef, calSvc: CalendarService);
+    options: CalendarComponentOptions;
+    format: string;
+    onChange: EventEmitter<any>;
+    _d: CalendarControllerOptions;
+    _calendarMonthValue: any[];
+    _onChanged: Function;
+    _onTouched: Function;
+    constructor(calSvc: CalendarService);
     ionViewDidLoad(): void;
     ngOnInit(): void;
-    createMonth(date?: number): CalendarMonth;
+    writeValue(obj: any): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    createMonth(date: number): CalendarMonth;
     nextMonth(): void;
+    canNext(): boolean;
     backMonth(): void;
+    canBack(): boolean;
+    onChanged($event: any[]): void;
+    _writeValue(value: any): void;
 }

dist/components/calendar.component.js

@@ -1,19 +0,20 @@
-import { Component, ElementRef, ChangeDetectorRef, Renderer, Input } from '@angular/core';
-import { NavParams, ViewController } from 'ionic-angular';
+import { Component, Input, Output, EventEmitter, forwardRef } from '@angular/core';
+import { CalendarService } from "../services/calendar.service";
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as moment from 'moment';
-import { CalendarService } from "../services/calendar.service";
+export var ION_CAL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(function () { return CalendarComponent; }),
+    multi: true
+};
 var CalendarComponent = (function () {
-    function CalendarComponent(_renderer, _elementRef, params, viewCtrl, ref, calSvc) {
-        this._renderer = _renderer;
-        this._elementRef = _elementRef;
-        this.params = params;
-        this.viewCtrl = viewCtrl;
-        this.ref = ref;
+    function CalendarComponent(calSvc) {
         this.calSvc = calSvc;
-        this.monthDate = new Date();
-        this.color = 'primary';
-        this.titleFormat = 'MMM yyyy';
-        this.weekStart = 0;
-        this.disableWeeks = [];
-        this.from = new Date().getTime();
+        this.format = 'YYYY-MM-DD';
+        this.onChange = new EventEmitter();
+        this._calendarMonthValue = [null, null];
+        this._onChanged = function () {
+        };
+        this._onTouched = function () {
+        };
     }
@@ -23,27 +24,106 @@ CalendarComponent.prototype.ionViewDidLoad = function () {
     CalendarComponent.prototype.ngOnInit = function () {
-        if (!moment.isDate(new Date(this.from))) {
-            this.from = new Date().getTime();
-            console.warn('form is not a Date type');
+        this._d = this.calSvc.safeOpt(this.options || {});
+        this.monthOpt = this.createMonth(new Date().getTime());
+    };
+    CalendarComponent.prototype.writeValue = function (obj) {
+        if (obj) {
+            this._writeValue(obj);
+            if (this._calendarMonthValue[0] && this._calendarMonthValue[0].time) {
+                this.monthOpt = this.createMonth(this._calendarMonthValue[0].time);
+            }
+            else {
+                this.monthOpt = this.createMonth(new Date().getTime());
+            }
         }
-        else {
-            this.from = moment(this.from).valueOf();
-        }
-        this.monthOpt = this.createMonth();
+        console.log(this._calendarMonthValue[0]);
     };
+    CalendarComponent.prototype.registerOnChange = function (fn) {
+        this._onChanged = fn;
+    };
+    CalendarComponent.prototype.registerOnTouched = function (fn) {
+        this._onTouched = fn;
+    };
     CalendarComponent.prototype.createMonth = function (date) {
-        if (date === void 0) { date = this.from; }
-        return this.calSvc.createMonthsByPeriod(date, 1, this.calSvc.safeOpt({
-            from: new Date(date),
-            weekStart: this.weekStart,
-            disableWeeks: this.disableWeeks
-        }))[0];
+        return this.calSvc.createMonthsByPeriod(date, 1, this._d)[0];
     };
     CalendarComponent.prototype.nextMonth = function () {
-        this.from = moment(this.from).add(1, 'months').valueOf();
-        this.monthOpt = this.createMonth();
+        var nextTime = moment(this.monthOpt.original.time).add(1, 'months').valueOf();
+        this.monthOpt = this.createMonth(nextTime);
     };
+    CalendarComponent.prototype.canNext = function () {
+        if (!this._d.to)
+            return true;
+        return this.monthOpt.original.time < moment(this._d.to).valueOf();
+    };
     CalendarComponent.prototype.backMonth = function () {
-        this.from = moment(this.from).subtract(1, 'months').valueOf();
-        this.monthOpt = this.createMonth();
+        var backTime = moment(this.monthOpt.original.time).subtract(1, 'months').valueOf();
+        this.monthOpt = this.createMonth(backTime);
     };
+    CalendarComponent.prototype.canBack = function () {
+        if (!this._d.from)
+            return true;
+        return this.monthOpt.original.time > moment(this._d.from).valueOf();
+    };
+    CalendarComponent.prototype.onChanged = function ($event) {
+        switch (this._d.pickMode) {
+            case 'single':
+                var date = moment($event[0].time).format(this.format);
+                this._onChanged(date);
+                this.onChange.emit(date);
+                break;
+            case 'range':
+                if ($event[0] && $event[1]) {
+                    var rangeDate = {
+                        from: moment($event[0].time).format(this.format),
+                        to: moment($event[1].time).format(this.format)
+                    };
+                    this._onChanged(rangeDate);
+                    this.onChange.emit(rangeDate);
+                }
+                break;
+            case 'multi':
+                var dates = [];
+                for (var i = 0; i < $event.length; i++) {
+                    if ($event[i] && $event[i].time) {
+                        dates.push(moment($event[i].time).format(this.format));
+                    }
+                }
+                this._onChanged(dates);
+                this.onChange.emit(dates);
+                break;
+            default:
+        }
+    };
+    CalendarComponent.prototype._writeValue = function (value) {
+        var _this = this;
+        if (!value)
+            return;
+        switch (this._d.pickMode) {
+            case 'single':
+                var date = moment(value, this.format);
+                this._calendarMonthValue[0] = this.calSvc.createCalendarDay(date.valueOf(), this._d);
+                break;
+            case 'range':
+                if (value.from) {
+                    var from = moment(value.from, this.format);
+                    this._calendarMonthValue[0] = this.calSvc.createCalendarDay(from.valueOf(), this._d);
+                }
+                if (value.to) {
+                    var to = moment(value.to, this.format);
+                    this._calendarMonthValue[1] = this.calSvc.createCalendarDay(to.valueOf(), this._d);
+                }
+                break;
+            case 'multi':
+                if (Array.isArray(value)) {
+                    this._calendarMonthValue = value.map(function (e) {
+                        return _this.calSvc.createCalendarDay(moment(e, _this.format).valueOf(), _this._d);
+                    });
+                }
+                else {
+                    this._calendarMonthValue = [];
+                }
+                break;
+            default:
+        }
+    };
     return CalendarComponent;
@@ -55,3 +135,4 @@ }());
                 selector: 'ion-calendar',
-                template: "\n        <div class=\"title\">\n            <div class=\"text\">\n                {{monthOpt.original.time | date: titleFormat}}\n            </div>\n            <div ion-button clear class=\"back\" (click)=\"backMonth()\">\n                <ion-icon name=\"ios-arrow-back\"></ion-icon>\n            </div>\n            <div ion-button clear class=\"forward\" (click)=\"nextMonth()\">\n                <ion-icon name=\"ios-arrow-forward\"></ion-icon>\n            </div>\n        </div>\n\n        <ion-calendar-week color=\"light\"\n                           [weekStart]=\"weekStart\">\n        </ion-calendar-week>\n\n        <ion-calendar-month [month]=\"monthOpt\" [color]=\"color\">\n\n        </ion-calendar-month>\n\n    ",
+                providers: [ION_CAL_VALUE_ACCESSOR],
+                template: "\n    <div class=\"title\">\n      <div class=\"text\">\n        {{monthOpt.original.time | date: _d.monthFormat}}\n      </div>\n      <button ion-button clear class=\"back\" [disabled]=\"!canBack()\" (click)=\"backMonth()\">\n        <ion-icon name=\"ios-arrow-back\"></ion-icon>\n      </button>\n      <button ion-button clear class=\"forward\" [disabled]=\"!canNext()\" (click)=\"nextMonth()\">\n        <ion-icon name=\"ios-arrow-forward\"></ion-icon>\n      </button>\n    </div>\n\n    <ion-calendar-week color=\"transparent\"\n                       [weekStart]=\"_d.weekStart\">\n    </ion-calendar-week>\n\n    <ion-calendar-month\n      [(ngModel)]=\"_calendarMonthValue\"\n      [month]=\"monthOpt\"\n      (onChange)=\"onChanged($event)\"\n      [pickMode]=\"_d.pickMode\"\n      [color]=\"_d.color\">\n\n    </ion-calendar-month>\n\n  ",
             },] },
@@ -61,16 +142,9 @@ ];
 CalendarComponent.ctorParameters = function () { return [
-    { type: Renderer, },
-    { type: ElementRef, },
-    { type: NavParams, },
-    { type: ViewController, },
-    { type: ChangeDetectorRef, },
     { type: CalendarService, },
 ]; };
 CalendarComponent.propDecorators = {
-    'color': [{ type: Input },],
-    'titleFormat': [{ type: Input },],
-    'weekStart': [{ type: Input },],
-    'disableWeeks': [{ type: Input },],
-    'from': [{ type: Input },],
+    'options': [{ type: Input },],
+    'format': [{ type: Input },],
+    'onChange': [{ type: Output },],
 };
 //# sourceMappingURL=calendar.component.js.map

dist/components/calendar.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"CalendarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ion-calendar","template":"\n        <div class=\"title\">\n            <div class=\"text\">\n                {{monthOpt.original.time | date: titleFormat}}\n            </div>\n            <div ion-button clear class=\"back\" (click)=\"backMonth()\">\n                <ion-icon name=\"ios-arrow-back\"></ion-icon>\n            </div>\n            <div ion-button clear class=\"forward\" (click)=\"nextMonth()\">\n                <ion-icon name=\"ios-arrow-forward\"></ion-icon>\n            </div>\n        </div>\n\n        <ion-calendar-week color=\"light\"\n                           [weekStart]=\"weekStart\">\n        </ion-calendar-week>\n\n        <ion-calendar-month [month]=\"monthOpt\" [color]=\"color\">\n\n        </ion-calendar-month>\n\n    "}]}],"members":{"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"titleFormat":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disableWeeks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"from":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__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"}],"ngOnInit":[{"__symbolic":"method"}],"createMonth":[{"__symbolic":"method"}],"nextMonth":[{"__symbolic":"method"}],"backMonth":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CalendarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ion-calendar","template":"\n        <div class=\"title\">\n            <div class=\"text\">\n                {{monthOpt.original.time | date: titleFormat}}\n            </div>\n            <div ion-button clear class=\"back\" (click)=\"backMonth()\">\n                <ion-icon name=\"ios-arrow-back\"></ion-icon>\n            </div>\n            <div ion-button clear class=\"forward\" (click)=\"nextMonth()\">\n                <ion-icon name=\"ios-arrow-forward\"></ion-icon>\n            </div>\n        </div>\n\n        <ion-calendar-week color=\"light\"\n                           [weekStart]=\"weekStart\">\n        </ion-calendar-week>\n\n        <ion-calendar-month [month]=\"monthOpt\" [color]=\"color\">\n\n        </ion-calendar-month>\n\n    "}]}],"members":{"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"titleFormat":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disableWeeks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"from":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__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"}],"ngOnInit":[{"__symbolic":"method"}],"createMonth":[{"__symbolic":"method"}],"nextMonth":[{"__symbolic":"method"}],"backMonth":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"ION_CAL_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"CalendarComponent"},"multi":true},"CalendarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ion-calendar","providers":[{"__symbolic":"reference","name":"ION_CAL_VALUE_ACCESSOR"}],"template":"\n    <div class=\"title\">\n      <div class=\"text\">\n        {{monthOpt.original.time | date: _d.monthFormat}}\n      </div>\n      <button ion-button clear class=\"back\" [disabled]=\"!canBack()\" (click)=\"backMonth()\">\n        <ion-icon name=\"ios-arrow-back\"></ion-icon>\n      </button>\n      <button ion-button clear class=\"forward\" [disabled]=\"!canNext()\" (click)=\"nextMonth()\">\n        <ion-icon name=\"ios-arrow-forward\"></ion-icon>\n      </button>\n    </div>\n\n    <ion-calendar-week color=\"transparent\"\n                       [weekStart]=\"_d.weekStart\">\n    </ion-calendar-week>\n\n    <ion-calendar-month\n      [(ngModel)]=\"_calendarMonthValue\"\n      [month]=\"monthOpt\"\n      (onChange)=\"onChanged($event)\"\n      [pickMode]=\"_d.pickMode\"\n      [color]=\"_d.color\">\n\n    </ion-calendar-month>\n\n  "}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"format":[{"__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":"../services/calendar.service","name":"CalendarService"}]}],"ionViewDidLoad":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"createMonth":[{"__symbolic":"method"}],"nextMonth":[{"__symbolic":"method"}],"canNext":[{"__symbolic":"method"}],"backMonth":[{"__symbolic":"method"}],"canBack":[{"__symbolic":"method"}],"onChanged":[{"__symbolic":"method"}],"_writeValue":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"ION_CAL_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"CalendarComponent"},"multi":true},"CalendarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ion-calendar","providers":[{"__symbolic":"reference","name":"ION_CAL_VALUE_ACCESSOR"}],"template":"\n    <div class=\"title\">\n      <div class=\"text\">\n        {{monthOpt.original.time | date: _d.monthFormat}}\n      </div>\n      <button ion-button clear class=\"back\" [disabled]=\"!canBack()\" (click)=\"backMonth()\">\n        <ion-icon name=\"ios-arrow-back\"></ion-icon>\n      </button>\n      <button ion-button clear class=\"forward\" [disabled]=\"!canNext()\" (click)=\"nextMonth()\">\n        <ion-icon name=\"ios-arrow-forward\"></ion-icon>\n      </button>\n    </div>\n\n    <ion-calendar-week color=\"transparent\"\n                       [weekStart]=\"_d.weekStart\">\n    </ion-calendar-week>\n\n    <ion-calendar-month\n      [(ngModel)]=\"_calendarMonthValue\"\n      [month]=\"monthOpt\"\n      (onChange)=\"onChanged($event)\"\n      [pickMode]=\"_d.pickMode\"\n      [color]=\"_d.color\">\n\n    </ion-calendar-month>\n\n  "}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"format":[{"__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":"../services/calendar.service","name":"CalendarService"}]}],"ionViewDidLoad":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"createMonth":[{"__symbolic":"method"}],"nextMonth":[{"__symbolic":"method"}],"canNext":[{"__symbolic":"method"}],"backMonth":[{"__symbolic":"method"}],"canBack":[{"__symbolic":"method"}],"onChanged":[{"__symbolic":"method"}],"_writeValue":[{"__symbolic":"method"}]}}}}]

dist/components/calendar.modal.js

 import { Component, ViewChild, ElementRef, ChangeDetectorRef, Renderer } from '@angular/core';
 import { NavParams, ViewController, Content } from 'ionic-angular';
+import { CalendarService } from '../services/calendar.service';
 import * as moment from 'moment';
-import { CalendarService } from '../services/calendar.service';
 var CalendarModal = (function () {
@@ -274,3 +274,3 @@ function CalendarModal(_renderer, _elementRef, params, viewCtrl, ref, calSvc) {
                 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-title>{{title}}</ion-title>\n\n        <ion-buttons end>\n          <button ion-button clear (click)=\"onCancel()\">\n            <span *ngIf=\"closeLabel !== '' && !closeIcon\">{{closeLabel}}</span>\n            <ion-icon *ngIf=\"closeIcon\" name=\"close\"></ion-icon>\n          </button>\n          <button ion-button *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        </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\" [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        <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  ",
             },] },
@@ -277,0 +277,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-title>{{title}}</ion-title>\n\n        <ion-buttons end>\n          <button ion-button clear (click)=\"onCancel()\">\n            <span *ngIf=\"closeLabel !== '' && !closeIcon\">{{closeLabel}}</span>\n            <ion-icon *ngIf=\"closeIcon\" name=\"close\"></ion-icon>\n          </button>\n          <button ion-button *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        </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\" [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-title>{{title}}</ion-title>\n\n        <ion-buttons end>\n          <button ion-button clear (click)=\"onCancel()\">\n            <span *ngIf=\"closeLabel !== '' && !closeIcon\">{{closeLabel}}</span>\n            <ion-icon *ngIf=\"closeIcon\" name=\"close\"></ion-icon>\n          </button>\n          <button ion-button *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        </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\" [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        <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"}]}}}}]

dist/index.d.ts

 export * from './calendar.model';
+export * from './components/index';
 export { CalendarModule } from './calendar.module';
 export { CalendarController } from './calendar.controller';
-export { ModalController } from 'ionic-angular';
-export { CalendarWeekComponent } from './components/calendar-week.component';
-export * from './components/calendar.modal';

dist/index.js

 export * from './calendar.model';
+export * from './components/index';
 export { CalendarModule } from './calendar.module';
 export { CalendarController } from './calendar.controller';
-export { ModalController } from 'ionic-angular';
-export { CalendarWeekComponent } from './components/calendar-week.component';
-export * from './components/calendar.modal';
 //# sourceMappingURL=index.js.map

dist/index.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./calendar.model"},{"from":"./calendar.module","export":["CalendarModule"]},{"from":"./calendar.controller","export":["CalendarController"]},{"from":"ionic-angular","export":["ModalController"]},{"from":"./components/calendar-week.component","export":["CalendarWeekComponent"]},{"from":"./components/calendar.modal"}]},{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./calendar.model"},{"from":"./calendar.module","export":["CalendarModule"]},{"from":"./calendar.controller","export":["CalendarController"]},{"from":"ionic-angular","export":["ModalController"]},{"from":"./components/calendar-week.component","export":["CalendarWeekComponent"]},{"from":"./components/calendar.modal"}]}]
+[{"__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"]}]}]

dist/services/calendar.service.d.ts

 import { CalendarOriginal, CalendarDay, CalendarMonth, CalendarControllerOptions, CalendarResult } from '../calendar.model';
 export declare class CalendarService {
     constructor();
-    safeOpt(calendarOptions: CalendarControllerOptions): CalendarControllerOptions;
+    safeOpt(calendarOptions: any): CalendarControllerOptions;
     createOriginalCalendar(time: number): CalendarOriginal;
@@ -6,0 +6,0 @@ findDayConfig(day: any, opt: CalendarControllerOptions): any;

dist/services/calendar.service.js

@@ -1,4 +0,1 @@
-/**
- * Created by hsuanlee on 27/05/2017.
- */
 import { Injectable } from '@angular/core';
@@ -10,3 +7,5 @@ import * as moment from 'moment';
     CalendarService.prototype.safeOpt = function (calendarOptions) {
-        var _a = calendarOptions || {}, _b = _a.autoDone, autoDone = _b === void 0 ? false : _b, _c = _a.from, from = _c === void 0 ? new Date() : _c, _d = _a.to, to = _d === void 0 ? 0 : _d, _e = _a.cssClass, cssClass = _e === void 0 ? '' : _e, _f = _a.weekStart, weekStart = _f === void 0 ? 0 : _f, _g = _a.canBackwardsSelected, canBackwardsSelected = _g === void 0 ? false : _g, _h = _a.disableWeeks, disableWeeks = _h === void 0 ? [] : _h, _j = _a.closeLabel, closeLabel = _j === void 0 ? 'CANCEL' : _j, _k = _a.closeIcon, closeIcon = _k === void 0 ? false : _k, _l = _a.doneLabel, doneLabel = _l === void 0 ? 'DONE' : _l, _m = _a.doneIcon, doneIcon = _m === void 0 ? false : _m, _o = _a.id, id = _o === void 0 ? '' : _o, _p = _a.pickMode, pickMode = _p === void 0 ? 'single' : _p, _q = _a.color, color = _q === void 0 ? 'primary' : _q, _r = _a.isSaveHistory, isSaveHistory = _r === void 0 ? false : _r, _s = _a.monthFormat, monthFormat = _s === void 0 ? 'MMM yyyy' : _s, _t = _a.title, title = _t === void 0 ? 'CALENDAR' : _t, _u = _a.weekdays, weekdays = _u === void 0 ? ['S', 'M', 'T', 'W', 'T', 'F', 'S'] : _u, _v = _a.daysConfig, daysConfig = _v === void 0 ? [] : _v, _w = _a.countNextMonths, countNextMonths = _w === void 0 ? 3 : _w, _x = _a.showYearPicker, showYearPicker = _x === void 0 ? false : _x;
+        var _disableWeeks = [];
+        var _daysConfig = [];
+        var _a = calendarOptions || {}, _b = _a.autoDone, autoDone = _b === void 0 ? false : _b, _c = _a.from, from = _c === void 0 ? new Date() : _c, _d = _a.to, to = _d === void 0 ? 0 : _d, _e = _a.cssClass, cssClass = _e === void 0 ? '' : _e, _f = _a.weekStart, weekStart = _f === void 0 ? 0 : _f, _g = _a.canBackwardsSelected, canBackwardsSelected = _g === void 0 ? false : _g, _h = _a.disableWeeks, disableWeeks = _h === void 0 ? _disableWeeks : _h, _j = _a.closeLabel, closeLabel = _j === void 0 ? 'CANCEL' : _j, _k = _a.closeIcon, closeIcon = _k === void 0 ? false : _k, _l = _a.doneLabel, doneLabel = _l === void 0 ? 'DONE' : _l, _m = _a.doneIcon, doneIcon = _m === void 0 ? false : _m, _o = _a.id, id = _o === void 0 ? '' : _o, _p = _a.pickMode, pickMode = _p === void 0 ? 'single' : _p, _q = _a.color, color = _q === void 0 ? 'primary' : _q, _r = _a.isSaveHistory, isSaveHistory = _r === void 0 ? false : _r, _s = _a.monthFormat, monthFormat = _s === void 0 ? 'MMM yyyy' : _s, _t = _a.title, title = _t === void 0 ? 'CALENDAR' : _t, _u = _a.weekdays, weekdays = _u === void 0 ? ['S', 'M', 'T', 'W', 'T', 'F', 'S'] : _u, _v = _a.daysConfig, daysConfig = _v === void 0 ? _daysConfig : _v, _w = _a.countNextMonths, countNextMonths = _w === void 0 ? 3 : _w, _x = _a.showYearPicker, showYearPicker = _x === void 0 ? false : _x;
         return {
@@ -13,0 +12,0 @@ autoDone: autoDone,

package.json

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

README-V2.md

@@ -171,3 +171,6 @@ # 📅 ion2-calendar
 | color           | string        | `'primary'`   | 'primary', 'secondary', 'danger', 'light', 'dark' |
-| defaultDate     | Date          | none          | let the view scroll to the default date|
+| 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. |
@@ -206,5 +209,5 @@ | canBackwardsSelected        | boolean        | `false`        | can backwards selected |
 | ------------- | ----- |
-| single        | { date:  ***Day*** }  |
-| range         | { from: ***Day***, to: ***Day*** }  |
-| multi         | Array<***Day***>   |
+| single        | { date:  ***CalendarResult*** }  |
+| range         | { from: ***CalendarResult***, to: ***CalendarResult*** }  |
+| multi         | Array<***CalendarResult***>   |
 
@@ -220,2 +223,14 @@ ### Day
 
+### CalendarResult
+| Name          | Type    | 
+| ------------- | ------- |
+| time          | number  |
+| unix          | number  |
+| dateObj       | Date    |
+| string        | string  |
+| years         | number  |
+| months        | number  |
+| date          | number  |
+
+
 # Contributing
@@ -222,0 +237,0 @@

src/calendar.controller.ts

 import { Injectable } from '@angular/core';
 import { ModalController } from 'ionic-angular';
-
 import { ModalOptions, CalendarControllerOptions } from './calendar.model'
 import { CalendarModal } from "./components/calendar.modal";
-import {CalendarService} from './services/calendar.service';
+import { CalendarService } from './services/calendar.service';
 
-
 @Injectable()
 export class CalendarController {
 
-    isRadio: boolean;
+  isRadio: boolean;
 
-    constructor(
-        public modalCtrl: ModalController,
-        public calSvc: CalendarService,
-    ) { }
+  constructor(public modalCtrl: ModalController,
+              public calSvc: CalendarService,) {
+  }
 
-    openCalendar(calendarOptions: CalendarControllerOptions, modalOptions:ModalOptions = {}):any {
+  openCalendar(calendarOptions: CalendarControllerOptions, modalOptions: ModalOptions = {}): any {
 
 
-        let options = this.calSvc.safeOpt(calendarOptions);
-        let calendarModal = this.modalCtrl.create(CalendarModal, Object.assign({
-            options:options,
-        },options),modalOptions);
+    let options = this.calSvc.safeOpt(calendarOptions);
+    let calendarModal = this.modalCtrl.create(CalendarModal, Object.assign({
+      options: options,
+    }, options), modalOptions);
 
-        calendarModal.present();
+    calendarModal.present();
 
-        return new Promise( (resolve, reject) => {
+    return new Promise((resolve, reject) => {
 
-            calendarModal.onDidDismiss((data:any) => {
-              if (data && Array.isArray(data)) {
-                resolve(this.calSvc.wrapResult(data, options.pickMode));
-              } else {
-                reject('cancelled')
-              }
-            });
-        });
+      calendarModal.onDidDismiss((data: any) => {
+        if (data && Array.isArray(data)) {
+          resolve(this.calSvc.wrapResult(data, options.pickMode));
+        } else {
+          reject('cancelled')
+        }
+      });
+    });
 
-    }
+  }
 
-    setHistory(param: any) {
-        localStorage.setItem(`ion-calendar-${param.id}`, JSON.stringify(param.date));
-    }
+  setHistory(param: any) {
+    localStorage.setItem(`ion-calendar-${param.id}`, JSON.stringify(param.date));
+  }
 
-    getHistory(id: any): Object {
-        let _history = localStorage.getItem(`ion-calendar-${id}`);
-        if(_history){
-            return JSON.parse(_history);
-        }
+  getHistory(id: any): Object {
+    let _history = localStorage.getItem(`ion-calendar-${id}`);
+    if (_history) {
+      return JSON.parse(_history);
     }
+  }
 
-    removeHistory(id:any) {
-        localStorage.removeItem(`ion-calendar-${id}`)
-    }
+  removeHistory(id: any) {
+    localStorage.removeItem(`ion-calendar-${id}`)
+  }
 }

src/calendar.model.ts

@@ -1,4 +0,1 @@
-/**
- * Created by hsuanlee on 2017/4/26.
- */
 export interface CalendarOriginal {
@@ -33,3 +30,3 @@ time: number;
 
-export class DayConfig {
+export interface DayConfig {
   date: Date;
@@ -85,3 +82,3 @@ marked?: boolean;
   defaultDates?: DefaultDate[];
-  defaultDateRange?: { from:DefaultDate, to?: DefaultDate } | null;
+  defaultDateRange?: { from: DefaultDate, to?: DefaultDate } | null;
   countNextMonths?: number;
@@ -92,2 +89,14 @@ showYearPicker?: boolean;
 
+export interface CalendarComponentOptions {
+  from?: Date | number;
+  to?: Date | number;
+  pickMode?: string;
+  weekStart?: number;
+  disableWeeks?: Array<number>;
+  weekdays?: Array<string>;
+  monthFormat?: string;
+  color?: string;
+  daysConfig?: Array<DayConfig>
+}
+
 export class CalendarResult {
@@ -104,3 +113,3 @@ time: number;
 export type DefaultDate = Date | string | number | null;
-export type Colors = 'primary' | 'secondary' | 'danger' | 'light' | 'dark'
+export type Colors = 'primary' | 'secondary' | 'danger' | 'light' | 'dark' | string
 export type PickMode = 'multi' | 'single' | 'range'

src/calendar.module.ts

@@ -1,20 +0,10 @@
-/**
- * Created by youyou on 16/12/4.
- */
 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
 import { CalendarController } from './calendar.controller';
 import { IonicModule, ModalController } from 'ionic-angular';
-import { CalendarWeekComponent } from "./components/calendar-week.component";
-import { CalendarModal } from "./components/calendar.modal";
-import { MonthComponent } from "./components/month.component";
 import { CalendarService } from "./services/calendar.service";
-import { CalendarComponent } from './components/calendar.component';
+import { CALENDAR_COMPONENTS } from "./components/index";
 
 
-export function calendarController (
-  modalCtrl: ModalController,
-  calSvc: CalendarService,
-) {
+export function calendarController(modalCtrl: ModalController,
+                                   calSvc: CalendarService,) {
   return new CalendarController(modalCtrl, calSvc);
@@ -24,5 +14,7 @@ }
 @NgModule({
-  imports: [IonicModule, CommonModule],
-  declarations: [CalendarModal, CalendarWeekComponent, MonthComponent, CalendarComponent],
-  providers: [ {
+  imports: [IonicModule],
+  declarations: CALENDAR_COMPONENTS,
+  exports: CALENDAR_COMPONENTS,
+  entryComponents: CALENDAR_COMPONENTS,
+  providers: [{
     provide: CalendarController,
@@ -32,7 +24,6 @@ useFactory: calendarController,
   }, CalendarService],
-  exports:[CalendarComponent],
-  entryComponents: [CalendarModal],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
-export class CalendarModule { }
+export class CalendarModule {
+}
 

src/components/calendar-week.component.ts

 import { Component, Input } from '@angular/core';
 
 @Component({
-    selector: 'ion-calendar-week',
-    template:`
-        <ion-toolbar class="week-toolbar"  no-border-top >
-            <ul [class]="'week-title ' + color">
-                <li *ngFor="let w of _weekArray">{{w}}</li>
-            </ul>
-        </ion-toolbar>
-    `,
+  selector: 'ion-calendar-week',
+  template: `
+    <ion-toolbar class="week-toolbar" no-border-top>
+      <ul [class]="'week-title ' + color">
+        <li *ngFor="let w of _weekArray">{{w}}</li>
+      </ul>
+    </ion-toolbar>
+  `,
 })
@@ -16,30 +16,31 @@
 
-    _weekArray: string[] = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
-    _weekStart: number = 0;
-    @Input() color:string = 'primary';
+  _weekArray: string[] = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+  _weekStart: number = 0;
+  @Input() color: string = 'primary';
 
-    constructor() {}
+  constructor() {
+  }
 
-    @Input()
-    set weekArray(value:string[]) {
-        if(value && value.length === 7) {
-            this._weekArray = value;
-            this.adjustSort();
-        }
+  @Input()
+  set weekArray(value: string[]) {
+    if (value && value.length === 7) {
+      this._weekArray = value;
+      this.adjustSort();
     }
+  }
 
-    @Input()
-    set weekStart(value: number) {
-        if(value === 0 || value === 1) {
-            this._weekStart = value;
-            this.adjustSort();
-        }
+  @Input()
+  set weekStart(value: number) {
+    if (value === 0 || value === 1) {
+      this._weekStart = value;
+      this.adjustSort();
     }
+  }
 
-    adjustSort() {
-        if(this._weekStart === 1) {
-            this._weekArray.push(this._weekArray.shift() )
-        }
+  adjustSort() {
+    if (this._weekStart === 1) {
+      this._weekArray.push(this._weekArray.shift())
     }
+  }
 
 }

src/components/calendar.component.ts

@@ -1,98 +0,196 @@
-import {Component, ViewChild, ElementRef, ChangeDetectorRef, Renderer, Input, OnInit} from '@angular/core';
-import { NavParams ,ViewController, Content, InfiniteScroll } from 'ionic-angular';
+import {
+  Component,
+  Input,
+  OnInit,
+  Output,
+  EventEmitter,
+  forwardRef
+} from '@angular/core';
 
+import { CalendarMonth, CalendarControllerOptions, CalendarComponentOptions } from '../calendar.model'
+import { CalendarService } from "../services/calendar.service";
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
 import * as moment from 'moment';
 
-import {CalendarDay, CalendarMonth, CalendarOptions, CalendarControllerOptions, Colors} from '../calendar.model'
-import { CalendarService } from "../services/calendar.service";
+export const ION_CAL_VALUE_ACCESSOR: any = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => CalendarComponent),
+  multi: true
+};
 
-
 @Component({
-    selector: 'ion-calendar',
-    template: `
-        <div class="title">
-            <div class="text">
-                {{monthOpt.original.time | date: titleFormat}}
-            </div>
-            <div ion-button clear class="back" (click)="backMonth()">
-                <ion-icon name="ios-arrow-back"></ion-icon>
-            </div>
-            <div ion-button clear class="forward" (click)="nextMonth()">
-                <ion-icon name="ios-arrow-forward"></ion-icon>
-            </div>
-        </div>
+  selector: 'ion-calendar',
+  providers: [ION_CAL_VALUE_ACCESSOR],
+  template: `
+    <div class="title">
+      <div class="text">
+        {{monthOpt.original.time | date: _d.monthFormat}}
+      </div>
+      <button ion-button clear class="back" [disabled]="!canBack()" (click)="backMonth()">
+        <ion-icon name="ios-arrow-back"></ion-icon>
+      </button>
+      <button ion-button clear class="forward" [disabled]="!canNext()" (click)="nextMonth()">
+        <ion-icon name="ios-arrow-forward"></ion-icon>
+      </button>
+    </div>
 
-        <ion-calendar-week color="light"
-                           [weekStart]="weekStart">
-        </ion-calendar-week>
+    <ion-calendar-week color="transparent"
+                       [weekStart]="_d.weekStart">
+    </ion-calendar-week>
 
-        <ion-calendar-month [month]="monthOpt" [color]="color">
+    <ion-calendar-month
+      [(ngModel)]="_calendarMonthValue"
+      [month]="monthOpt"
+      (onChange)="onChanged($event)"
+      [pickMode]="_d.pickMode"
+      [color]="_d.color">
 
-        </ion-calendar-month>
+    </ion-calendar-month>
 
-    `,
+  `,
 
 })
-export class CalendarComponent implements OnInit{
+export class CalendarComponent implements ControlValueAccessor, OnInit {
 
-    monthOpt: CalendarMonth;
-    monthDate: Date = new Date();
 
-    @Input() color: Colors = 'primary';
-    @Input() titleFormat = 'MMM yyyy';
-    @Input() weekStart: number = 0;
-    @Input() disableWeeks: Array<number> = [];
-    @Input() from: number = new Date().getTime();
-    constructor(
-        private _renderer: Renderer,
-        public _elementRef: ElementRef,
-        public params: NavParams,
-        public viewCtrl: ViewController,
-        public ref: ChangeDetectorRef,
-        public calSvc: CalendarService,
+  monthOpt: CalendarMonth;
+  @Input() options: CalendarComponentOptions;
+  @Input() format: string = 'YYYY-MM-DD';
+  @Output() onChange: EventEmitter<any> = new EventEmitter();
 
-    ) {
+  _d: CalendarControllerOptions;
+  _calendarMonthValue: any[] = [null, null];
+  _onChanged: Function = () => {
+  };
+  _onTouched: Function = () => {
+  };
 
-    }
+  constructor(public calSvc: CalendarService) {
+  }
 
-    ionViewDidLoad() {
+  ionViewDidLoad() {
 
+  }
+
+  ngOnInit() {
+    this._d = this.calSvc.safeOpt(this.options || {});
+    this.monthOpt = this.createMonth(new Date().getTime());
+  }
+
+  writeValue(obj: any): void {
+    if (obj) {
+      this._writeValue(obj);
+      if (this._calendarMonthValue[0] && this._calendarMonthValue[0].time) {
+        this.monthOpt = this.createMonth(this._calendarMonthValue[0].time);
+      } else {
+        this.monthOpt = this.createMonth(new Date().getTime());
+      }
     }
+    console.log(this._calendarMonthValue[0])
+  }
 
-    ngOnInit() {
+  registerOnChange(fn: any): void {
+    this._onChanged = fn;
+  }
 
-        if(!moment.isDate(new Date(this.from))){
-            this.from = new Date().getTime();
-            console.warn('form is not a Date type')
-        }else {
-            this.from = moment(this.from).valueOf();
+  registerOnTouched(fn: any): void {
+    this._onTouched = fn;
+  }
+
+  createMonth(date: number) {
+    return this.calSvc.createMonthsByPeriod(date, 1, this._d)[0];
+  }
+
+  nextMonth() {
+    const nextTime = moment(this.monthOpt.original.time).add(1, 'months').valueOf();
+    this.monthOpt = this.createMonth(nextTime);
+  }
+
+  canNext() {
+    if (!this._d.to) return true;
+    return this.monthOpt.original.time < moment(this._d.to).valueOf();
+  }
+
+  backMonth() {
+    const backTime = moment(this.monthOpt.original.time).subtract(1, 'months').valueOf();
+    this.monthOpt = this.createMonth(backTime);
+  }
+
+  canBack() {
+    if (!this._d.from) return true;
+    return this.monthOpt.original.time > moment(this._d.from).valueOf();
+  }
+
+  onChanged($event: any[]) {
+    switch (this._d.pickMode) {
+      case 'single':
+        const date = moment($event[0].time).format(this.format);
+        this._onChanged(date);
+        this.onChange.emit(date);
+        break;
+
+      case 'range':
+        if ($event[0] && $event[1]) {
+          const rangeDate = {
+            from: moment($event[0].time).format(this.format),
+            to: moment($event[1].time).format(this.format)
+          };
+          this._onChanged(rangeDate);
+          this.onChange.emit(rangeDate);
         }
+        break;
 
-        this.monthOpt = this.createMonth();
+      case 'multi':
+        let dates = [];
 
-    }
+        for (let i = 0; i < $event.length; i++) {
+          if ($event[i] && $event[i].time) {
+            dates.push(moment($event[i].time).format(this.format))
+          }
+        }
 
-    createMonth(date: number = this.from) {
+        this._onChanged(dates);
+        this.onChange.emit(dates);
+        break;
 
-        return this.calSvc.createMonthsByPeriod(
-            date,
-            1,
-            this.calSvc.safeOpt({
-                from: new Date(date),
-                weekStart: this.weekStart,
-                disableWeeks: this.disableWeeks
-            }),
-        )[0];
-    }
+      default:
 
-    nextMonth() {
-        this.from = moment(this.from).add(1, 'months').valueOf();
-        this.monthOpt = this.createMonth();
     }
+  }
 
-    backMonth() {
-        this.from = moment(this.from).subtract(1, 'months').valueOf();
-        this.monthOpt = this.createMonth();
+  _writeValue(value: any) {
+    if (!value) return;
+    switch (this._d.pickMode) {
+      case 'single':
+        const date = moment(value, this.format);
+        this._calendarMonthValue[0] = this.calSvc.createCalendarDay(date.valueOf(), this._d);
+        break;
+
+      case 'range':
+        if (value.from) {
+          const from = moment(value.from, this.format);
+          this._calendarMonthValue[0] = this.calSvc.createCalendarDay(from.valueOf(), this._d);
+        }
+        if (value.to) {
+          const to = moment(value.to, this.format);
+          this._calendarMonthValue[1] = this.calSvc.createCalendarDay(to.valueOf(), this._d);
+        }
+        break;
+
+      case 'multi':
+        if (Array.isArray(value)) {
+          this._calendarMonthValue = value.map(e => {
+            return this.calSvc.createCalendarDay(moment(e, this.format).valueOf(), this._d);
+          });
+        } else {
+          this._calendarMonthValue = [];
+        }
+        break;
+
+      default:
+
     }
+  }
 
 }

src/components/calendar.modal.ts

@@ -1,10 +0,7 @@
-import {Component, ViewChild, ElementRef, ChangeDetectorRef, Renderer} from '@angular/core';
-import {NavParams, ViewController, Content, InfiniteScroll} from 'ionic-angular';
-
+import { Component, ViewChild, ElementRef, ChangeDetectorRef, Renderer } from '@angular/core';
+import { NavParams, ViewController, Content, InfiniteScroll } from 'ionic-angular';
+import { CalendarDay, CalendarMonth, CalendarOptions, CalendarControllerOptions } from '../calendar.model'
+import { CalendarService } from '../services/calendar.service';
 import * as moment from 'moment';
 
-import {CalendarDay, CalendarMonth, CalendarOptions, CalendarControllerOptions} from '../calendar.model'
-import {CalendarService} from '../services/calendar.service';
-
-
 @Component({
@@ -17,6 +14,13 @@ selector: 'ion-calendar-modal',
 
-        <ion-buttons start [hidden]="!showYearPicker">
-          <ion-select [(ngModel)]="year" (ngModelChange)="changedYearSelection()" interface="popover">
-            <ion-option *ngFor="let y of years" value="{{y}}">{{y}}</ion-option>
-          </ion-select>
+        <!--<ion-buttons start [hidden]="!showYearPicker">-->
+        <!--<ion-select [(ngModel)]="year" (ngModelChange)="changedYearSelection()" interface="popover">-->
+        <!--<ion-option *ngFor="let y of years" value="{{y}}">{{y}}</ion-option>-->
+        <!--</ion-select>-->
+        <!--</ion-buttons>-->
+
+        <ion-buttons start>
+          <button ion-button icon-only clear (click)="onCancel()">
+            <span *ngIf="closeLabel !== '' && !closeIcon">{{closeLabel}}</span>
+            <ion-icon *ngIf="closeIcon" name="close"></ion-icon>
+          </button>
         </ion-buttons>
@@ -27,10 +31,7 @@
         <ion-buttons end>
-          <button ion-button clear (click)="onCancel()">
-            <span *ngIf="closeLabel !== '' && !closeIcon">{{closeLabel}}</span>
-            <ion-icon *ngIf="closeIcon" name="close"></ion-icon>
-          </button>
-          <button ion-button *ngIf="!_d.autoDone" clear [disabled]="!canDone()" (click)="done()">
+          <button ion-button icon-only *ngIf="!_d.autoDone" clear [disabled]="!canDone()" (click)="done()">
             <span *ngIf="doneLabel !== '' && !doneIcon">{{doneLabel}}</span>
             <ion-icon *ngIf="doneIcon" name="checkmark"></ion-icon>
           </button>
+
         </ion-buttons>
@@ -48,3 +49,4 @@
 
-    <ion-content (ionScroll)="onScroll($event)" class="calendar-page" [ngClass]="{'multi-selection': options.pickMode === 'multi'}">
+    <ion-content (ionScroll)="onScroll($event)" class="calendar-page"
+                 [ngClass]="{'multi-selection': options.pickMode === 'multi'}">
 
@@ -348,5 +350,5 @@ <div #months>
         this.content.scrollTo(0, nowHeight - lastHeight, 0)
-          .then(() => {
-            this._s = !0;
-          })
+        .then(() => {
+          this._s = !0;
+        })
       }, 180)
@@ -353,0 +355,0 @@ }

src/components/month.component.ts

@@ -1,6 +0,6 @@
-import {Component, ChangeDetectorRef, Input, Output, EventEmitter, OnInit, forwardRef} from '@angular/core';
+import { Component, ChangeDetectorRef, Input, Output, EventEmitter, OnInit, forwardRef } from '@angular/core';
 
-import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
-import {CalendarDay, CalendarMonth, PickMode} from '../calendar.model'
+import { CalendarDay, CalendarMonth, PickMode } from '../calendar.model'
 
@@ -92,3 +92,3 @@ export const MONTH_VALUE_ACCESSOR: any = {
   isEndSelection(day: CalendarDay): boolean {
-    if(!day) return;
+    if (!day) return;
     if (this.pickMode !== 'range' || !Array.isArray(this._date) || this._date[1] === null) {
@@ -102,3 +102,3 @@ return false;
   isBetween(day: CalendarDay): boolean {
-    if(!day) return;
+    if (!day) return;
 
@@ -129,3 +129,3 @@ if (this.pickMode !== 'range' || !Array.isArray(this._date)) {
   isStartSelection(day: CalendarDay): boolean {
-    if(!day) return;
+    if (!day) return;
     if (this.pickMode !== 'range' || !Array.isArray(this._date) || this._date[0] === null) {
@@ -163,3 +163,2 @@ return false;
 
-
     if (this.pickMode === 'single') {
@@ -166,0 +165,0 @@ this._date[0] = item;

src/index.ts

 export * from './calendar.model';
+export * from './components/index'
 export { CalendarModule } from './calendar.module';
 export { CalendarController } from './calendar.controller';
-export { ModalController } from 'ionic-angular';
-export { CalendarWeekComponent } from './components/calendar-week.component'
-export * from './components/calendar.modal';

src/services/calendar.service.ts

@@ -1,9 +0,12 @@
-/**
- * Created by hsuanlee on 27/05/2017.
- */
 import { Injectable } from '@angular/core';
-import {CalendarOriginal, CalendarDay, CalendarMonth, CalendarControllerOptions, DayConfig, CalendarResult} from '../calendar.model'
+import {
+  CalendarOriginal,
+  CalendarDay,
+  CalendarMonth,
+  CalendarControllerOptions,
+  CalendarResult,
+  DayConfig
+} from '../calendar.model'
 import * as moment from 'moment';
 
-
 @Injectable()
@@ -16,3 +19,5 @@ export class CalendarService {
 
-  safeOpt(calendarOptions: CalendarControllerOptions): CalendarControllerOptions {
+  safeOpt(calendarOptions: any): CalendarControllerOptions {
+    const _disableWeeks: number[] = [];
+    const _daysConfig: DayConfig[] = [];
     let {
@@ -25,3 +30,3 @@ autoDone = false,
       canBackwardsSelected = false,
-      disableWeeks = [],
+      disableWeeks = _disableWeeks,
       closeLabel = 'CANCEL',
@@ -38,3 +43,3 @@ closeIcon = false,
       weekdays = ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
-      daysConfig = [],
+      daysConfig = _daysConfig,
       countNextMonths = 3,
@@ -116,3 +121,3 @@ showYearPicker = false,
       if (!opt.canBackwardsSelected) {
-        let _addTime = _time.add( 1, 'day');
+        let _addTime = _time.add(1, 'day');
         isBetween = !_addTime.isAfter(_rangeBeg);
@@ -119,0 +124,0 @@ } else {

New alerts

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

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

Improved metrics

Total package byte prevSize

259525

increased by4.38%

Number of package files

69

increased by7.81%

Lines of code

4190

increased by4.65%

No dependency changes