ion2-calendar - npm Package Compare versions

Comparing version 2.1.4 to 2.1.5

dist/calendar.controller.d.ts

@@ -7,3 +7,2 @@ import { ModalController } from 'ionic-angular';
     calSvc: CalendarService;
-    isRadio: boolean;
     constructor(modalCtrl: ModalController, calSvc: CalendarService);
@@ -16,12 +15,3 @@ /**
      */
-    openCalendar(calendarOptions: CalendarModalOptions, modalOptions?: ModalOptions): any;
-    /**
-     * @deprecated
-     */
-    setHistory(param: any): void;
-    /**
-     * @deprecated
-     */
-    getHistory(id: any): Object;
-    removeHistory(id: any): void;
+    openCalendar(calendarOptions: CalendarModalOptions, modalOptions?: ModalOptions): Promise<{}>;
 }

dist/calendar.controller.js

@@ -1,5 +0,7 @@
-import { Injectable } from '@angular/core';
-import { ModalController } from 'ionic-angular';
-import { CalendarModal } from "./components/calendar.modal";
-import { CalendarService } from './services/calendar.service';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var core_1 = require("@angular/core");
+var ionic_angular_1 = require("ionic-angular");
+var calendar_modal_1 = require("./components/calendar.modal");
+var calendar_service_1 = require("./services/calendar.service");
 var CalendarController = /** @class */ (function () {
@@ -19,4 +21,4 @@ function CalendarController(modalCtrl, calSvc) {
         var options = this.calSvc.safeOpt(calendarOptions);
-        var calendarModal = this.modalCtrl.create(CalendarModal, Object.assign({
-            options: options,
+        var calendarModal = this.modalCtrl.create(calendar_modal_1.CalendarModal, Object.assign({
+            options: options
         }, options), modalOptions);
@@ -35,29 +37,13 @@ calendarModal.present();
     };
-    /**
-     * @deprecated
-     */
-    CalendarController.prototype.setHistory = function (param) {
-        console.warn('setHistory deprecated');
-    };
-    /**
-     * @deprecated
-     */
-    CalendarController.prototype.getHistory = function (id) {
-        console.warn('getHistory deprecated');
-        return null;
-    };
-    CalendarController.prototype.removeHistory = function (id) {
-        localStorage.removeItem("ion-calendar-" + id);
-    };
     CalendarController.decorators = [
-        { type: Injectable },
+        { type: core_1.Injectable },
     ];
     /** @nocollapse */
     CalendarController.ctorParameters = function () { return [
-        { type: ModalController, },
-        { type: CalendarService, },
+        { type: ionic_angular_1.ModalController, },
+        { type: calendar_service_1.CalendarService, },
     ]; };
     return CalendarController;
 }());
-export { CalendarController };
+exports.CalendarController = CalendarController;
 //# sourceMappingURL=calendar.controller.js.map

dist/calendar.controller.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"CalendarController":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ionic-angular","name":"ModalController"},{"__symbolic":"reference","module":"./services/calendar.service","name":"CalendarService"}]}],"openCalendar":[{"__symbolic":"method"}],"setHistory":[{"__symbolic":"method"}],"getHistory":[{"__symbolic":"method"}],"removeHistory":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CalendarController":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ionic-angular","name":"ModalController"},{"__symbolic":"reference","module":"./services/calendar.service","name":"CalendarService"}]}],"openCalendar":[{"__symbolic":"method"}],"setHistory":[{"__symbolic":"method"}],"getHistory":[{"__symbolic":"method"}],"removeHistory":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"CalendarController":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ionic-angular","name":"ModalController"},{"__symbolic":"reference","module":"./services/calendar.service","name":"CalendarService"}]}],"openCalendar":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CalendarController":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ionic-angular","name":"ModalController"},{"__symbolic":"reference","module":"./services/calendar.service","name":"CalendarService"}]}],"openCalendar":[{"__symbolic":"method"}]}}}}]

dist/calendar.model.d.ts

@@ -35,12 +35,2 @@ export interface CalendarOriginal {
 }
-export declare class PrivateCalendarOptions {
-    start: number;
-    end: number;
-    pickMode: string;
-    monthFormat: string;
-    range_beg: number;
-    range_end: number;
-    daysConfig: Array<DayConfig>;
-    disableWeeks: Array<number>;
-}
 export interface ModalOptions {
@@ -104,4 +94,10 @@ showBackdrop?: boolean;
 }
+export declare class CalendarComponentMonthChange {
+    oldMonth: CalendarResult;
+    newMonth: CalendarResult;
+}
 export declare type DefaultDate = Date | string | number | null;
 export declare type Colors = 'primary' | 'secondary' | 'danger' | 'light' | 'dark' | string;
 export declare type PickMode = 'multi' | 'single' | 'range';
+export declare type CalendarComponentTypeProperty = ('string' | 'js-date' | 'moment' | 'time' | 'object');
+export declare type CalendarComponentPayloadTypes = string | Date | number | {};

dist/calendar.model.js

@@ -0,1 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 var CalendarMonth = /** @class */ (function () {
@@ -6,9 +8,3 @@ function CalendarMonth() {
 }());
-export { CalendarMonth };
-var PrivateCalendarOptions = /** @class */ (function () {
-    function PrivateCalendarOptions() {
-    }
-    return PrivateCalendarOptions;
-}());
-export { PrivateCalendarOptions };
+exports.CalendarMonth = CalendarMonth;
 var CalendarResult = /** @class */ (function () {
@@ -19,3 +15,9 @@ function CalendarResult() {
 }());
-export { CalendarResult };
+exports.CalendarResult = CalendarResult;
+var CalendarComponentMonthChange = /** @class */ (function () {
+    function CalendarComponentMonthChange() {
+    }
+    return CalendarComponentMonthChange;
+}());
+exports.CalendarComponentMonthChange = CalendarComponentMonthChange;
 //# sourceMappingURL=calendar.model.js.map

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"},"PrivateCalendarOptions":{"__symbolic":"class"},"ModalOptions":{"__symbolic":"interface"},"CalendarModalOptions":{"__symbolic":"interface"},"CalendarOptions":{"__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"},"PrivateCalendarOptions":{"__symbolic":"class"},"ModalOptions":{"__symbolic":"interface"},"CalendarModalOptions":{"__symbolic":"interface"},"CalendarOptions":{"__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"},"ModalOptions":{"__symbolic":"interface"},"CalendarModalOptions":{"__symbolic":"interface"},"CalendarOptions":{"__symbolic":"interface"},"CalendarComponentOptions":{"__symbolic":"interface"},"CalendarResult":{"__symbolic":"class"},"CalendarComponentMonthChange":{"__symbolic":"class"},"DefaultDate":{"__symbolic":"interface"},"Colors":{"__symbolic":"interface"},"PickMode":{"__symbolic":"interface"},"CalendarComponentTypeProperty":{"__symbolic":"interface"},"CalendarComponentPayloadTypes":{"__symbolic":"interface"}}},{"__symbolic":"module","version":1,"metadata":{"CalendarOriginal":{"__symbolic":"interface"},"CalendarDay":{"__symbolic":"interface"},"CalendarMonth":{"__symbolic":"class"},"DayConfig":{"__symbolic":"interface"},"ModalOptions":{"__symbolic":"interface"},"CalendarModalOptions":{"__symbolic":"interface"},"CalendarOptions":{"__symbolic":"interface"},"CalendarComponentOptions":{"__symbolic":"interface"},"CalendarResult":{"__symbolic":"class"},"CalendarComponentMonthChange":{"__symbolic":"class"},"DefaultDate":{"__symbolic":"interface"},"Colors":{"__symbolic":"interface"},"PickMode":{"__symbolic":"interface"},"CalendarComponentTypeProperty":{"__symbolic":"interface"},"CalendarComponentPayloadTypes":{"__symbolic":"interface"}}}]

dist/calendar.module.js

@@ -1,9 +0,12 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { CalendarController } from './calendar.controller';
-import { IonicModule, ModalController } from 'ionic-angular';
-import { CalendarService } from "./services/calendar.service";
-import { CALENDAR_COMPONENTS } from "./components/index";
-export function calendarController(modalCtrl, calSvc) {
-    return new CalendarController(modalCtrl, calSvc);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var core_1 = require("@angular/core");
+var calendar_controller_1 = require("./calendar.controller");
+var ionic_angular_1 = require("ionic-angular");
+var calendar_service_1 = require("./services/calendar.service");
+var index_1 = require("./components/index");
+function calendarController(modalCtrl, calSvc) {
+    return new calendar_controller_1.CalendarController(modalCtrl, calSvc);
 }
+exports.calendarController = calendarController;
 var CalendarModule = /** @class */ (function () {
@@ -13,13 +16,16 @@ function CalendarModule() {
     CalendarModule.decorators = [
-        { type: NgModule, args: [{
-                    imports: [IonicModule],
-                    declarations: CALENDAR_COMPONENTS,
-                    exports: CALENDAR_COMPONENTS,
-                    entryComponents: CALENDAR_COMPONENTS,
-                    providers: [{
-                            provide: CalendarController,
+        { type: core_1.NgModule, args: [{
+                    imports: [ionic_angular_1.IonicModule],
+                    declarations: index_1.CALENDAR_COMPONENTS,
+                    exports: index_1.CALENDAR_COMPONENTS,
+                    entryComponents: index_1.CALENDAR_COMPONENTS,
+                    providers: [
+                        calendar_service_1.CalendarService,
+                        {
+                            provide: calendar_controller_1.CalendarController,
                             useFactory: calendarController,
-                            deps: [ModalController, CalendarService],
-                        }, CalendarService],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                            deps: [ionic_angular_1.ModalController, calendar_service_1.CalendarService]
+                        }
+                    ],
+                    schemas: [core_1.CUSTOM_ELEMENTS_SCHEMA]
                 },] },
@@ -31,3 +37,3 @@ ];
 }());
-export { CalendarModule };
+exports.CalendarModule = CalendarModule;
 //# sourceMappingURL=calendar.module.js.map

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"}],"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"}]}]}]}}}]
+[{"__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":[{"__symbolic":"reference","module":"./services/calendar.service","name":"CalendarService"},{"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"}]}],"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":[{"__symbolic":"reference","module":"./services/calendar.service","name":"CalendarService"},{"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"}]}],"schemas":[{"__symbolic":"reference","module":"@angular/core","name":"CUSTOM_ELEMENTS_SCHEMA"}]}]}]}}}]

