ion2-calendar - npm Package Compare versions

Comparing version 2.0.0-beta.3 to 2.0.0-beta.4

dist/calendar.controller.js

@@ -16,15 +16,25 @@ import { Injectable } from '@angular/core';
         }, options), modalOptions);
+        console.log(options);
         calendarModal.present();
         return new Promise(function (resolve, reject) {
             calendarModal.onDidDismiss(function (data) {
-                var result = {};
+                var res;
                 if (data && Array.isArray(data)) {
-                    if (options.isRadio) {
-                        result.date = data[0];
+                    switch (options.pickMode) {
+                        case 'single':
+                            res = { date: data[0] };
+                            break;
+                        case 'range':
+                            res = {
+                                from: data[0],
+                                to: data[1],
+                            };
+                            break;
+                        case 'multi':
+                            res = data;
+                            break;
+                        default:
+                            res = data;
                     }
-                    else {
-                        result.from = data[0];
-                        result.to = data[1];
-                    }
-                    resolve(result);
+                    resolve(res);
                 }
@@ -38,3 +48,3 @@ else {
     CalendarController.prototype.setHistory = function (param) {
-        localStorage.setItem("ion-calendar-" + param.id, JSON.stringify(param));
+        localStorage.setItem("ion-calendar-" + param.id, JSON.stringify(param.date));
     };
@@ -41,0 +51,0 @@ CalendarController.prototype.getHistory = function (id) {

dist/calendar.model.d.ts

@@ -36,2 +36,3 @@ /**
     subTitle?: string;
+    cssClass?: string;
 }
@@ -42,7 +43,8 @@ export declare class CalendarOptions {
     isRadio: boolean;
-    monthTitle: string;
+    pickMode: string;
+    monthFormat: string;
     range_beg: number;
     range_end: number;
     daysConfig: Array<DayConfig>;
-    disableWeekdays: Array<number>;
+    disableWeeks: Array<number>;
 }
@@ -60,8 +62,8 @@ export interface ModalOptions {
     to?: Date | number;
-    isRadio?: boolean;
+    pickMode?: string;
     id?: string;
     isSaveHistory?: boolean;
-    weekStartDay?: number;
-    disableWeekdays?: Array<number>;
-    weekdaysTitle?: Array<string>;
+    weekStart?: number;
+    disableWeeks?: Array<number>;
+    weekdays?: Array<string>;
     closeLabel?: string;
@@ -71,3 +73,3 @@ doneLabel?: string;
     doneIcon?: boolean;
-    monthTitle?: string;
+    monthFormat?: string;
     color?: string;
@@ -79,10 +81,5 @@ canBackwardsSelected?: boolean;
     showYearPicker?: boolean;
-    daysConfig?: Array<{
-        date: Date;
-        cssClass?: string;
-        marked?: boolean;
-        title?: string;
-        subTitle?: string;
-    }>;
+    daysConfig?: Array<DayConfig>;
 }
 export declare type Colors = 'primary' | 'secondary' | 'danger' | 'light' | 'dark';
+export declare type PickMode = 'multi' | 'single' | 'range';

dist/calendar.module.d.ts

@@ -0,2 +1,6 @@
+import { CalendarController } from './calendar.controller';
+import { ModalController } from 'ionic-angular';
+import { CalendarService } from "./services/calendar.service";
+export declare function calendarController(modalCtrl: ModalController, calSvc: CalendarService): CalendarController;
 export declare class CalendarModule {
 }

dist/calendar.module.js

@@ -7,3 +7,3 @@ /**
 import { CalendarController } from './calendar.controller';
-import { IonicModule } from "ionic-angular";
+import { IonicModule, ModalController } from 'ionic-angular';
 import { CalendarWeekComponent } from "./components/calendar-week.component";
@@ -14,2 +14,5 @@ import { CalendarModal } from "./components/calendar.modal";
 import { CalendarComponent } from './components/calendar.component';
+export function calendarController(modalCtrl, calSvc) {
+    return new CalendarController(modalCtrl, calSvc);
+}
 var CalendarModule = (function () {
@@ -25,3 +28,7 @@ function CalendarModule() {
                 declarations: [CalendarModal, CalendarWeekComponent, MonthComponent, CalendarComponent],
-                providers: [CalendarController, CalendarService],
+                providers: [{
+                        provide: CalendarController,
+                        useFactory: calendarController,
+                        deps: [ModalController, CalendarService],
+                    }, CalendarService],
                 exports: [CalendarComponent],
@@ -28,0 +35,0 @@ entryComponents: [CalendarModal],

dist/calendar.module.metadata.json

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

dist/components/calendar-week.component.js

 import { Component, Input } from '@angular/core';
 var CalendarWeekComponent = (function () {
     function CalendarWeekComponent() {
-        this._weekArray = "Di_Lu_Ma_Me_Je_Ve_Sa".split("_");
+        this._weekArray = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
         this._weekStart = 0;
@@ -6,0 +6,0 @@ this.color = 'primary';

dist/components/calendar.component.d.ts

@@ -12,10 +12,15 @@ import { ElementRef, ChangeDetectorRef, Renderer, OnInit } from '@angular/core';
     calSvc: CalendarService;
-    month: CalendarMonth;
+    monthOpt: CalendarMonth;
+    monthDate: Date;
     color: Colors;
     titleFormat: string;
-    weekStartDay: number;
-    disableWeekdays: Array<number>;
+    weekStart: number;
+    disableWeeks: Array<number>;
+    from: number;
     constructor(_renderer: Renderer, _elementRef: ElementRef, params: NavParams, viewCtrl: ViewController, ref: ChangeDetectorRef, calSvc: CalendarService);
     ionViewDidLoad(): void;
     ngOnInit(): void;
+    createMonth(date?: number): CalendarMonth;
+    nextMonth(): void;
+    backMonth(): void;
 }

dist/components/calendar.component.js

 import { Component, ElementRef, ChangeDetectorRef, Renderer, Input } from '@angular/core';
 import { NavParams, ViewController } from 'ionic-angular';
+import * as moment from 'moment';
 import { CalendarService } from "../services/calendar.service";
@@ -12,6 +13,8 @@ var CalendarComponent = (function () {
         this.calSvc = calSvc;
+        this.monthDate = new Date();
         this.color = 'primary';
         this.titleFormat = 'MMM yyyy';
-        this.weekStartDay = 0;
-        this.disableWeekdays = [];
+        this.weekStart = 0;
+        this.disableWeeks = [];
+        this.from = new Date().getTime();
     }
@@ -21,8 +24,27 @@ CalendarComponent.prototype.ionViewDidLoad = function () {
     CalendarComponent.prototype.ngOnInit = function () {
-        this.month = this.calSvc.createMonthsByPeriod(new Date().getTime(), 1, this.calSvc.safeOpt({
-            from: new Date(),
-            weekStartDay: this.weekStartDay,
-            disableWeekdays: this.disableWeekdays,
+        if (!moment.isDate(new Date(this.from))) {
+            this.from = new Date().getTime();
+            console.warn('form is not a Date type');
+        }
+        else {
+            this.from = moment(this.from).valueOf();
+        }
+        this.monthOpt = this.createMonth();
+    };
+    CalendarComponent.prototype.createMonth = function (date) {
+        if (date === void 0) { date = this.from; }
+        return this.calSvc.createMonthsByPeriod(date, 1, this.calSvc.safeOpt({
+            from: new Date(date),
+            weekStart: this.weekStart,
+            disableWeeks: this.disableWeeks
         }))[0];
     };
+    CalendarComponent.prototype.nextMonth = function () {
+        this.from = moment(this.from).add(1, 'months').valueOf();
+        this.monthOpt = this.createMonth();
+    };
+    CalendarComponent.prototype.backMonth = function () {
+        this.from = moment(this.from).subtract(1, 'months').valueOf();
+        this.monthOpt = this.createMonth();
+    };
     return CalendarComponent;
@@ -34,3 +56,3 @@ }());
                 selector: 'ion-calendar',
-                template: "\n        <div class=\"title\">\n            <div class=\"text\">\n                {{month.original.time | date: titleFormat}}\n            </div>\n            <div ion-button clear class=\"back\">\n                <ion-icon name=\"ios-arrow-back\"></ion-icon>\n            </div>\n            <div ion-button clear class=\"forward\">\n                <ion-icon name=\"ios-arrow-forward\"></ion-icon>\n            </div>\n        </div>\n        \n        <ion-calendar-week color=\"light\" \n                           [weekStart]=\"weekStartDay\">\n        </ion-calendar-week>\n        \n        <ion-calendar-month [month]=\"month\" [color]=\"color\">\n            \n        </ion-calendar-month>\n        \n    ",
+                template: "\n        <div class=\"title\">\n            <div class=\"text\">\n                {{monthOpt.original.time | date: titleFormat}}\n            </div>\n            <div ion-button clear class=\"back\" (click)=\"backMonth()\">\n                <ion-icon name=\"ios-arrow-back\"></ion-icon>\n            </div>\n            <div ion-button clear class=\"forward\" (click)=\"nextMonth()\">\n                <ion-icon name=\"ios-arrow-forward\"></ion-icon>\n            </div>\n        </div>\n\n        <ion-calendar-week color=\"light\"\n                           [weekStart]=\"weekStart\">\n        </ion-calendar-week>\n\n        <ion-calendar-month [month]=\"monthOpt\" [color]=\"color\">\n\n        </ion-calendar-month>\n\n    ",
             },] },
@@ -50,5 +72,6 @@ ];
     'titleFormat': [{ type: Input },],
-    'weekStartDay': [{ type: Input },],
-    'disableWeekdays': [{ type: Input },],
+    'weekStart': [{ type: Input },],
+    'disableWeeks': [{ type: Input },],
+    'from': [{ type: Input },],
 };
 //# sourceMappingURL=calendar.component.js.map

dist/components/calendar.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"CalendarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ion-calendar","template":"\n        <div class=\"title\">\n            <div class=\"text\">\n                {{month.original.time | date: titleFormat}}\n            </div>\n            <div ion-button clear class=\"back\">\n                <ion-icon name=\"ios-arrow-back\"></ion-icon>\n            </div>\n            <div ion-button clear class=\"forward\">\n                <ion-icon name=\"ios-arrow-forward\"></ion-icon>\n            </div>\n        </div>\n        \n        <ion-calendar-week color=\"light\" \n                           [weekStart]=\"weekStartDay\">\n        </ion-calendar-week>\n        \n        <ion-calendar-month [month]=\"month\" [color]=\"color\">\n            \n        </ion-calendar-month>\n        \n    "}]}],"members":{"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"titleFormat":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekStartDay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disableWeekdays":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"ionic-angular","name":"NavParams"},{"__symbolic":"reference","module":"ionic-angular","name":"ViewController"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"../services/calendar.service","name":"CalendarService"}]}],"ionViewDidLoad":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CalendarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ion-calendar","template":"\n        <div class=\"title\">\n            <div class=\"text\">\n                {{month.original.time | date: titleFormat}}\n            </div>\n            <div ion-button clear class=\"back\">\n                <ion-icon name=\"ios-arrow-back\"></ion-icon>\n            </div>\n            <div ion-button clear class=\"forward\">\n                <ion-icon name=\"ios-arrow-forward\"></ion-icon>\n            </div>\n        </div>\n        \n        <ion-calendar-week color=\"light\" \n                           [weekStart]=\"weekStartDay\">\n        </ion-calendar-week>\n        \n        <ion-calendar-month [month]=\"month\" [color]=\"color\">\n            \n        </ion-calendar-month>\n        \n    "}]}],"members":{"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"titleFormat":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekStartDay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disableWeekdays":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"ionic-angular","name":"NavParams"},{"__symbolic":"reference","module":"ionic-angular","name":"ViewController"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"../services/calendar.service","name":"CalendarService"}]}],"ionViewDidLoad":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"CalendarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ion-calendar","template":"\n        <div class=\"title\">\n            <div class=\"text\">\n                {{monthOpt.original.time | date: titleFormat}}\n            </div>\n            <div ion-button clear class=\"back\" (click)=\"backMonth()\">\n                <ion-icon name=\"ios-arrow-back\"></ion-icon>\n            </div>\n            <div ion-button clear class=\"forward\" (click)=\"nextMonth()\">\n                <ion-icon name=\"ios-arrow-forward\"></ion-icon>\n            </div>\n        </div>\n\n        <ion-calendar-week color=\"light\"\n                           [weekStart]=\"weekStart\">\n        </ion-calendar-week>\n\n        <ion-calendar-month [month]=\"monthOpt\" [color]=\"color\">\n\n        </ion-calendar-month>\n\n    "}]}],"members":{"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"titleFormat":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disableWeeks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"from":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"ionic-angular","name":"NavParams"},{"__symbolic":"reference","module":"ionic-angular","name":"ViewController"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"../services/calendar.service","name":"CalendarService"}]}],"ionViewDidLoad":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"createMonth":[{"__symbolic":"method"}],"nextMonth":[{"__symbolic":"method"}],"backMonth":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CalendarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ion-calendar","template":"\n        <div class=\"title\">\n            <div class=\"text\">\n                {{monthOpt.original.time | date: titleFormat}}\n            </div>\n            <div ion-button clear class=\"back\" (click)=\"backMonth()\">\n                <ion-icon name=\"ios-arrow-back\"></ion-icon>\n            </div>\n            <div ion-button clear class=\"forward\" (click)=\"nextMonth()\">\n                <ion-icon name=\"ios-arrow-forward\"></ion-icon>\n            </div>\n        </div>\n\n        <ion-calendar-week color=\"light\"\n                           [weekStart]=\"weekStart\">\n        </ion-calendar-week>\n\n        <ion-calendar-month [month]=\"monthOpt\" [color]=\"color\">\n\n        </ion-calendar-month>\n\n    "}]}],"members":{"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"titleFormat":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disableWeeks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"from":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"ionic-angular","name":"NavParams"},{"__symbolic":"reference","module":"ionic-angular","name":"ViewController"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"../services/calendar.service","name":"CalendarService"}]}],"ionViewDidLoad":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"createMonth":[{"__symbolic":"method"}],"nextMonth":[{"__symbolic":"method"}],"backMonth":[{"__symbolic":"method"}]}}}}]

dist/components/calendar.modal.d.ts

 import { ElementRef, ChangeDetectorRef, Renderer } from '@angular/core';
 import { NavParams, ViewController, Content, InfiniteScroll } from 'ionic-angular';
 import { CalendarDay, CalendarMonth, CalendarOptions, CalendarControllerOptions } from '../calendar.model';
-import { CalendarService } from "../services/calendar.service";
+import { CalendarService } from '../services/calendar.service';
 export declare class CalendarModal {
@@ -19,9 +19,9 @@ private _renderer;
     doneIcon: boolean;
-    dayTemp: Array<CalendarDay | null>;
+    datesTemp: Array<CalendarDay | null>;
     calendarMonths: Array<CalendarMonth>;
-    monthTitleFilterStr: string;
-    weekdaysTitle: Array<string>;
+    monthFormatFilterStr: string;
+    weekdays: Array<string>;
     defaultDate: Date;
     scrollBackwards: boolean;
-    weekStartDay: number;
+    weekStart: number;
     isSaveHistory: boolean;
@@ -28,0 +28,0 @@ countNextMonths: number;

dist/components/calendar.modal.js

 import { Component, ViewChild, ElementRef, ChangeDetectorRef, Renderer } from '@angular/core';
 import { NavParams, ViewController, Content } from 'ionic-angular';
 import * as moment from 'moment';
-import { CalendarService } from "../services/calendar.service";
+import { CalendarService } from '../services/calendar.service';
 var CalendarModal = (function () {
@@ -13,6 +13,6 @@ function CalendarModal(_renderer, _elementRef, params, viewCtrl, ref, calSvc) {
         this.calSvc = calSvc;
-        this.dayTemp = [null, null];
-        this.monthTitleFilterStr = '';
-        this.weekdaysTitle = [];
-        this.weekStartDay = 0;
+        this.datesTemp = [null, null];
+        this.monthFormatFilterStr = '';
+        this.weekdays = [];
+        this.weekStart = 0;
         this.debug = true;
@@ -37,15 +37,16 @@ this._s = true;
             isRadio: params.get('isRadio'),
+            pickMode: this._d.pickMode,
             range_beg: startTime,
             range_end: endTime,
             daysConfig: params.get('daysConfig'),
-            disableWeekdays: params.get('disableWeekdays'),
-            monthTitle: params.get('monthTitle'),
+            disableWeeks: params.get('disableWeeks'),
+            monthFormat: params.get('monthFormat'),
         };
         this.defaultDate = this._d.defaultDate;
         this.scrollBackwards = this._d.canBackwardsSelected;
-        this.weekStartDay = this._d.weekStartDay;
+        this.weekStart = this._d.weekStart;
         this._id = this._d.id;
         this._color = this._d.color;
-        this.monthTitleFilterStr = this._d.monthTitle;
-        this.weekdaysTitle = this._d.weekdaysTitle;
+        this.monthFormatFilterStr = this._d.monthFormat;
+        this.weekdays = this._d.weekdays;
         this.title = this._d.title;
@@ -80,5 +81,6 @@ this.closeLabel = this._d.closeLabel;
     CalendarModal.prototype.onChange = function (data) {
+        this.datesTemp = data;
         this.calSvc.savedHistory(data, this._id);
         this.ref.detectChanges();
-        if (this._d.autoDone && this.canDone()) {
+        if (this._d.pickMode !== 'multi' && this._d.autoDone && this.canDone()) {
             this.done();
@@ -91,18 +93,22 @@ }
     CalendarModal.prototype.done = function () {
-        this.viewCtrl.dismiss(this.dayTemp);
+        this.viewCtrl.dismiss(this.datesTemp);
     };
     CalendarModal.prototype.canDone = function () {
-        if (!Array.isArray(this.dayTemp)) {
+        if (!Array.isArray(this.datesTemp)) {
             return false;
         }
-        if (this._d.isRadio) {
-            return !!(this.dayTemp[0] && this.dayTemp[0].time);
+        switch (this._d.pickMode) {
+            case 'single':
+                return !!(this.datesTemp[0] && this.datesTemp[0].time);
+            case 'range':
+                return !!(this.datesTemp[0] && this.datesTemp[1]) && !!(this.datesTemp[0].time && this.datesTemp[1].time);
+            case 'multi':
+                return this.datesTemp.length > 0 && this.datesTemp.every(function (e) { return !!e && !!e.time; });
+            default:
+                return false;
         }
-        else {
-            return !!(this.dayTemp[0] && this.dayTemp[1]) && !!(this.dayTemp[0].time && this.dayTemp[1].time);
-        }
     };
     CalendarModal.prototype.getHistory = function () {
         if (this.isSaveHistory) {
-            this.dayTemp = this.calSvc.getHistory(this._id);
+            this.datesTemp = this.calSvc.getHistory(this._id);
         }
@@ -241,3 +247,3 @@ };
                 selector: 'ion-calendar-modal',
-                template: "\n        <ion-header>\n            \n            <ion-navbar [color]=\"_color\">\n\n                <ion-buttons start [hidden]=\"!showYearPicker\">\n                    <ion-select [(ngModel)]=\"year\" (ngModelChange)=\"changedYearSelection()\" interface=\"popover\">\n                        <ion-option *ngFor=\"let y of years\" value=\"{{y}}\">{{y}}</ion-option>\n                    </ion-select>\n                </ion-buttons>\n\n                <ion-title>{{title}}</ion-title>\n                \n                <ion-buttons end>\n                    <button ion-button clear (click)=\"onCancel()\">\n                        <span *ngIf=\"closeLabel !== '' && !closeIcon\">{{closeLabel}}</span>\n                        <ion-icon *ngIf=\"closeIcon\" name=\"close\"></ion-icon>\n                    </button>\n                    <button ion-button *ngIf=\"!_d.autoDone\" clear [disabled]=\"!canDone()\" (click)=\"done()\">\n                        <span *ngIf=\"doneLabel !== '' && !doneIcon\">{{doneLabel}}</span>\n                        <ion-icon *ngIf=\"doneIcon\" name=\"checkmark\"></ion-icon>\n                    </button>\n                </ion-buttons>\n\n            </ion-navbar>\n\n            <ion-calendar-week\n                    [color]=\"_color\"\n                    [weekArray]=\"weekdaysTitle\"\n                    [weekStart]=\"weekStartDay\">\n            </ion-calendar-week>\n\n        </ion-header>\n\n        <ion-content (ionScroll)=\"onScroll($event)\" class=\"calendar-page\" [ngClass]=\"{'multiSelection': !options.isRadio}\">\n\n            <div #months>\n                <div *ngFor=\"let month of calendarMonths;let i = index;\" class=\"month-box\" [attr.id]=\"'month-' + i\">\n                    <h4 class=\"text-center month-title\">{{month.original.date | date:monthTitleFilterStr}}</h4>\n                    <ion-calendar-month [month]=\"month\"\n                                [isRadio]=\"options.isRadio\"\n                                [isSaveHistory]=\"isSaveHistory\"\n                                [id]=\"_id\"\n                                [color]=\"_color\"\n                                (onChange)=\"onChange($event)\"\n                                [(ngModel)]=\"dayTemp\">\n                        \n                    </ion-calendar-month>\n                </div>\n            </div>\n\n            <ion-infinite-scroll (ionInfinite)=\"nextMonth($event)\">\n                <ion-infinite-scroll-content></ion-infinite-scroll-content>\n            </ion-infinite-scroll>\n\n        </ion-content>\n    ",
+                template: "\n    <ion-header>\n\n      <ion-navbar [color]=\"_color\">\n\n        <ion-buttons start [hidden]=\"!showYearPicker\">\n          <ion-select [(ngModel)]=\"year\" (ngModelChange)=\"changedYearSelection()\" interface=\"popover\">\n            <ion-option *ngFor=\"let y of years\" value=\"{{y}}\">{{y}}</ion-option>\n          </ion-select>\n        </ion-buttons>\n\n        <ion-title>{{title}}</ion-title>\n\n        <ion-buttons end>\n          <button ion-button clear (click)=\"onCancel()\">\n            <span *ngIf=\"closeLabel !== '' && !closeIcon\">{{closeLabel}}</span>\n            <ion-icon *ngIf=\"closeIcon\" name=\"close\"></ion-icon>\n          </button>\n          <button ion-button *ngIf=\"!_d.autoDone\" clear [disabled]=\"!canDone()\" (click)=\"done()\">\n            <span *ngIf=\"doneLabel !== '' && !doneIcon\">{{doneLabel}}</span>\n            <ion-icon *ngIf=\"doneIcon\" name=\"checkmark\"></ion-icon>\n          </button>\n        </ion-buttons>\n\n      </ion-navbar>\n\n      <ion-calendar-week\n        [color]=\"_color\"\n        [weekArray]=\"weekdays\"\n        [weekStart]=\"weekStart\">\n      </ion-calendar-week>\n\n    </ion-header>\n\n    <ion-content (ionScroll)=\"onScroll($event)\" class=\"calendar-page\" [ngClass]=\"{'multi-selection': options.pickMode === 'multi'}\">\n\n      <div #months>\n        <div *ngFor=\"let month of calendarMonths;let i = index;\" class=\"month-box\" [attr.id]=\"'month-' + i\">\n          <h4 class=\"text-center month-title\">{{month.original.date | date:monthFormatFilterStr}}</h4>\n          <ion-calendar-month [month]=\"month\"\n                              [pickMode]=\"options.pickMode\"\n                              [isSaveHistory]=\"isSaveHistory\"\n                              [id]=\"_id\"\n                              [color]=\"_color\"\n                              (onChange)=\"onChange($event)\"\n                              [(ngModel)]=\"datesTemp\">\n\n          </ion-calendar-month>\n        </div>\n      </div>\n\n      <ion-infinite-scroll (ionInfinite)=\"nextMonth($event)\">\n        <ion-infinite-scroll-content></ion-infinite-scroll-content>\n      </ion-infinite-scroll>\n\n    </ion-content>\n  ",
             },] },
@@ -244,0 +250,0 @@ ];

dist/components/calendar.modal.metadata.json

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

dist/components/month.component.d.ts

 import { ChangeDetectorRef, EventEmitter, OnInit } from '@angular/core';
-import { ControlValueAccessor } from "@angular/forms";
-import { CalendarDay, CalendarMonth } from '../calendar.model';
+import { ControlValueAccessor } from '@angular/forms';
+import { CalendarDay, CalendarMonth, PickMode } from '../calendar.model';
 export declare const MONTH_VALUE_ACCESSOR: any;
@@ -8,3 +8,3 @@ export declare class MonthComponent implements ControlValueAccessor, OnInit {
     month: CalendarMonth;
-    isRadio: boolean;
+    pickMode: PickMode;
     isSaveHistory: boolean;
@@ -11,0 +11,0 @@ id: any;

dist/components/month.component.js

 import { Component, ChangeDetectorRef, Input, Output, EventEmitter, forwardRef } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 export var MONTH_VALUE_ACCESSOR = {
@@ -13,6 +13,6 @@ provide: NG_VALUE_ACCESSOR,
         this.onChange = new EventEmitter();
-        this._date = [null, null];
+        this._date = [];
     }
     MonthComponent.prototype.ngOnInit = function () {
-        this._date = [null, null];
+        this._date = [];
     };
@@ -29,3 +29,5 @@ MonthComponent.prototype.writeValue = function (obj) {
     MonthComponent.prototype.isEndSelection = function (day) {
-        if (this.isRadio || !Array.isArray(this._date) || this._date[1] === null) {
+        if (!day)
+            return;
+        if (this.pickMode !== 'range' || !Array.isArray(this._date) || this._date[1] === null) {
             return false;
@@ -36,3 +38,5 @@ }
     MonthComponent.prototype.isBetween = function (day) {
-        if (this.isRadio || !Array.isArray(this._date)) {
+        if (!day)
+            return;
+        if (this.pickMode !== 'range' || !Array.isArray(this._date)) {
             return false;
@@ -57,3 +61,5 @@ }
     MonthComponent.prototype.isStartSelection = function (day) {
-        if (this.isRadio || !Array.isArray(this._date) || this._date[0] === null) {
+        if (!day)
+            return;
+        if (this.pickMode !== 'range' || !Array.isArray(this._date) || this._date[0] === null) {
             return false;
@@ -65,7 +71,12 @@ }
         if (Array.isArray(this._date)) {
-            if (this._date[0] !== null) {
-                return time === this._date[0].time;
+            if (this.pickMode !== 'multi') {
+                if (this._date[0] !== null) {
+                    return time === this._date[0].time;
+                }
+                if (this._date[1] !== null) {
+                    return time === this._date[1].time;
+                }
             }
-            if (this._date[1] !== null) {
-                return time === this._date[1].time;
+            else {
+                return this._date.findIndex(function (e) { return e !== null && e.time === time; }) !== -1;
             }
@@ -80,3 +91,3 @@ }
         this.ref.detectChanges();
-        if (this.isRadio) {
+        if (this.pickMode === 'single') {
             this._date[0] = item;
@@ -86,21 +97,33 @@ this.onChange.emit(this._date);
         }
-        if (this._date[0] === null) {
-            this._date[0] = item;
-            this.ref.detectChanges();
-        }
-        else if (this._date[1] === null) {
-            if (this._date[0].time < item.time) {
-                this._date[1] = item;
+        if (this.pickMode === 'range') {
+            if (this._date[0] === null) {
+                this._date[0] = item;
+                this.ref.detectChanges();
             }
+            else if (this._date[1] === null) {
+                if (this._date[0].time < item.time) {
+                    this._date[1] = item;
+                }
+                else {
+                    this._date[1] = this._date[0];
+                    this._date[0] = item;
+                }
+                this.ref.detectChanges();
+            }
             else {
-                this._date[1] = this._date[0];
                 this._date[0] = item;
+                this._date[1] = null;
             }
-            this.ref.detectChanges();
+            this.onChange.emit(this._date);
         }
-        else {
-            this._date[0] = item;
-            this._date[1] = null;
+        if (this.pickMode === 'multi') {
+            var index = this._date.findIndex(function (e) { return e !== null && e.time === item.time; });
+            if (index === -1) {
+                this._date.push(item);
+            }
+            else {
+                this._date.splice(index, 1);
+            }
+            this.onChange.emit(this._date.filter(function (e) { return e !== null; }));
         }
-        this.onChange.emit(this._date);
         this.ref.detectChanges();
@@ -115,3 +138,3 @@ };
                 providers: [MONTH_VALUE_ACCESSOR],
-                template: "        \n        <div [class]=\"color\">\n            <div *ngIf=\"isRadio\">\n                <div class=\"days-box\">\n                    <div class=\"days\" *ngFor=\"let day of month.days\">\n                        <button [class]=\"'days-btn ' + day.cssClass\"\n                                *ngIf=\"day\"\n                                [class.today]=\"day.isToday\"\n                                (click)=\"onSelected(day)\"\n                                [class.marked]=\"day.marked\"\n                                [class.on-selected]=\"isSelected(day.time)\"\n                                [disabled]=\"day.disable\">\n                            <p>{{day.title}}</p>\n                            <small *ngIf=\"day.subTitle\">{{day?.subTitle}}</small>\n                        </button>\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"!isRadio\">\n                <div class=\"days-box\">\n                    <div class=\"days\" *ngFor=\"let day of month.days\">\n                        <button [class]=\"'days-btn ' + day.cssClass\"\n                                *ngIf=\"day\"\n                                [class.today]=\"day.isToday\"\n                                (click)=\"onSelected(day)\"\n                                [class.marked]=\"day.marked\"\n                                [class.on-selected]=\"isSelected(day.time)\"\n                                [disabled]=\"day.disable\"\n                                [class.startSelection]=\"isStartSelection(day)\"\n                                [class.endSelection]=\"isEndSelection(day)\"\n                                [class.between]=\"isBetween(day)\">\n                            <p>{{day.title}}</p>\n                            <small *ngIf=\"day.subTitle\">{{day?.subTitle}}</small>\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    ",
+                template: "\n    <div [class]=\"color\">\n      <div *ngIf=\"pickMode !== 'range'\">\n        <div class=\"days-box\">\n          <div class=\"days\" *ngFor=\"let day of month.days\">\n            <button [class]=\"'days-btn ' + day.cssClass\"\n                    *ngIf=\"day\"\n                    [class.today]=\"day.isToday\"\n                    (click)=\"onSelected(day)\"\n                    [class.marked]=\"day.marked\"\n                    [class.on-selected]=\"isSelected(day.time)\"\n                    [disabled]=\"day.disable\">\n              <p>{{day.title}}</p>\n              <small *ngIf=\"day.subTitle\">{{day?.subTitle}}</small>\n            </button>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"pickMode === 'range'\">\n        <div class=\"days-box\">\n          <div class=\"days\"\n               *ngFor=\"let day of month.days\"\n               [class.startSelection]=\"isStartSelection(day)\"\n               [class.endSelection]=\"isEndSelection(day)\"\n               [class.between]=\"isBetween(day)\">\n            <button [class]=\"'days-btn ' + day.cssClass\"\n                    *ngIf=\"day\"\n                    [class.today]=\"day.isToday\"\n                    (click)=\"onSelected(day)\"\n                    [class.marked]=\"day.marked\"\n                    [class.on-selected]=\"isSelected(day.time)\"\n                    [disabled]=\"day.disable\">\n              <p>{{day.title}}</p>\n              <small *ngIf=\"day.subTitle\">{{day?.subTitle}}</small>\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  ",
             },] },
@@ -125,3 +148,3 @@ ];
     'month': [{ type: Input },],
-    'isRadio': [{ type: Input },],
+    'pickMode': [{ type: Input },],
     'isSaveHistory': [{ type: Input },],
@@ -128,0 +151,0 @@ 'id': [{ type: Input },],

dist/components/month.component.metadata.json

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

dist/services/calendar.service.js

@@ -10,5 +10,4 @@ /**
     CalendarService.prototype.safeOpt = function (calendarOptions) {
-        var _arr = [];
-        var _a = calendarOptions || {}, _b = _a.autoDone, autoDone = _b === void 0 ? false : _b, _c = _a.from, from = _c === void 0 ? new Date() : _c, _d = _a.to, to = _d === void 0 ? 0 : _d, _e = _a.cssClass, cssClass = _e === void 0 ? '' : _e, _f = _a.weekStartDay, weekStartDay = _f === void 0 ? 0 : _f, _g = _a.isRadio, isRadio = _g === void 0 ? true : _g, _h = _a.canBackwardsSelected, canBackwardsSelected = _h === void 0 ? false : _h, _j = _a.disableWeekdays, disableWeekdays = _j === void 0 ? _arr : _j, _k = _a.closeLabel, closeLabel = _k === void 0 ? 'cancel' : _k, _l = _a.closeIcon, closeIcon = _l === void 0 ? false : _l, _m = _a.doneLabel, doneLabel = _m === void 0 ? 'done' : _m, _o = _a.doneIcon, doneIcon = _o === void 0 ? false : _o, _p = _a.id, id = _p === void 0 ? '' : _p, _q = _a.color, color = _q === void 0 ? 'primary' : _q, _r = _a.isSaveHistory, isSaveHistory = _r === void 0 ? false : _r, _s = _a.monthTitle, monthTitle = _s === void 0 ? 'MMM yyyy' : _s, _t = _a.title, title = _t === void 0 ? 'Calendar' : _t, _u = _a.weekdaysTitle, weekdaysTitle = _u === void 0 ? "Di_Lu_Ma_Me_Je_Ve_Sa".split("_") : _u, _v = _a.daysConfig, daysConfig = _v === void 0 ? _arr : _v, _w = _a.countNextMonths, countNextMonths = _w === void 0 ? 3 : _w, _x = _a.showYearPicker, showYearPicker = _x === void 0 ? false : _x;
-        var options = {
+        var _a = calendarOptions || {}, _b = _a.autoDone, autoDone = _b === void 0 ? false : _b, _c = _a.from, from = _c === void 0 ? new Date() : _c, _d = _a.to, to = _d === void 0 ? 0 : _d, _e = _a.cssClass, cssClass = _e === void 0 ? '' : _e, _f = _a.weekStart, weekStart = _f === void 0 ? 0 : _f, _g = _a.canBackwardsSelected, canBackwardsSelected = _g === void 0 ? false : _g, _h = _a.disableWeeks, disableWeeks = _h === void 0 ? [] : _h, _j = _a.closeLabel, closeLabel = _j === void 0 ? 'CANCEL' : _j, _k = _a.closeIcon, closeIcon = _k === void 0 ? false : _k, _l = _a.doneLabel, doneLabel = _l === void 0 ? 'DONE' : _l, _m = _a.doneIcon, doneIcon = _m === void 0 ? false : _m, _o = _a.id, id = _o === void 0 ? '' : _o, _p = _a.pickMode, pickMode = _p === void 0 ? 'single' : _p, _q = _a.color, color = _q === void 0 ? 'primary' : _q, _r = _a.isSaveHistory, isSaveHistory = _r === void 0 ? false : _r, _s = _a.monthFormat, monthFormat = _s === void 0 ? 'MMM yyyy' : _s, _t = _a.title, title = _t === void 0 ? 'CALENDAR' : _t, _u = _a.weekdays, weekdays = _u === void 0 ? ['S', 'M', 'T', 'W', 'T', 'F', 'S'] : _u, _v = _a.daysConfig, daysConfig = _v === void 0 ? [] : _v, _w = _a.countNextMonths, countNextMonths = _w === void 0 ? 3 : _w, _x = _a.showYearPicker, showYearPicker = _x === void 0 ? false : _x;
+        return {
             autoDone: autoDone,
@@ -18,4 +17,3 @@ from: from,
             cssClass: cssClass,
-            isRadio: isRadio,
-            weekStartDay: weekStartDay,
+            weekStart: weekStart,
             canBackwardsSelected: canBackwardsSelected,
@@ -27,9 +25,10 @@ closeLabel: closeLabel,
             id: id,
+            pickMode: pickMode,
             color: color,
             isSaveHistory: isSaveHistory,
             defaultDate: calendarOptions.defaultDate || from,
-            disableWeekdays: disableWeekdays,
-            monthTitle: monthTitle,
+            disableWeeks: disableWeeks,
+            monthFormat: monthFormat,
             title: title,
-            weekdaysTitle: weekdaysTitle,
+            weekdays: weekdays,
             daysConfig: daysConfig,
@@ -39,3 +38,2 @@ countNextMonths: countNextMonths,
         };
-        return options;
     };
@@ -69,3 +67,3 @@ CalendarService.prototype.createOriginalCalendar = function (time) {
         var isBetween = true;
-        var disableWee = opt.disableWeekdays.indexOf(_time.toDate().getDay()) !== -1;
+        var disableWee = opt.disableWeeks.indexOf(_time.toDate().getDay()) !== -1;
         if (_rangeBeg > 0 && _rangeEnd > 0) {
@@ -81,3 +79,3 @@ if (!opt.canBackwardsSelected) {
             if (!opt.canBackwardsSelected) {
-                var _addTime = _time.add('day', 1);
+                var _addTime = _time.add(1, 'day');
                 isBetween = !_addTime.isAfter(_rangeBeg);
@@ -96,3 +94,3 @@ }
             cssClass: dayConfig ? dayConfig.cssClass || '' : '',
-            disable: dayConfig ? dayConfig.disable || _disable : _disable,
+            disable: dayConfig ? dayConfig.disable && _disable : _disable,
             title: dayConfig ? dayConfig.title || new Date(time).getDate().toString() : new Date(time).getDate().toString(),
@@ -109,11 +107,10 @@ subTitle: dayConfig ? dayConfig.subTitle || '' : '',
         }
-        var weekStartDay = opt.weekStartDay;
-        if (weekStartDay === 1) {
+        var weekStart = opt.weekStart;
+        if (weekStart === 1) {
             if (days[0] === null) {
                 days.shift();
-                days.push.apply(days, new Array(1).fill(null));
+                days.push(null);
             }
             else {
-                days.unshift(null);
-                days.pop();
+                days.unshift.apply(days, new Array(6).fill(null));
             }
@@ -120,0 +117,0 @@ }

gulpfile.js

 var gulp = require('gulp');
 
-var SRC_PATH = 'src/';
-var DIST_PATH = 'dist';
+var SRC_PATH = './src';
+var DIST_PATH = './dist';
+var DEV_PATH = './dev/src/components/ion2-calendar';
 
+gulp.task('dev2src', function() {
+    gulp.src( DEV_PATH + '/**/**').pipe(gulp.dest(SRC_PATH));
+});
+
 gulp.task('copy-scss', function() {
-    gulp.src( SRC_PATH + '**/*.scss').pipe(gulp.dest(DIST_PATH));
+    gulp.src( SRC_PATH + '/**/*.scss').pipe(gulp.dest(DIST_PATH));
 });
 
 gulp.task('dist2nm', function() {
-    gulp.src( DIST_PATH+'**/**').pipe(gulp.dest('demo/node_modules/ion2-calendar'));
+    gulp.src( DIST_PATH+'/**/**').pipe(gulp.dest('demo/node_modules/ion2-calendar'));
 });

package.json

 {
   "name": "ion2-calendar",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.4",
   "description": "A date picker for ionic2 ",
@@ -10,3 +10,5 @@ "main": "./dist/index.js",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "rm -rf aot dist && npm run ngc && gulp copy-scss && gulp dist2nm",
+    "build": "rm -rf aot dist src && gulp dev2src && npm run ngc && gulp copy-scss",
+    "build:demo": "npm run build && gulp dist2nm",
+    "start:s": "cd ./demo && npm run ionic:server",
     "lint": "./node_modules/.bin/tslint -c tslint.json src/**/*.ts"
@@ -35,2 +37,3 @@ },
     "sw-toolbox": "3.6.0",
+    "tslint-eslint-rules": "^4.1.1",
     "zone.js": "0.8.10"
@@ -50,5 +53,4 @@ },
     "typescript": "^2.0.9",
-    "tslint": "^5.3.2",
-    "tslint-eslint-rules": "^4.1.1"
+    "tslint": "^5.3.2"
   }
 }

README.md

@@ -268,10 +268,19 @@ # ion2-calendar
 
-# Development
+### Development
 
 ```bash
-cd ion2-calendar
+cd ./dev
 npm install
+npm run ionic:serve
+# do something in ./dev/src/components/ion2-calendar
+```
+
+### Build
+
+```bash
+cd ./
+npm install
 npm run build
-# output ./dist files
 ```
+
 [![NPM](https://nodei.co/npm-dl/ion2-calendar.png?months=3&height=1)](https://nodei.co/npm/ion2-calendar/)
@@ -278,0 +287,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

Major refactor

Supply chain risk

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

Found 1 instance in 1 package

Long strings

Supply chain risk

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Long strings

Supply chain risk

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

240856

increased by90.56%

Dependency count

4

decreased by-20%

Number of package files

64

increased by33.33%

Lines of code

3866

increased by279.39%

Number of lines in readme file

295

increased by3.15%

Worsened metrics

Dev dependency count

18

increased by5.88%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedtslint-eslint-rules@^4.1.1

• - Removeddoctrine@0.7.2(transitive)

• - Removedesutils@1.1.6(transitive)

• - Removedtslint-eslint-rules@4.1.1(transitive)

• - Removedtsutils@1.9.1(transitive)