dist/components/calendar-week.component.d.ts

 export declare class CalendarWeekComponent {
     _weekArray: string[];
+    _displayWeekArray: string[];
     _weekStart: number;
@@ -4,0 +5,0 @@ color: string;

dist/components/calendar-week.component.js

@@ -1,8 +0,11 @@
-import { Component, Input } from '@angular/core';
-import { defaults } from "../config";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var core_1 = require("@angular/core");
+var config_1 = require("../config");
 var CalendarWeekComponent = /** @class */ (function () {
     function CalendarWeekComponent() {
-        this._weekArray = defaults.WEEKS_FORMAT;
+        this._weekArray = config_1.defaults.WEEKS_FORMAT;
+        this._displayWeekArray = this._weekArray;
         this._weekStart = 0;
-        this.color = defaults.COLOR;
+        this.color = config_1.defaults.COLOR;
     }
@@ -31,9 +34,14 @@ Object.defineProperty(CalendarWeekComponent.prototype, "weekArray", {
         if (this._weekStart === 1) {
-            this._weekArray.push(this._weekArray.shift());
+            var cacheWeekArray = this._weekArray.slice();
+            cacheWeekArray.push(cacheWeekArray.shift());
+            this._displayWeekArray = cacheWeekArray.slice();
         }
+        else if (this._weekStart === 0) {
+            this._displayWeekArray = this._weekArray.slice();
+        }
     };
     CalendarWeekComponent.decorators = [
-        { type: Component, args: [{
+        { type: core_1.Component, args: [{
                     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 _displayWeekArray\">{{w}}</li>\n      </ul>\n    </ion-toolbar>\n  "
                 },] },
@@ -44,9 +52,9 @@ ];
     CalendarWeekComponent.propDecorators = {
-        'color': [{ type: Input },],
-        'weekArray': [{ type: Input },],
-        'weekStart': [{ type: Input },],
+        'color': [{ type: core_1.Input },],
+        'weekArray': [{ type: core_1.Input },],
+        'weekStart': [{ type: core_1.Input },],
     };
     return CalendarWeekComponent;
 }());
-export { CalendarWeekComponent };
+exports.CalendarWeekComponent = CalendarWeekComponent;
 //# sourceMappingURL=calendar-week.component.js.map

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 _displayWeekArray\">{{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 _displayWeekArray\">{{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,6 +0,6 @@
-import { OnInit, EventEmitter } from '@angular/core';
-import { CalendarMonth, CalendarModalOptions, CalendarComponentOptions, CalendarDay } from '../calendar.model';
+import { OnInit, EventEmitter, Provider } from '@angular/core';
+import { CalendarMonth, CalendarModalOptions, CalendarComponentOptions, CalendarDay, CalendarComponentPayloadTypes, CalendarComponentMonthChange, CalendarComponentTypeProperty } from '../calendar.model';
 import { CalendarService } from "../services/calendar.service";
 import { ControlValueAccessor } from '@angular/forms';
-export declare const ION_CAL_VALUE_ACCESSOR: any;
+export declare const ION_CAL_VALUE_ACCESSOR: Provider;
 export declare class CalendarComponent implements ControlValueAccessor, OnInit {
@@ -10,4 +10,4 @@ calSvc: CalendarService;
     _options: CalendarComponentOptions;
-    _view: string;
-    _calendarMonthValue: any[];
+    _view: 'month' | 'days';
+    _calendarMonthValue: CalendarDay[];
     _showToggleButtons: boolean;
@@ -17,6 +17,9 @@ _showMonthPicker: boolean;
     format: string;
-    type: 'string' | 'js-date' | 'moment' | 'time' | 'object';
+    type: CalendarComponentTypeProperty;
     readonly: boolean;
-    onChange: EventEmitter<any>;
-    monthChange: EventEmitter<any>;
+    onChange: EventEmitter<CalendarComponentPayloadTypes>;
+    monthChange: EventEmitter<CalendarComponentMonthChange>;
+    onSelect: EventEmitter<CalendarDay>;
+    onSelectStart: EventEmitter<CalendarDay>;
+    onSelectEnd: EventEmitter<CalendarDay>;
     options: CalendarComponentOptions;
@@ -26,10 +29,9 @@ _onChanged: Function;
     constructor(calSvc: CalendarService);
-    ionViewDidLoad(): void;
     ngOnInit(): void;
     initOpt(): void;
     writeValue(obj: any): void;
-    registerOnChange(fn: any): void;
-    registerOnTouched(fn: any): void;
+    registerOnChange(fn: () => {}): void;
+    registerOnTouched(fn: () => {}): void;
     createMonth(date: number): CalendarMonth;
-    switchView(): string;
+    switchView(): void;
     prev(): void;
@@ -44,8 +46,8 @@ next(): void;
     monthOnSelect(month: number): void;
-    onChanged($event: any[]): void;
+    onChanged($event: CalendarDay[]): void;
     swipeEvent($event: any): void;
     _writeValue(value: any): void;
-    _createCalendarDay(value: any): CalendarDay;
-    _handleType(value: number): any;
-    _monthFormat(date: any): string;
+    _createCalendarDay(value: CalendarComponentPayloadTypes): CalendarDay;
+    _handleType(value: number): CalendarComponentPayloadTypes;
+    _monthFormat(date: number): string;
 }

dist/components/calendar.component.js

@@ -1,9 +0,11 @@
-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 { defaults, pickModes } from "../config";
-export var ION_CAL_VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(function () { return CalendarComponent; }),
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var core_1 = require("@angular/core");
+var calendar_service_1 = require("../services/calendar.service");
+var forms_1 = require("@angular/forms");
+var moment = require("moment");
+var config_1 = require("../config");
+exports.ION_CAL_VALUE_ACCESSOR = {
+    provide: forms_1.NG_VALUE_ACCESSOR,
+    useExisting: core_1.forwardRef(function () { return CalendarComponent; }),
     multi: true
@@ -18,9 +20,14 @@ };
         this._showMonthPicker = true;
-        this.format = defaults.DATE_FORMAT;
+        this.format = config_1.defaults.DATE_FORMAT;
         this.type = 'string';
         this.readonly = false;
-        this.onChange = new EventEmitter();
-        this.monthChange = new EventEmitter();
-        this._onChanged = function () { };
-        this._onTouched = function () { };
+        this.onChange = new core_1.EventEmitter();
+        this.monthChange = new core_1.EventEmitter();
+        this.onSelect = new core_1.EventEmitter();
+        this.onSelectStart = new core_1.EventEmitter();
+        this.onSelectEnd = new core_1.EventEmitter();
+        this._onChanged = function () {
+        };
+        this._onTouched = function () {
+        };
     }
@@ -41,4 +48,2 @@ Object.defineProperty(CalendarComponent.prototype, "options", {
     });
-    CalendarComponent.prototype.ionViewDidLoad = function () {
-    };
     CalendarComponent.prototype.ngOnInit = function () {
@@ -49,7 +54,10 @@ this.initOpt();
     CalendarComponent.prototype.initOpt = function () {
-        if (this._options && this._options.showToggleButtons === false) {
-            this._showToggleButtons = false;
+        if (this._options && typeof this._options.showToggleButtons === 'boolean') {
+            this._showToggleButtons = this._options.showToggleButtons;
         }
-        if (this._options && this._options.showMonthPicker === false) {
-            this._showMonthPicker = false;
+        if (this._options && typeof this._options.showMonthPicker === 'boolean') {
+            this._showMonthPicker = this._options.showMonthPicker;
+            if (this._view !== 'days' && !this._showMonthPicker) {
+                this._view = 'days';
+            }
         }
@@ -80,3 +88,2 @@ this._d = this.calSvc.safeOpt(this._options || {});
         this._view = this._view === 'days' ? 'month' : 'days';
-        return this._view;
     };
@@ -100,2 +107,4 @@ CalendarComponent.prototype.prev = function () {
     CalendarComponent.prototype.prevYear = function () {
+        if (moment(this.monthOpt.original.time).year() === 1970)
+            return;
         var backTime = moment(this.monthOpt.original.time).subtract(1, 'year').valueOf();
@@ -145,3 +154,3 @@ this.monthOpt = this.createMonth(backTime);
         switch (this._d.pickMode) {
-            case pickModes.SINGLE:
+            case config_1.pickModes.SINGLE:
                 var date = this._handleType($event[0].time);
@@ -151,3 +160,3 @@ this._onChanged(date);
                 break;
-            case pickModes.RANGE:
+            case config_1.pickModes.RANGE:
                 if ($event[0] && $event[1]) {
@@ -162,3 +171,3 @@ var rangeDate = {
                 break;
-            case pickModes.MULTI:
+            case config_1.pickModes.MULTI:
                 var dates = [];
@@ -244,6 +253,6 @@ for (var i = 0; i < $event.length; i++) {
     CalendarComponent.decorators = [
-        { type: Component, args: [{
+        { type: core_1.Component, args: [{
                     selector: 'ion-calendar',
-                    providers: [ION_CAL_VALUE_ACCESSOR],
-                    template: "\n    <div class=\"title\">\n      <ng-template [ngIf]=\"_showMonthPicker\" [ngIfElse]=\"title\">\n        <button type=\"button\"\n                ion-button\n                clear\n                class=\"switch-btn\"\n                (click)=\"switchView()\">\n          {{_monthFormat(monthOpt.original.time)}}\n          <ion-icon class=\"arrow-dropdown\"\n                    [name]=\"_view === 'days' ? 'md-arrow-dropdown' : 'md-arrow-dropup'\"></ion-icon>\n        </button>\n      </ng-template>\n      <ng-template #title>\n        <div class=\"switch-btn\">\n          {{_monthFormat(monthOpt.original.time)}}\n        </div>\n      </ng-template>\n      <ng-template [ngIf]=\"_showToggleButtons\">\n        <button type='button' ion-button clear class=\"back\" [disabled]=\"!canBack()\" (click)=\"prev()\">\n          <ion-icon name=\"ios-arrow-back\"></ion-icon>\n        </button>\n        <button type='button' ion-button clear class=\"forward\" [disabled]=\"!canNext()\" (click)=\"next()\">\n          <ion-icon name=\"ios-arrow-forward\"></ion-icon>\n        </button>\n      </ng-template>\n    </div>\n    \n    <ng-template [ngIf]=\"_view === 'days'\" [ngIfElse]=\"monthPicker\">\n      <ion-calendar-week color=\"transparent\"\n                         [weekArray]=\"_d.weekdays\"\n                         [weekStart]=\"_d.weekStart\">\n      </ion-calendar-week>\n\n      <ion-calendar-month [(ngModel)]=\"_calendarMonthValue\"\n                          [month]=\"monthOpt\"\n                          [readonly]=\"readonly\"\n                          (onChange)=\"onChanged($event)\"\n                          (swipe)=\"swipeEvent($event)\"\n                          [pickMode]=\"_d.pickMode\"\n                          [color]=\"_d.color\">\n      </ion-calendar-month>\n    </ng-template>\n\n    <ng-template #monthPicker>\n      <ion-calendar-month-picker [color]=\"_d.color\"\n                                 [monthFormat]=\"_options?.monthPickerFormat\"\n                                 (onSelect)=\"monthOnSelect($event)\"\n                                 [month]=\"monthOpt\">\n      </ion-calendar-month-picker>\n    </ng-template>\n  ",
+                    providers: [exports.ION_CAL_VALUE_ACCESSOR],
+                    template: "\n    <div class=\"title\">\n      <ng-template [ngIf]=\"_showMonthPicker\" [ngIfElse]=\"title\">\n        <button type=\"button\"\n                ion-button\n                clear\n                class=\"switch-btn\"\n                (click)=\"switchView()\">\n          {{_monthFormat(monthOpt.original.time)}}\n          <ion-icon class=\"arrow-dropdown\"\n                    [name]=\"_view === 'days' ? 'md-arrow-dropdown' : 'md-arrow-dropup'\"></ion-icon>\n        </button>\n      </ng-template>\n      <ng-template #title>\n        <div class=\"switch-btn\">\n          {{_monthFormat(monthOpt.original.time)}}\n        </div>\n      </ng-template>\n      <ng-template [ngIf]=\"_showToggleButtons\">\n        <button type='button' ion-button clear class=\"back\" [disabled]=\"!canBack()\" (click)=\"prev()\">\n          <ion-icon name=\"ios-arrow-back\"></ion-icon>\n        </button>\n        <button type='button' ion-button clear class=\"forward\" [disabled]=\"!canNext()\" (click)=\"next()\">\n          <ion-icon name=\"ios-arrow-forward\"></ion-icon>\n        </button>\n      </ng-template>\n    </div>\n    <ng-template [ngIf]=\"_view === 'days'\" [ngIfElse]=\"monthPicker\">\n      <ion-calendar-week color=\"transparent\"\n                         [weekArray]=\"_d.weekdays\"\n                         [weekStart]=\"_d.weekStart\">\n      </ion-calendar-week>\n\n      <ion-calendar-month [(ngModel)]=\"_calendarMonthValue\"\n                          [month]=\"monthOpt\"\n                          [readonly]=\"readonly\"\n                          (onChange)=\"onChanged($event)\"\n                          (swipe)=\"swipeEvent($event)\"\n                          (onSelect)=\"onSelect.emit($event)\"\n                          (onSelectStart)=\"onSelectStart.emit($event)\"\n                          (onSelectEnd)=\"onSelectEnd.emit($event)\"\n                          [pickMode]=\"_d.pickMode\"\n                          [color]=\"_d.color\">\n      </ion-calendar-month>\n    </ng-template>\n\n    <ng-template #monthPicker>\n      <ion-calendar-month-picker [color]=\"_d.color\"\n                                 [monthFormat]=\"_options?.monthPickerFormat\"\n                                 (onSelect)=\"monthOnSelect($event)\"\n                                 [month]=\"monthOpt\">\n      </ion-calendar-month-picker>\n    </ng-template>\n  "
                 },] },
@@ -253,15 +262,18 @@ ];
     CalendarComponent.ctorParameters = function () { return [
-        { type: CalendarService, },
+        { type: calendar_service_1.CalendarService, },
     ]; };
     CalendarComponent.propDecorators = {
-        'format': [{ type: Input },],
-        'type': [{ type: Input },],
-        'readonly': [{ type: Input },],
-        'onChange': [{ type: Output },],
-        'monthChange': [{ type: Output },],
-        'options': [{ type: Input },],
+        'format': [{ type: core_1.Input },],
+        'type': [{ type: core_1.Input },],
+        'readonly': [{ type: core_1.Input },],
+        'onChange': [{ type: core_1.Output },],
+        'monthChange': [{ type: core_1.Output },],
+        'onSelect': [{ type: core_1.Output },],
+        'onSelectStart': [{ type: core_1.Output },],
+        'onSelectEnd': [{ type: core_1.Output },],
+        'options': [{ type: core_1.Input },],
     };
     return CalendarComponent;
 }());
-export { CalendarComponent };
+exports.CalendarComponent = CalendarComponent;
 //# sourceMappingURL=calendar.component.js.map

dist/components/calendar.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__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      <ng-template [ngIf]=\"_showMonthPicker\" [ngIfElse]=\"title\">\n        <button type=\"button\"\n                ion-button\n                clear\n                class=\"switch-btn\"\n                (click)=\"switchView()\">\n          {{_monthFormat(monthOpt.original.time)}}\n          <ion-icon class=\"arrow-dropdown\"\n                    [name]=\"_view === 'days' ? 'md-arrow-dropdown' : 'md-arrow-dropup'\"></ion-icon>\n        </button>\n      </ng-template>\n      <ng-template #title>\n        <div class=\"switch-btn\">\n          {{_monthFormat(monthOpt.original.time)}}\n        </div>\n      </ng-template>\n      <ng-template [ngIf]=\"_showToggleButtons\">\n        <button type='button' ion-button clear class=\"back\" [disabled]=\"!canBack()\" (click)=\"prev()\">\n          <ion-icon name=\"ios-arrow-back\"></ion-icon>\n        </button>\n        <button type='button' ion-button clear class=\"forward\" [disabled]=\"!canNext()\" (click)=\"next()\">\n          <ion-icon name=\"ios-arrow-forward\"></ion-icon>\n        </button>\n      </ng-template>\n    </div>\n    \n    <ng-template [ngIf]=\"_view === 'days'\" [ngIfElse]=\"monthPicker\">\n      <ion-calendar-week color=\"transparent\"\n                         [weekArray]=\"_d.weekdays\"\n                         [weekStart]=\"_d.weekStart\">\n      </ion-calendar-week>\n\n      <ion-calendar-month [(ngModel)]=\"_calendarMonthValue\"\n                          [month]=\"monthOpt\"\n                          [readonly]=\"readonly\"\n                          (onChange)=\"onChanged($event)\"\n                          (swipe)=\"swipeEvent($event)\"\n                          [pickMode]=\"_d.pickMode\"\n                          [color]=\"_d.color\">\n      </ion-calendar-month>\n    </ng-template>\n\n    <ng-template #monthPicker>\n      <ion-calendar-month-picker [color]=\"_d.color\"\n                                 [monthFormat]=\"_options?.monthPickerFormat\"\n                                 (onSelect)=\"monthOnSelect($event)\"\n                                 [month]=\"monthOpt\">\n      </ion-calendar-month-picker>\n    </ng-template>\n  "}]}],"members":{"format":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"readonly":[{"__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"}}]}],"monthChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../services/calendar.service","name":"CalendarService"}]}],"ionViewDidLoad":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"initOpt":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"createMonth":[{"__symbolic":"method"}],"switchView":[{"__symbolic":"method"}],"prev":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"prevYear":[{"__symbolic":"method"}],"nextYear":[{"__symbolic":"method"}],"nextMonth":[{"__symbolic":"method"}],"canNext":[{"__symbolic":"method"}],"backMonth":[{"__symbolic":"method"}],"canBack":[{"__symbolic":"method"}],"monthOnSelect":[{"__symbolic":"method"}],"onChanged":[{"__symbolic":"method"}],"swipeEvent":[{"__symbolic":"method"}],"_writeValue":[{"__symbolic":"method"}],"_createCalendarDay":[{"__symbolic":"method"}],"_handleType":[{"__symbolic":"method"}],"_monthFormat":[{"__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      <ng-template [ngIf]=\"_showMonthPicker\" [ngIfElse]=\"title\">\n        <button type=\"button\"\n                ion-button\n                clear\n                class=\"switch-btn\"\n                (click)=\"switchView()\">\n          {{_monthFormat(monthOpt.original.time)}}\n          <ion-icon class=\"arrow-dropdown\"\n                    [name]=\"_view === 'days' ? 'md-arrow-dropdown' : 'md-arrow-dropup'\"></ion-icon>\n        </button>\n      </ng-template>\n      <ng-template #title>\n        <div class=\"switch-btn\">\n          {{_monthFormat(monthOpt.original.time)}}\n        </div>\n      </ng-template>\n      <ng-template [ngIf]=\"_showToggleButtons\">\n        <button type='button' ion-button clear class=\"back\" [disabled]=\"!canBack()\" (click)=\"prev()\">\n          <ion-icon name=\"ios-arrow-back\"></ion-icon>\n        </button>\n        <button type='button' ion-button clear class=\"forward\" [disabled]=\"!canNext()\" (click)=\"next()\">\n          <ion-icon name=\"ios-arrow-forward\"></ion-icon>\n        </button>\n      </ng-template>\n    </div>\n    \n    <ng-template [ngIf]=\"_view === 'days'\" [ngIfElse]=\"monthPicker\">\n      <ion-calendar-week color=\"transparent\"\n                         [weekArray]=\"_d.weekdays\"\n                         [weekStart]=\"_d.weekStart\">\n      </ion-calendar-week>\n\n      <ion-calendar-month [(ngModel)]=\"_calendarMonthValue\"\n                          [month]=\"monthOpt\"\n                          [readonly]=\"readonly\"\n                          (onChange)=\"onChanged($event)\"\n                          (swipe)=\"swipeEvent($event)\"\n                          [pickMode]=\"_d.pickMode\"\n                          [color]=\"_d.color\">\n      </ion-calendar-month>\n    </ng-template>\n\n    <ng-template #monthPicker>\n      <ion-calendar-month-picker [color]=\"_d.color\"\n                                 [monthFormat]=\"_options?.monthPickerFormat\"\n                                 (onSelect)=\"monthOnSelect($event)\"\n                                 [month]=\"monthOpt\">\n      </ion-calendar-month-picker>\n    </ng-template>\n  "}]}],"members":{"format":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"readonly":[{"__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"}}]}],"monthChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../services/calendar.service","name":"CalendarService"}]}],"ionViewDidLoad":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"initOpt":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"createMonth":[{"__symbolic":"method"}],"switchView":[{"__symbolic":"method"}],"prev":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"prevYear":[{"__symbolic":"method"}],"nextYear":[{"__symbolic":"method"}],"nextMonth":[{"__symbolic":"method"}],"canNext":[{"__symbolic":"method"}],"backMonth":[{"__symbolic":"method"}],"canBack":[{"__symbolic":"method"}],"monthOnSelect":[{"__symbolic":"method"}],"onChanged":[{"__symbolic":"method"}],"swipeEvent":[{"__symbolic":"method"}],"_writeValue":[{"__symbolic":"method"}],"_createCalendarDay":[{"__symbolic":"method"}],"_handleType":[{"__symbolic":"method"}],"_monthFormat":[{"__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      <ng-template [ngIf]=\"_showMonthPicker\" [ngIfElse]=\"title\">\n        <button type=\"button\"\n                ion-button\n                clear\n                class=\"switch-btn\"\n                (click)=\"switchView()\">\n          {{_monthFormat(monthOpt.original.time)}}\n          <ion-icon class=\"arrow-dropdown\"\n                    [name]=\"_view === 'days' ? 'md-arrow-dropdown' : 'md-arrow-dropup'\"></ion-icon>\n        </button>\n      </ng-template>\n      <ng-template #title>\n        <div class=\"switch-btn\">\n          {{_monthFormat(monthOpt.original.time)}}\n        </div>\n      </ng-template>\n      <ng-template [ngIf]=\"_showToggleButtons\">\n        <button type='button' ion-button clear class=\"back\" [disabled]=\"!canBack()\" (click)=\"prev()\">\n          <ion-icon name=\"ios-arrow-back\"></ion-icon>\n        </button>\n        <button type='button' ion-button clear class=\"forward\" [disabled]=\"!canNext()\" (click)=\"next()\">\n          <ion-icon name=\"ios-arrow-forward\"></ion-icon>\n        </button>\n      </ng-template>\n    </div>\n    <ng-template [ngIf]=\"_view === 'days'\" [ngIfElse]=\"monthPicker\">\n      <ion-calendar-week color=\"transparent\"\n                         [weekArray]=\"_d.weekdays\"\n                         [weekStart]=\"_d.weekStart\">\n      </ion-calendar-week>\n\n      <ion-calendar-month [(ngModel)]=\"_calendarMonthValue\"\n                          [month]=\"monthOpt\"\n                          [readonly]=\"readonly\"\n                          (onChange)=\"onChanged($event)\"\n                          (swipe)=\"swipeEvent($event)\"\n                          (onSelect)=\"onSelect.emit($event)\"\n                          (onSelectStart)=\"onSelectStart.emit($event)\"\n                          (onSelectEnd)=\"onSelectEnd.emit($event)\"\n                          [pickMode]=\"_d.pickMode\"\n                          [color]=\"_d.color\">\n      </ion-calendar-month>\n    </ng-template>\n\n    <ng-template #monthPicker>\n      <ion-calendar-month-picker [color]=\"_d.color\"\n                                 [monthFormat]=\"_options?.monthPickerFormat\"\n                                 (onSelect)=\"monthOnSelect($event)\"\n                                 [month]=\"monthOpt\">\n      </ion-calendar-month-picker>\n    </ng-template>\n  "}]}],"members":{"format":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"readonly":[{"__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"}}]}],"monthChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onSelectStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onSelectEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../services/calendar.service","name":"CalendarService"}]}],"ngOnInit":[{"__symbolic":"method"}],"initOpt":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"createMonth":[{"__symbolic":"method"}],"switchView":[{"__symbolic":"method"}],"prev":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"prevYear":[{"__symbolic":"method"}],"nextYear":[{"__symbolic":"method"}],"nextMonth":[{"__symbolic":"method"}],"canNext":[{"__symbolic":"method"}],"backMonth":[{"__symbolic":"method"}],"canBack":[{"__symbolic":"method"}],"monthOnSelect":[{"__symbolic":"method"}],"onChanged":[{"__symbolic":"method"}],"swipeEvent":[{"__symbolic":"method"}],"_writeValue":[{"__symbolic":"method"}],"_createCalendarDay":[{"__symbolic":"method"}],"_handleType":[{"__symbolic":"method"}],"_monthFormat":[{"__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      <ng-template [ngIf]=\"_showMonthPicker\" [ngIfElse]=\"title\">\n        <button type=\"button\"\n                ion-button\n                clear\n                class=\"switch-btn\"\n                (click)=\"switchView()\">\n          {{_monthFormat(monthOpt.original.time)}}\n          <ion-icon class=\"arrow-dropdown\"\n                    [name]=\"_view === 'days' ? 'md-arrow-dropdown' : 'md-arrow-dropup'\"></ion-icon>\n        </button>\n      </ng-template>\n      <ng-template #title>\n        <div class=\"switch-btn\">\n          {{_monthFormat(monthOpt.original.time)}}\n        </div>\n      </ng-template>\n      <ng-template [ngIf]=\"_showToggleButtons\">\n        <button type='button' ion-button clear class=\"back\" [disabled]=\"!canBack()\" (click)=\"prev()\">\n          <ion-icon name=\"ios-arrow-back\"></ion-icon>\n        </button>\n        <button type='button' ion-button clear class=\"forward\" [disabled]=\"!canNext()\" (click)=\"next()\">\n          <ion-icon name=\"ios-arrow-forward\"></ion-icon>\n        </button>\n      </ng-template>\n    </div>\n    <ng-template [ngIf]=\"_view === 'days'\" [ngIfElse]=\"monthPicker\">\n      <ion-calendar-week color=\"transparent\"\n                         [weekArray]=\"_d.weekdays\"\n                         [weekStart]=\"_d.weekStart\">\n      </ion-calendar-week>\n\n      <ion-calendar-month [(ngModel)]=\"_calendarMonthValue\"\n                          [month]=\"monthOpt\"\n                          [readonly]=\"readonly\"\n                          (onChange)=\"onChanged($event)\"\n                          (swipe)=\"swipeEvent($event)\"\n                          (onSelect)=\"onSelect.emit($event)\"\n                          (onSelectStart)=\"onSelectStart.emit($event)\"\n                          (onSelectEnd)=\"onSelectEnd.emit($event)\"\n                          [pickMode]=\"_d.pickMode\"\n                          [color]=\"_d.color\">\n      </ion-calendar-month>\n    </ng-template>\n\n    <ng-template #monthPicker>\n      <ion-calendar-month-picker [color]=\"_d.color\"\n                                 [monthFormat]=\"_options?.monthPickerFormat\"\n                                 (onSelect)=\"monthOnSelect($event)\"\n                                 [month]=\"monthOpt\">\n      </ion-calendar-month-picker>\n    </ng-template>\n  "}]}],"members":{"format":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"readonly":[{"__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"}}]}],"monthChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onSelectStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onSelectEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../services/calendar.service","name":"CalendarService"}]}],"ngOnInit":[{"__symbolic":"method"}],"initOpt":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"createMonth":[{"__symbolic":"method"}],"switchView":[{"__symbolic":"method"}],"prev":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"prevYear":[{"__symbolic":"method"}],"nextYear":[{"__symbolic":"method"}],"nextMonth":[{"__symbolic":"method"}],"canNext":[{"__symbolic":"method"}],"backMonth":[{"__symbolic":"method"}],"canBack":[{"__symbolic":"method"}],"monthOnSelect":[{"__symbolic":"method"}],"onChanged":[{"__symbolic":"method"}],"swipeEvent":[{"__symbolic":"method"}],"_writeValue":[{"__symbolic":"method"}],"_createCalendarDay":[{"__symbolic":"method"}],"_handleType":[{"__symbolic":"method"}],"_monthFormat":[{"__symbolic":"method"}]}}}}]

dist/components/calendar.modal.d.ts

@@ -1,6 +0,6 @@
-import { ElementRef, ChangeDetectorRef, Renderer } from '@angular/core';
+import { ElementRef, ChangeDetectorRef, Renderer2, OnInit } from '@angular/core';
 import { NavParams, ViewController, Content, InfiniteScroll } from 'ionic-angular';
 import { CalendarDay, CalendarMonth, CalendarModalOptions } from '../calendar.model';
 import { CalendarService } from '../services/calendar.service';
-export declare class CalendarModal {
+export declare class CalendarModal implements OnInit {
     private _renderer;
@@ -14,3 +14,3 @@ _elementRef: ElementRef;
     monthsEle: ElementRef;
-    datesTemp: Array<CalendarDay | null>;
+    datesTemp: Array<CalendarDay>;
     calendarMonths: Array<CalendarMonth>;
@@ -24,3 +24,4 @@ step: number;
     _d: CalendarModalOptions;
-    constructor(_renderer: Renderer, _elementRef: ElementRef, params: NavParams, viewCtrl: ViewController, ref: ChangeDetectorRef, calSvc: CalendarService);
+    constructor(_renderer: Renderer2, _elementRef: ElementRef, params: NavParams, viewCtrl: ViewController, ref: ChangeDetectorRef, calSvc: CalendarService);
+    ngOnInit(): void;
     ionViewDidLoad(): void;
@@ -41,2 +42,3 @@ init(): void;
     _monthFormat(date: any): string;
+    trackByIndex(index: number, moment: CalendarMonth): number;
 }

dist/components/calendar.modal.js

@@ -1,6 +0,8 @@
-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 { pickModes } from "../config";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var core_1 = require("@angular/core");
+var ionic_angular_1 = require("ionic-angular");
+var calendar_service_1 = require("../services/calendar.service");
+var moment = require("moment");
+var config_1 = require("../config");
 var CalendarModal = /** @class */ (function () {
@@ -16,5 +18,7 @@ function CalendarModal(_renderer, _elementRef, params, viewCtrl, ref, calSvc) {
         this._s = true;
+    }
+    CalendarModal.prototype.ngOnInit = function () {
         this.init();
         this.initDefaultDate();
-    }
+    };
     CalendarModal.prototype.ionViewDidLoad = function () {
@@ -36,3 +40,3 @@ this.findCssClass();
         switch (pickMode) {
-            case pickModes.SINGLE:
+            case config_1.pickModes.SINGLE:
                 if (defaultDate) {
@@ -42,3 +46,3 @@ this.datesTemp[0] = this.calSvc.createCalendarDay(this._getDayTime(defaultDate), this._d);
                 break;
-            case pickModes.RANGE:
+            case config_1.pickModes.RANGE:
                 if (defaultDateRange) {
@@ -53,3 +57,3 @@ if (defaultDateRange.from) {
                 break;
-            case pickModes.MULTI:
+            case config_1.pickModes.MULTI:
                 if (defaultDates && defaultDates.length) {
@@ -67,5 +71,5 @@ this.datesTemp = defaultDates.map(function (e) { return _this.calSvc.createCalendarDay(_this._getDayTime(e), _this._d); });
         if (cssClass) {
-            cssClass.split(' ').forEach(function (cssClass) {
-                if (cssClass.trim() !== '')
-                    _this._renderer.setElementClass(_this._elementRef.nativeElement, cssClass, true);
+            cssClass.split(' ').forEach(function (_class) {
+                if (_class.trim() !== '')
+                    _this._renderer.addClass(_this._elementRef.nativeElement, _class);
             });
@@ -78,3 +82,3 @@ }
         this.ref.detectChanges();
-        if (pickMode !== pickModes.MULTI && autoDone && this.canDone()) {
+        if (pickMode !== config_1.pickModes.MULTI && autoDone && this.canDone()) {
             this.done();
@@ -96,7 +100,7 @@ }
         switch (pickMode) {
-            case pickModes.SINGLE:
+            case config_1.pickModes.SINGLE:
                 return !!(this.datesTemp[0] && this.datesTemp[0].time);
-            case pickModes.RANGE:
+            case config_1.pickModes.RANGE:
                 return !!(this.datesTemp[0] && this.datesTemp[1]) && !!(this.datesTemp[0].time && this.datesTemp[1].time);
-            case pickModes.MULTI:
+            case config_1.pickModes.MULTI:
                 return this.datesTemp.length > 0 && this.datesTemp.every(function (e) { return !!e && !!e.time; });
@@ -123,2 +127,6 @@ default:
         var first = this.calendarMonths[0];
+        if (first.original.time <= 0) {
+            this._d.canBackwardsSelected = false;
+            return;
+        }
         var firstTime = moment(first.original.time).subtract(1, 'M').valueOf();
@@ -173,6 +181,9 @@ (_a = this.calendarMonths).unshift.apply(_a, this.calSvc.createMonthsByPeriod(firstTime, 1, this._d));
     };
+    CalendarModal.prototype.trackByIndex = function (index, moment) {
+        return moment.original ? moment.original.time : index;
+    };
     CalendarModal.decorators = [
-        { type: Component, args: [{
+        { type: core_1.Component, args: [{
                     selector: 'ion-calendar-modal',
-                    template: "\n    <ion-header>\n      <ion-navbar [color]=\"_d.color\">\n\n        <ion-buttons start>\n          <button type='button' ion-button icon-only clear (click)=\"onCancel()\">\n            <span *ngIf=\"_d.closeLabel !== '' && !_d.closeIcon\">{{_d.closeLabel}}</span>\n            <ion-icon *ngIf=\"_d.closeIcon\" name=\"close\"></ion-icon>\n          </button>\n        </ion-buttons>\n\n        <ion-title>{{_d.title}}</ion-title>\n\n        <ion-buttons end>\n          <button type='button' ion-button icon-only *ngIf=\"!_d.autoDone\" clear [disabled]=\"!canDone()\" (click)=\"done()\">\n            <span *ngIf=\"_d.doneLabel !== '' && !_d.doneIcon\">{{_d.doneLabel}}</span>\n            <ion-icon *ngIf=\"_d.doneIcon\" name=\"checkmark\"></ion-icon>\n          </button>\n\n        </ion-buttons>\n\n      </ion-navbar>\n\n      <ion-calendar-week\n        [color]=\"_d.color\"\n        [weekArray]=\"_d.weekdays\"\n        [weekStart]=\"_d.weekStart\">\n      </ion-calendar-week>\n\n    </ion-header>\n\n    <ion-content (ionScroll)=\"onScroll($event)\" class=\"calendar-page\"\n                 [ngClass]=\"{'multi-selection': _d.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\">{{_monthFormat(month.original.date)}}</h4>\n            <ion-calendar-month [month]=\"month\"\n                                [pickMode]=\"_d.pickMode\"\n                                [isSaveHistory]=\"_d.isSaveHistory\"\n                                [id]=\"_d.id\"\n                                [color]=\"_d.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  ",
+                    template: "\n    <ion-header>\n      <ion-navbar [color]=\"_d.color\">\n\n        <ion-buttons start>\n          <button type='button' ion-button icon-only clear (click)=\"onCancel()\">\n            <span *ngIf=\"_d.closeLabel !== '' && !_d.closeIcon\">{{_d.closeLabel}}</span>\n            <ion-icon *ngIf=\"_d.closeIcon\" name=\"close\"></ion-icon>\n          </button>\n        </ion-buttons>\n\n        <ion-title>{{_d.title}}</ion-title>\n\n        <ion-buttons end>\n          <button type='button' ion-button icon-only *ngIf=\"!_d.autoDone\" clear [disabled]=\"!canDone()\" (click)=\"done()\">\n            <span *ngIf=\"_d.doneLabel !== '' && !_d.doneIcon\">{{_d.doneLabel}}</span>\n            <ion-icon *ngIf=\"_d.doneIcon\" name=\"checkmark\"></ion-icon>\n          </button>\n\n        </ion-buttons>\n\n      </ion-navbar>\n\n      <ion-calendar-week\n        [color]=\"_d.color\"\n        [weekArray]=\"_d.weekdays\"\n        [weekStart]=\"_d.weekStart\">\n      </ion-calendar-week>\n\n    </ion-header>\n\n    <ion-content (ionScroll)=\"onScroll($event)\" class=\"calendar-page\"\n                 [ngClass]=\"{'multi-selection': _d.pickMode === 'multi'}\">\n\n      <div #months>\n        <ng-template ngFor let-month [ngForOf]=\"calendarMonths\" [ngForTrackBy]=\"trackByIndex\" let-i=\"index\">\n          <div class=\"month-box\" [attr.id]=\"'month-' + i\">\n            <h4 class=\"text-center month-title\">{{_monthFormat(month.original.date)}}</h4>\n            <ion-calendar-month [month]=\"month\"\n                                [pickMode]=\"_d.pickMode\"\n                                [isSaveHistory]=\"_d.isSaveHistory\"\n                                [id]=\"_d.id\"\n                                [color]=\"_d.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  "
                 },] },
@@ -182,16 +193,16 @@ ];
     CalendarModal.ctorParameters = function () { return [
-        { type: Renderer, },
-        { type: ElementRef, },
-        { type: NavParams, },
-        { type: ViewController, },
-        { type: ChangeDetectorRef, },
-        { type: CalendarService, },
+        { type: core_1.Renderer2, },
+        { type: core_1.ElementRef, },
+        { type: ionic_angular_1.NavParams, },
+        { type: ionic_angular_1.ViewController, },
+        { type: core_1.ChangeDetectorRef, },
+        { type: calendar_service_1.CalendarService, },
     ]; };
     CalendarModal.propDecorators = {
-        'content': [{ type: ViewChild, args: [Content,] },],
-        'monthsEle': [{ type: ViewChild, args: ['months',] },],
+        'content': [{ type: core_1.ViewChild, args: [ionic_angular_1.Content,] },],
+        'monthsEle': [{ type: core_1.ViewChild, args: ['months',] },],
     };
     return CalendarModal;
 }());
-export { CalendarModal };
+exports.CalendarModal = CalendarModal;
 //# sourceMappingURL=calendar.modal.js.map

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      <ion-navbar [color]=\"_d.color\">\n\n        <ion-buttons start>\n          <button type='button' ion-button icon-only clear (click)=\"onCancel()\">\n            <span *ngIf=\"_d.closeLabel !== '' && !_d.closeIcon\">{{_d.closeLabel}}</span>\n            <ion-icon *ngIf=\"_d.closeIcon\" name=\"close\"></ion-icon>\n          </button>\n        </ion-buttons>\n\n        <ion-title>{{_d.title}}</ion-title>\n\n        <ion-buttons end>\n          <button type='button' ion-button icon-only *ngIf=\"!_d.autoDone\" clear [disabled]=\"!canDone()\" (click)=\"done()\">\n            <span *ngIf=\"_d.doneLabel !== '' && !_d.doneIcon\">{{_d.doneLabel}}</span>\n            <ion-icon *ngIf=\"_d.doneIcon\" name=\"checkmark\"></ion-icon>\n          </button>\n\n        </ion-buttons>\n\n      </ion-navbar>\n\n      <ion-calendar-week\n        [color]=\"_d.color\"\n        [weekArray]=\"_d.weekdays\"\n        [weekStart]=\"_d.weekStart\">\n      </ion-calendar-week>\n\n    </ion-header>\n\n    <ion-content (ionScroll)=\"onScroll($event)\" class=\"calendar-page\"\n                 [ngClass]=\"{'multi-selection': _d.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\">{{_monthFormat(month.original.date)}}</h4>\n            <ion-calendar-month [month]=\"month\"\n                                [pickMode]=\"_d.pickMode\"\n                                [isSaveHistory]=\"_d.isSaveHistory\"\n                                [id]=\"_d.id\"\n                                [color]=\"_d.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"}],"nextMonth":[{"__symbolic":"method"}],"backwardsMonth":[{"__symbolic":"method"}],"scrollToDefaultDate":[{"__symbolic":"method"}],"onScroll":[{"__symbolic":"method"}],"findInitMonthNumber":[{"__symbolic":"method"}],"_getDayTime":[{"__symbolic":"method"}],"_monthFormat":[{"__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      <ion-navbar [color]=\"_d.color\">\n\n        <ion-buttons start>\n          <button type='button' ion-button icon-only clear (click)=\"onCancel()\">\n            <span *ngIf=\"_d.closeLabel !== '' && !_d.closeIcon\">{{_d.closeLabel}}</span>\n            <ion-icon *ngIf=\"_d.closeIcon\" name=\"close\"></ion-icon>\n          </button>\n        </ion-buttons>\n\n        <ion-title>{{_d.title}}</ion-title>\n\n        <ion-buttons end>\n          <button type='button' ion-button icon-only *ngIf=\"!_d.autoDone\" clear [disabled]=\"!canDone()\" (click)=\"done()\">\n            <span *ngIf=\"_d.doneLabel !== '' && !_d.doneIcon\">{{_d.doneLabel}}</span>\n            <ion-icon *ngIf=\"_d.doneIcon\" name=\"checkmark\"></ion-icon>\n          </button>\n\n        </ion-buttons>\n\n      </ion-navbar>\n\n      <ion-calendar-week\n        [color]=\"_d.color\"\n        [weekArray]=\"_d.weekdays\"\n        [weekStart]=\"_d.weekStart\">\n      </ion-calendar-week>\n\n    </ion-header>\n\n    <ion-content (ionScroll)=\"onScroll($event)\" class=\"calendar-page\"\n                 [ngClass]=\"{'multi-selection': _d.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\">{{_monthFormat(month.original.date)}}</h4>\n            <ion-calendar-month [month]=\"month\"\n                                [pickMode]=\"_d.pickMode\"\n                                [isSaveHistory]=\"_d.isSaveHistory\"\n                                [id]=\"_d.id\"\n                                [color]=\"_d.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"}],"nextMonth":[{"__symbolic":"method"}],"backwardsMonth":[{"__symbolic":"method"}],"scrollToDefaultDate":[{"__symbolic":"method"}],"onScroll":[{"__symbolic":"method"}],"findInitMonthNumber":[{"__symbolic":"method"}],"_getDayTime":[{"__symbolic":"method"}],"_monthFormat":[{"__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      <ion-navbar [color]=\"_d.color\">\n\n        <ion-buttons start>\n          <button type='button' ion-button icon-only clear (click)=\"onCancel()\">\n            <span *ngIf=\"_d.closeLabel !== '' && !_d.closeIcon\">{{_d.closeLabel}}</span>\n            <ion-icon *ngIf=\"_d.closeIcon\" name=\"close\"></ion-icon>\n          </button>\n        </ion-buttons>\n\n        <ion-title>{{_d.title}}</ion-title>\n\n        <ion-buttons end>\n          <button type='button' ion-button icon-only *ngIf=\"!_d.autoDone\" clear [disabled]=\"!canDone()\" (click)=\"done()\">\n            <span *ngIf=\"_d.doneLabel !== '' && !_d.doneIcon\">{{_d.doneLabel}}</span>\n            <ion-icon *ngIf=\"_d.doneIcon\" name=\"checkmark\"></ion-icon>\n          </button>\n\n        </ion-buttons>\n\n      </ion-navbar>\n\n      <ion-calendar-week\n        [color]=\"_d.color\"\n        [weekArray]=\"_d.weekdays\"\n        [weekStart]=\"_d.weekStart\">\n      </ion-calendar-week>\n\n    </ion-header>\n\n    <ion-content (ionScroll)=\"onScroll($event)\" class=\"calendar-page\"\n                 [ngClass]=\"{'multi-selection': _d.pickMode === 'multi'}\">\n\n      <div #months>\n        <ng-template ngFor let-month [ngForOf]=\"calendarMonths\" [ngForTrackBy]=\"trackByIndex\" let-i=\"index\">\n          <div class=\"month-box\" [attr.id]=\"'month-' + i\">\n            <h4 class=\"text-center month-title\">{{_monthFormat(month.original.date)}}</h4>\n            <ion-calendar-month [month]=\"month\"\n                                [pickMode]=\"_d.pickMode\"\n                                [isSaveHistory]=\"_d.isSaveHistory\"\n                                [id]=\"_d.id\"\n                                [color]=\"_d.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":"Renderer2"},{"__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"}]}],"ngOnInit":[{"__symbolic":"method"}],"ionViewDidLoad":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"initDefaultDate":[{"__symbolic":"method"}],"findCssClass":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}],"done":[{"__symbolic":"method"}],"canDone":[{"__symbolic":"method"}],"nextMonth":[{"__symbolic":"method"}],"backwardsMonth":[{"__symbolic":"method"}],"scrollToDefaultDate":[{"__symbolic":"method"}],"onScroll":[{"__symbolic":"method"}],"findInitMonthNumber":[{"__symbolic":"method"}],"_getDayTime":[{"__symbolic":"method"}],"_monthFormat":[{"__symbolic":"method"}],"trackByIndex":[{"__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      <ion-navbar [color]=\"_d.color\">\n\n        <ion-buttons start>\n          <button type='button' ion-button icon-only clear (click)=\"onCancel()\">\n            <span *ngIf=\"_d.closeLabel !== '' && !_d.closeIcon\">{{_d.closeLabel}}</span>\n            <ion-icon *ngIf=\"_d.closeIcon\" name=\"close\"></ion-icon>\n          </button>\n        </ion-buttons>\n\n        <ion-title>{{_d.title}}</ion-title>\n\n        <ion-buttons end>\n          <button type='button' ion-button icon-only *ngIf=\"!_d.autoDone\" clear [disabled]=\"!canDone()\" (click)=\"done()\">\n            <span *ngIf=\"_d.doneLabel !== '' && !_d.doneIcon\">{{_d.doneLabel}}</span>\n            <ion-icon *ngIf=\"_d.doneIcon\" name=\"checkmark\"></ion-icon>\n          </button>\n\n        </ion-buttons>\n\n      </ion-navbar>\n\n      <ion-calendar-week\n        [color]=\"_d.color\"\n        [weekArray]=\"_d.weekdays\"\n        [weekStart]=\"_d.weekStart\">\n      </ion-calendar-week>\n\n    </ion-header>\n\n    <ion-content (ionScroll)=\"onScroll($event)\" class=\"calendar-page\"\n                 [ngClass]=\"{'multi-selection': _d.pickMode === 'multi'}\">\n\n      <div #months>\n        <ng-template ngFor let-month [ngForOf]=\"calendarMonths\" [ngForTrackBy]=\"trackByIndex\" let-i=\"index\">\n          <div class=\"month-box\" [attr.id]=\"'month-' + i\">\n            <h4 class=\"text-center month-title\">{{_monthFormat(month.original.date)}}</h4>\n            <ion-calendar-month [month]=\"month\"\n                                [pickMode]=\"_d.pickMode\"\n                                [isSaveHistory]=\"_d.isSaveHistory\"\n                                [id]=\"_d.id\"\n                                [color]=\"_d.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":"Renderer2"},{"__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"}]}],"ngOnInit":[{"__symbolic":"method"}],"ionViewDidLoad":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"initDefaultDate":[{"__symbolic":"method"}],"findCssClass":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}],"done":[{"__symbolic":"method"}],"canDone":[{"__symbolic":"method"}],"nextMonth":[{"__symbolic":"method"}],"backwardsMonth":[{"__symbolic":"method"}],"scrollToDefaultDate":[{"__symbolic":"method"}],"onScroll":[{"__symbolic":"method"}],"findInitMonthNumber":[{"__symbolic":"method"}],"_getDayTime":[{"__symbolic":"method"}],"_monthFormat":[{"__symbolic":"method"}],"trackByIndex":[{"__symbolic":"method"}]}}}}]

dist/components/index.js

@@ -1,13 +0,15 @@
-import { CalendarModal } from "./calendar.modal";
-import { CalendarWeekComponent } from "./calendar-week.component";
-import { MonthComponent } from "./month.component";
-import { CalendarComponent } from "./calendar.component";
-import { MonthPickerComponent } from "./month-picker.component";
-export var CALENDAR_COMPONENTS = [
-    CalendarModal,
-    CalendarWeekComponent,
-    MonthComponent,
-    CalendarComponent,
-    MonthPickerComponent
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var calendar_modal_1 = require("./calendar.modal");
+var calendar_week_component_1 = require("./calendar-week.component");
+var month_component_1 = require("./month.component");
+var calendar_component_1 = require("./calendar.component");
+var month_picker_component_1 = require("./month-picker.component");
+exports.CALENDAR_COMPONENTS = [
+    calendar_modal_1.CalendarModal,
+    calendar_week_component_1.CalendarWeekComponent,
+    month_component_1.MonthComponent,
+    calendar_component_1.CalendarComponent,
+    month_picker_component_1.MonthPickerComponent
 ];
 //# sourceMappingURL=index.js.map

dist/components/month-picker.component.js

@@ -1,9 +0,11 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { defaults } from "../config";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var core_1 = require("@angular/core");
+var config_1 = require("../config");
 var MonthPickerComponent = /** @class */ (function () {
     function MonthPickerComponent() {
-        this.color = defaults.COLOR;
-        this.onSelect = new EventEmitter();
+        this.color = config_1.defaults.COLOR;
+        this.onSelect = new core_1.EventEmitter();
         this._thisMonth = new Date();
-        this._monthFormat = defaults.MONTH_FORMAT;
+        this._monthFormat = config_1.defaults.MONTH_FORMAT;
     }
@@ -26,5 +28,5 @@ Object.defineProperty(MonthPickerComponent.prototype, "monthFormat", {
     MonthPickerComponent.decorators = [
-        { type: Component, args: [{
+        { type: core_1.Component, args: [{
                     selector: 'ion-calendar-month-picker',
-                    template: "\n    <div [class]=\"'month-picker ' + color\">\n      <div class=\"month-packer-item\"\n           [class.this-month]=\"\n           i === _thisMonth.getMonth() \n           && month.original.year === _thisMonth.getFullYear()\"\n           *ngFor=\"let item of _monthFormat; let i = index\">\n        <button type=\"button\" (click)=\"_onSelect(i)\">{{item}}</button>\n      </div>\n    </div>\n  ",
+                    template: "\n    <div [class]=\"'month-picker ' + color\">\n      <div class=\"month-packer-item\"\n           [class.this-month]=\" i === _thisMonth.getMonth() && month.original.year === _thisMonth.getFullYear()\"\n           *ngFor=\"let item of _monthFormat; let i = index\">\n        <button type=\"button\" (click)=\"_onSelect(i)\">{{item}}</button>\n      </div>\n    </div>\n  "
                 },] },
@@ -35,10 +37,10 @@ ];
     MonthPickerComponent.propDecorators = {
-        'month': [{ type: Input },],
-        'color': [{ type: Input },],
-        'onSelect': [{ type: Output },],
-        'monthFormat': [{ type: Input },],
+        'month': [{ type: core_1.Input },],
+        'color': [{ type: core_1.Input },],
+        'onSelect': [{ type: core_1.Output },],
+        'monthFormat': [{ type: core_1.Input },],
     };
     return MonthPickerComponent;
 }());
-export { MonthPickerComponent };
+exports.MonthPickerComponent = MonthPickerComponent;
 //# sourceMappingURL=month-picker.component.js.map

dist/components/month-picker.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"MonthPickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ion-calendar-month-picker","template":"\n    <div [class]=\"'month-picker ' + color\">\n      <div class=\"month-packer-item\"\n           [class.this-month]=\"\n           i === _thisMonth.getMonth() \n           && month.original.year === _thisMonth.getFullYear()\"\n           *ngFor=\"let item of _monthFormat; let i = index\">\n        <button type=\"button\" (click)=\"_onSelect(i)\">{{item}}</button>\n      </div>\n    </div>\n  "}]}],"members":{"month":[{"__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"}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"monthFormat":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"_onSelect":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"MonthPickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ion-calendar-month-picker","template":"\n    <div [class]=\"'month-picker ' + color\">\n      <div class=\"month-packer-item\"\n           [class.this-month]=\"\n           i === _thisMonth.getMonth() \n           && month.original.year === _thisMonth.getFullYear()\"\n           *ngFor=\"let item of _monthFormat; let i = index\">\n        <button type=\"button\" (click)=\"_onSelect(i)\">{{item}}</button>\n      </div>\n    </div>\n  "}]}],"members":{"month":[{"__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"}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"monthFormat":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"_onSelect":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"MonthPickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ion-calendar-month-picker","template":"\n    <div [class]=\"'month-picker ' + color\">\n      <div class=\"month-packer-item\"\n           [class.this-month]=\" i === _thisMonth.getMonth() && month.original.year === _thisMonth.getFullYear()\"\n           *ngFor=\"let item of _monthFormat; let i = index\">\n        <button type=\"button\" (click)=\"_onSelect(i)\">{{item}}</button>\n      </div>\n    </div>\n  "}]}],"members":{"month":[{"__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"}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"monthFormat":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"_onSelect":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"MonthPickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ion-calendar-month-picker","template":"\n    <div [class]=\"'month-picker ' + color\">\n      <div class=\"month-packer-item\"\n           [class.this-month]=\" i === _thisMonth.getMonth() && month.original.year === _thisMonth.getFullYear()\"\n           *ngFor=\"let item of _monthFormat; let i = index\">\n        <button type=\"button\" (click)=\"_onSelect(i)\">{{item}}</button>\n      </div>\n    </div>\n  "}]}],"members":{"month":[{"__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"}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"monthFormat":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"_onSelect":[{"__symbolic":"method"}]}}}}]

dist/components/month.component.d.ts

 import { ChangeDetectorRef, EventEmitter, AfterViewInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import { CalendarDay, CalendarMonth, PickMode } from '../calendar.model';
+import { CalendarDay, CalendarMonth, CalendarOriginal, PickMode } from '../calendar.model';
 export declare const MONTH_VALUE_ACCESSOR: any;
@@ -13,3 +13,6 @@ export declare class MonthComponent implements ControlValueAccessor, AfterViewInit {
     color: string;
-    onChange: EventEmitter<any>;
+    onChange: EventEmitter<CalendarDay[]>;
+    onSelect: EventEmitter<CalendarDay>;
+    onSelectStart: EventEmitter<CalendarDay>;
+    onSelectEnd: EventEmitter<CalendarDay>;
     _date: Array<CalendarDay | null>;
@@ -25,3 +28,3 @@ _isInit: boolean;
     registerOnTouched(fn: any): void;
-    trackByTime(index: number, item: any): any;
+    trackByTime(index: number, item: CalendarOriginal): number;
     isEndSelection(day: CalendarDay): boolean;
@@ -31,3 +34,3 @@ isBetween(day: CalendarDay): boolean;
     isSelected(time: number): boolean;
-    onSelected(item: any): void;
+    onSelected(item: CalendarDay): void;
 }

dist/components/month.component.js

@@ -1,8 +0,10 @@
-import { Component, ChangeDetectorRef, Input, Output, EventEmitter, forwardRef, } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { defaults, pickModes } from "../config";
-export var MONTH_VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(function () { return MonthComponent; }),
-    multi: true,
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var core_1 = require("@angular/core");
+var forms_1 = require("@angular/forms");
+var config_1 = require("../config");
+exports.MONTH_VALUE_ACCESSOR = {
+    provide: forms_1.NG_VALUE_ACCESSOR,
+    useExisting: core_1.forwardRef(function () { return MonthComponent; }),
+    multi: true
 };
@@ -13,4 +15,7 @@ var MonthComponent = /** @class */ (function () {
         this.readonly = false;
-        this.color = defaults.COLOR;
-        this.onChange = new EventEmitter();
+        this.color = config_1.defaults.COLOR;
+        this.onChange = new core_1.EventEmitter();
+        this.onSelect = new core_1.EventEmitter();
+        this.onSelectStart = new core_1.EventEmitter();
+        this.onSelectEnd = new core_1.EventEmitter();
         this._date = [null, null];
@@ -21,3 +26,3 @@ this._isInit = false;
         get: function () {
-            return this.pickMode === pickModes.RANGE;
+            return this.pickMode === config_1.pickModes.RANGE;
         },
@@ -47,3 +52,3 @@ enumerable: true,
             return false;
-        if (this.pickMode !== pickModes.RANGE || !this._isInit || this._date[1] === null) {
+        if (this.pickMode !== config_1.pickModes.RANGE || !this._isInit || this._date[1] === null) {
             return false;
@@ -56,3 +61,3 @@ }
             return false;
-        if (this.pickMode !== pickModes.RANGE || !this._isInit) {
+        if (this.pickMode !== config_1.pickModes.RANGE || !this._isInit) {
             return false;
@@ -70,3 +75,3 @@ }
             return false;
-        if (this.pickMode !== pickModes.RANGE || !this._isInit || this._date[0] === null) {
+        if (this.pickMode !== config_1.pickModes.RANGE || !this._isInit || this._date[0] === null) {
             return false;
@@ -78,3 +83,3 @@ }
         if (Array.isArray(this._date)) {
-            if (this.pickMode !== pickModes.MULTI) {
+            if (this.pickMode !== config_1.pickModes.MULTI) {
                 if (this._date[0] !== null) {
@@ -99,3 +104,4 @@ return time === this._date[0].time;
         item.selected = true;
-        if (this.pickMode === pickModes.SINGLE) {
+        this.onSelect.emit(item);
+        if (this.pickMode === config_1.pickModes.SINGLE) {
             this._date[0] = item;
@@ -105,5 +111,6 @@ this.onChange.emit(this._date);
         }
-        if (this.pickMode === pickModes.RANGE) {
+        if (this.pickMode === config_1.pickModes.RANGE) {
             if (this._date[0] === null) {
                 this._date[0] = item;
+                this.onSelectStart.emit(item);
             }
@@ -113,6 +120,9 @@ else if (this._date[1] === null) {
                     this._date[1] = item;
+                    this.onSelectEnd.emit(item);
                 }
                 else {
                     this._date[1] = this._date[0];
+                    this.onSelectEnd.emit(this._date[0]);
                     this._date[0] = item;
+                    this.onSelectStart.emit(item);
                 }
@@ -122,2 +132,3 @@ }
                 this._date[0] = item;
+                this.onSelectStart.emit(item);
                 this._date[1] = null;
@@ -128,3 +139,3 @@ }
         }
-        if (this.pickMode === pickModes.MULTI) {
+        if (this.pickMode === config_1.pickModes.MULTI) {
             var index = this._date.findIndex(function (e) { return e !== null && e.time === item.time; });
@@ -141,6 +152,6 @@ if (index === -1) {
     MonthComponent.decorators = [
-        { type: Component, args: [{
+        { type: core_1.Component, args: [{
                     selector: 'ion-calendar-month',
-                    providers: [MONTH_VALUE_ACCESSOR],
-                    template: "\n    <div [class]=\"color\">\n      <ng-template [ngIf]=\"!_isRange\" [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 type='button'\n                        [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 type='button'\n                        [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  ",
+                    providers: [exports.MONTH_VALUE_ACCESSOR],
+                    template: "\n    <div [class]=\"color\">\n      <ng-template [ngIf]=\"!_isRange\" [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 type='button'\n                        [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 type='button'\n                        [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  "
                 },] },
@@ -150,16 +161,19 @@ ];
     MonthComponent.ctorParameters = function () { return [
-        { type: ChangeDetectorRef, },
+        { type: core_1.ChangeDetectorRef, },
     ]; };
     MonthComponent.propDecorators = {
-        'month': [{ type: Input },],
-        'pickMode': [{ type: Input },],
-        'isSaveHistory': [{ type: Input },],
-        'id': [{ type: Input },],
-        'readonly': [{ type: Input },],
-        'color': [{ type: Input },],
-        'onChange': [{ type: Output },],
+        'month': [{ type: core_1.Input },],
+        'pickMode': [{ type: core_1.Input },],
+        'isSaveHistory': [{ type: core_1.Input },],
+        'id': [{ type: core_1.Input },],
+        'readonly': [{ type: core_1.Input },],
+        'color': [{ type: core_1.Input },],
+        'onChange': [{ type: core_1.Output },],
+        'onSelect': [{ type: core_1.Output },],
+        'onSelectStart': [{ type: core_1.Output },],
+        'onSelectEnd': [{ type: core_1.Output },],
     };
     return MonthComponent;
 }());
-export { MonthComponent };
+exports.MonthComponent = MonthComponent;
 //# sourceMappingURL=month.component.js.map

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      <ng-template [ngIf]=\"!_isRange\" [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 type='button'\n                        [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 type='button'\n                        [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"}}]}],"readonly":[{"__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]=\"!_isRange\" [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 type='button'\n                        [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 type='button'\n                        [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"}}]}],"readonly":[{"__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":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]=\"!_isRange\" [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 type='button'\n                        [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 type='button'\n                        [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"}}]}],"readonly":[{"__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"}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onSelectStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onSelectEnd":[{"__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]=\"!_isRange\" [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 type='button'\n                        [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 type='button'\n                        [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"}}]}],"readonly":[{"__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"}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onSelectStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onSelectEnd":[{"__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/config.js

@@ -1,12 +0,14 @@
-export var defaults = {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaults = {
     DATE_FORMAT: 'YYYY-MM-DD',
     COLOR: 'primary',
     WEEKS_FORMAT: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
-    MONTH_FORMAT: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
+    MONTH_FORMAT: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']
 };
-export var pickModes = {
+exports.pickModes = {
     SINGLE: 'single',
     RANGE: 'range',
-    MULTI: 'multi',
+    MULTI: 'multi'
 };
 //# sourceMappingURL=config.js.map

dist/index.js

@@ -1,8 +0,19 @@
-export * from './calendar.model';
-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';
+"use strict";
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", { value: true });
+__export(require("./calendar.model"));
+var calendar_modal_1 = require("./components/calendar.modal");
+exports.CalendarModal = calendar_modal_1.CalendarModal;
+var calendar_week_component_1 = require("./components/calendar-week.component");
+exports.CalendarWeekComponent = calendar_week_component_1.CalendarWeekComponent;
+var month_component_1 = require("./components/month.component");
+exports.MonthComponent = month_component_1.MonthComponent;
+var calendar_component_1 = require("./components/calendar.component");
+exports.CalendarComponent = calendar_component_1.CalendarComponent;
+var calendar_module_1 = require("./calendar.module");
+exports.CalendarModule = calendar_module_1.CalendarModule;
+var calendar_controller_1 = require("./calendar.controller");
+exports.CalendarController = calendar_controller_1.CalendarController;
 //# sourceMappingURL=index.js.map

dist/services/calendar.service.js

@@ -1,5 +0,7 @@
-import { Injectable } from '@angular/core';
-import { isBoolean } from "ionic-angular/util/util";
-import * as moment from 'moment';
-import { defaults, pickModes } from "../config";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var core_1 = require("@angular/core");
+var util_1 = require("ionic-angular/util/util");
+var moment = require("moment");
+var config_1 = require("../config");
 var CalendarService = /** @class */ (function () {
@@ -11,3 +13,3 @@ function CalendarService() {
         var _daysConfig = [];
-        var _a = calendarOptions || {}, _b = _a.from, from = _b === void 0 ? new Date() : _b, _c = _a.to, to = _c === void 0 ? 0 : _c, _d = _a.weekStart, weekStart = _d === void 0 ? 0 : _d, _e = _a.step, step = _e === void 0 ? 3 : _e, _f = _a.id, id = _f === void 0 ? '' : _f, _g = _a.cssClass, cssClass = _g === void 0 ? '' : _g, _h = _a.closeLabel, closeLabel = _h === void 0 ? 'CANCEL' : _h, _j = _a.doneLabel, doneLabel = _j === void 0 ? 'DONE' : _j, _k = _a.monthFormat, monthFormat = _k === void 0 ? 'MMM YYYY' : _k, _l = _a.title, title = _l === void 0 ? 'CALENDAR' : _l, _m = _a.defaultTitle, defaultTitle = _m === void 0 ? '' : _m, _o = _a.defaultSubtitle, defaultSubtitle = _o === void 0 ? '' : _o, _p = _a.autoDone, autoDone = _p === void 0 ? false : _p, _q = _a.canBackwardsSelected, canBackwardsSelected = _q === void 0 ? false : _q, _r = _a.closeIcon, closeIcon = _r === void 0 ? false : _r, _s = _a.doneIcon, doneIcon = _s === void 0 ? false : _s, _t = _a.showYearPicker, showYearPicker = _t === void 0 ? false : _t, _u = _a.isSaveHistory, isSaveHistory = _u === void 0 ? false : _u, _v = _a.pickMode, pickMode = _v === void 0 ? pickModes.SINGLE : _v, _w = _a.color, color = _w === void 0 ? defaults.COLOR : _w, _x = _a.weekdays, weekdays = _x === void 0 ? defaults.WEEKS_FORMAT : _x, _y = _a.daysConfig, daysConfig = _y === void 0 ? _daysConfig : _y, _z = _a.disableWeeks, disableWeeks = _z === void 0 ? _disableWeeks : _z;
+        var _a = calendarOptions || {}, _b = _a.from, from = _b === void 0 ? new Date() : _b, _c = _a.to, to = _c === void 0 ? 0 : _c, _d = _a.weekStart, weekStart = _d === void 0 ? 0 : _d, _e = _a.step, step = _e === void 0 ? 3 : _e, _f = _a.id, id = _f === void 0 ? '' : _f, _g = _a.cssClass, cssClass = _g === void 0 ? '' : _g, _h = _a.closeLabel, closeLabel = _h === void 0 ? 'CANCEL' : _h, _j = _a.doneLabel, doneLabel = _j === void 0 ? 'DONE' : _j, _k = _a.monthFormat, monthFormat = _k === void 0 ? 'MMM YYYY' : _k, _l = _a.title, title = _l === void 0 ? 'CALENDAR' : _l, _m = _a.defaultTitle, defaultTitle = _m === void 0 ? '' : _m, _o = _a.defaultSubtitle, defaultSubtitle = _o === void 0 ? '' : _o, _p = _a.autoDone, autoDone = _p === void 0 ? false : _p, _q = _a.canBackwardsSelected, canBackwardsSelected = _q === void 0 ? false : _q, _r = _a.closeIcon, closeIcon = _r === void 0 ? false : _r, _s = _a.doneIcon, doneIcon = _s === void 0 ? false : _s, _t = _a.showYearPicker, showYearPicker = _t === void 0 ? false : _t, _u = _a.isSaveHistory, isSaveHistory = _u === void 0 ? false : _u, _v = _a.pickMode, pickMode = _v === void 0 ? config_1.pickModes.SINGLE : _v, _w = _a.color, color = _w === void 0 ? config_1.defaults.COLOR : _w, _x = _a.weekdays, weekdays = _x === void 0 ? config_1.defaults.WEEKS_FORMAT : _x, _y = _a.daysConfig, daysConfig = _y === void 0 ? _daysConfig : _y, _z = _a.disableWeeks, disableWeeks = _z === void 0 ? _disableWeeks : _z;
         return {
@@ -40,3 +42,3 @@ id: id,
             defaultDates: calendarOptions.defaultDates || null,
-            defaultDateRange: calendarOptions.defaultDateRange || null,
+            defaultDateRange: calendarOptions.defaultDateRange || null
         };
@@ -55,4 +57,4 @@ };
             howManyDays: howManyDays,
-            time: time,
-            date: new Date(time),
+            time: new Date(year, month, 1).getTime(),
+            date: new Date(time)
         };
@@ -91,3 +93,3 @@ };
         var _disable = false;
-        if (dayConfig && isBoolean(dayConfig.disable)) {
+        if (dayConfig && util_1.isBoolean(dayConfig.disable)) {
             _disable = dayConfig.disable;
@@ -120,3 +122,3 @@ }
             cssClass: dayConfig ? dayConfig.cssClass || '' : '',
-            disable: _disable,
+            disable: _disable
         };
@@ -143,3 +145,3 @@ };
             days: days,
-            original: original,
+            original: original
         };
@@ -162,12 +164,12 @@ };
         switch (pickMode) {
-            case pickModes.SINGLE:
+            case config_1.pickModes.SINGLE:
                 result = this.multiFormat(original[0].time);
                 break;
-            case pickModes.RANGE:
+            case config_1.pickModes.RANGE:
                 result = {
                     from: this.multiFormat(original[0].time),
-                    to: this.multiFormat(original[1].time),
+                    to: this.multiFormat(original[1].time)
                 };
                 break;
-            case pickModes.MULTI:
+            case config_1.pickModes.MULTI:
                 result = original.map(function (e) { return _this.multiFormat(e.time); });
@@ -186,3 +188,3 @@ break;
             dateObj: _moment.toDate(),
-            string: _moment.format(defaults.DATE_FORMAT),
+            string: _moment.format(config_1.defaults.DATE_FORMAT),
             years: _moment.year(),
@@ -194,3 +196,3 @@ months: _moment.month() + 1,
     CalendarService.decorators = [
-        { type: Injectable },
+        { type: core_1.Injectable },
     ];
@@ -201,3 +203,3 @@ /** @nocollapse */
 }());
-export { CalendarService };
+exports.CalendarService = CalendarService;
 //# sourceMappingURL=calendar.service.js.map

package.json

 {
   "name": "ion2-calendar",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "description": "A date picker component for ionic2 ",
@@ -8,7 +8,11 @@ "main": "./dist/index.js",
   "scripts": {
-    "ngc": "ngc -p tsconfig.json",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "clear": "rm -rf aot _temp",
-    "build": "npm run lint && rm -rf dist && npm run clear && gulp src2temp && npm run ngc && gulp copy-scss && npm run clear",
-    "lint": "tslint -c tslint.json lib/src/components/**/*.ts"
+    "start": "cd ./dev && ionic serve",
+    "clean:dist": "rm -rf dist",
+    "demo:link": "npm link && cd ./demo && npm link ion2-calendar",
+    "demo:serve": "cd ./demo && ionic serve",
+    "build": "run-s clean:dist build:copy-sources build:ts && gulp copy-scss ",
+    "build:ts": "tsc && ngc",
+    "build:copy-sources": "gulp copy-sources",
+    "test": "echo \"Error: no test specified\"",
+    "lint": "tslint -c tslint.json 'src/**/*.ts'"
   },
@@ -20,24 +24,21 @@ "repository": {
   "devDependencies": {
-    "@angular/common": "4.4.3",
-    "@angular/compiler": "4.4.3",
-    "@angular/compiler-cli": "4.4.3",
-    "@angular/core": "4.4.3",
-    "@angular/forms": "4.4.3",
-    "@angular/http": "4.4.3",
-    "@angular/platform-browser": "4.4.3",
-    "@angular/platform-browser-dynamic": "4.4.3",
-    "@ionic-native/core": "4.3.0",
-    "@ionic-native/splash-screen": "4.3.0",
-    "@ionic-native/status-bar": "4.3.0",
-    "@ionic/storage": "2.0.1",
+    "@angular/common": "4.4.6",
+    "@angular/compiler": "4.4.6",
+    "@angular/compiler-cli": "4.4.6",
+    "@angular/core": "4.4.6",
+    "@angular/forms": "4.4.6",
+    "@angular/http": "4.4.6",
+    "@angular/platform-browser": "4.4.6",
+    "@angular/platform-browser-dynamic": "4.4.6",
     "gulp": "^3.9.1",
+    "gulp-bump": "^3.0.0",
     "ionic-angular": "3.7.1",
-    "ionicons": "3.0.0",
+    "ionicons": "~3.0.0",
     "moment": "^2.19.1",
-    "rxjs": "5.4.3",
-    "sw-toolbox": "3.6.0",
-    "tslint": "^5.3.2",
+    "npm-run-all": "^4.1.2",
+    "rxjs": "5.5.2",
+    "tslint": "~5.7.0",
     "tslint-eslint-rules": "^4.1.1",
     "typescript": "^2.5.3",
-    "zone.js": "0.8.10"
+    "zone.js": "0.8.18"
   },
@@ -53,4 +54,4 @@ "keywords": [
   "dependencies": {
-    "moment": "^2.19.1"
+    "moment": "^2.19.3"
   }
 }

README-CN.md

 # 📅 ion2-calendar
 
+[![Build Status](https://travis-ci.org/HsuanXyz/ion2-calendar.svg?branch=master)](https://travis-ci.org/HsuanXyz/ion2-calendar)
 [![Dependency Status](https://david-dm.org/HsuanXyz/ion2-calendar.svg)](https://david-dm.org/HsuanXyz/ion2-calendar)
@@ -420,27 +421,2 @@ [![NPM version][npm-image]][npm-url]
 
-# 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
-
-### Development
-
-```bash
-cd ./dev
-npm install
-npm run ionic:serve
-# do something in ./dev/src/components/ion2-calendar
-```
-
-### Build
-
-```bash
-cd ./
-npm install
-npm run build
-```
-
 ## 感谢阅读
@@ -447,0 +423,0 @@

README.md

 # 📅 ion2-calendar
 
+[![Build Status](https://travis-ci.org/HsuanXyz/ion2-calendar.svg?branch=master)](https://travis-ci.org/HsuanXyz/ion2-calendar)
 [![Dependency Status](https://david-dm.org/HsuanXyz/ion2-calendar.svg)](https://david-dm.org/HsuanXyz/ion2-calendar)
@@ -425,25 +426,2 @@ [![NPM version][npm-image]][npm-url]
 
-# 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
-
-### Development
-
-```bash
-cd ./src
-npm install
-npm run ionic:serve
-# do something in ./src/src/components/ion2-calendar
-```
-
-### Build
-
-```bash
-npm run build
-```
-
 ## Thanks for reading
@@ -450,0 +428,0 @@

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

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 tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

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

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

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 tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

176248

increased by1.39%

Dev dependency count

19

decreased by-13.64%

Number of low supply chain risk alerts

3

decreased by-25%

Worsened metrics

Number of package files

58

decreased by-3.33%

Lines of code

1396

decreased by-5.29%

Number of lines in readme file

436

decreased by-4.8%

Dependency changes

• Updatedmoment@^2.19.3