ionic2-calendar - npm Package Compare versions

Comparing version 0.2.5 to 0.3.0

calendar.js

@@ -9,3 +9,3 @@ import { Component, EventEmitter, Input, Output, Inject, LOCALE_ID } from '@angular/core';
 })(Step || (Step = {}));
-export var CalendarComponent = (function () {
+var CalendarComponent = (function () {
     function CalendarComponent(calendarService, locale) {
@@ -88,49 +88,50 @@ this.calendarService = calendarService;
     };
-    CalendarComponent.decorators = [
-        { type: Component, args: [{
-                    selector: 'calendar',
-                    template: "\n        <template #monthviewDefaultDisplayEventTemplate let-view=\"view\" let-row=\"row\" let-col=\"col\">\n            {{view.dates[row*7+col].label}}\n        </template>\n        <template #monthviewDefaultEventDetailTemplate let-showEventDetail=\"showEventDetail\" let-selectedDate=\"selectedDate\" let-noEventsLabel=\"noEventsLabel\">\n            <ion-list class=\"event-detail-container\" has-bouncing=\"false\" *ngIf=\"showEventDetail\" overflow-scroll=\"false\">\n                <ion-item *ngFor=\"let event of selectedDate?.events\" (click)=\"eventSelected(event)\">\n                        <span *ngIf=\"!event.allDay\" class=\"monthview-eventdetail-timecolumn\">{{event.startTime|date: 'HH:mm'}}\n                            -\n                            {{event.endTime|date: 'HH:mm'}}\n                        </span>\n                    <span *ngIf=\"event.allDay\" class=\"monthview-eventdetail-timecolumn\">{{allDayLabel}}</span>\n                    <span class=\"event-detail\">  |  {{event.title}}</span>\n                </ion-item>\n                <ion-item *ngIf=\"selectedDate?.events.length==0\">\n                    <div class=\"no-events-label\">{{noEventsLabel}}</div>\n                </ion-item>\n            </ion-list>\n        </template>\n        <template #defaultAllDayEventTemplate let-displayEvent=\"displayEvent\">\n            <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n        </template>\n        <template #defaultNormalEventTemplate let-displayEvent=\"displayEvent\">\n            <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n        </template>\n\n        <div [ngSwitch]=\"calendarMode\" class=\"{{calendarMode}}view-container\">\n            <monthview *ngSwitchCase=\"'month'\"\n                [formatDay]=\"formatDay\"\n                [formatDayHeader]=\"formatDayHeader\"\n                [formatMonthTitle]=\"formatMonthTitle\"\n                [startingDayMonth]=\"startingDayMonth\"\n                [showEventDetail]=\"showEventDetail\"\n                [noEventsLabel]=\"noEventsLabel\"\n                [autoSelect]=\"autoSelect\"\n                [eventSource]=\"eventSource\"\n                [markDisabled]=\"markDisabled\"\n                [monthviewDisplayEventTemplate]=\"monthviewDisplayEventTemplate||monthviewDefaultDisplayEventTemplate\"\n                [monthviewInactiveDisplayEventTemplate]=\"monthviewInactiveDisplayEventTemplate||monthviewDefaultDisplayEventTemplate\"\n                [monthviewEventDetailTemplate]=\"monthviewEventDetailTemplate||monthviewDefaultEventDetailTemplate\"\n                [locale]=\"locale\"\n                (onRangeChanged)=\"rangeChanged($event)\"\n                (onEventSelected)=\"eventSelected($event)\"\n                (onTimeSelected)=\"timeSelected($event)\"\n                (onTitleChanged)=\"titleChanged($event)\">\n            </monthview>\n            <weekview *ngSwitchCase=\"'week'\"\n                [formatWeekTitle]=\"formatWeekTitle\"\n                [formatWeekViewDayHeader]=\"formatWeekViewDayHeader\"\n                [formatHourColumn]=\"formatHourColumn\"\n                [startingDayWeek]=\"startingDayWeek\"\n                [allDayLabel]=\"allDayLabel\"\n                [hourParts]=\"hourParts\"\n                [eventSource]=\"eventSource\"\n                [markDisabled]=\"markDisabled\"\n                [weekviewAllDayEventTemplate]=\"weekviewAllDayEventTemplate||defaultAllDayEventTemplate\"\n                [weekviewNormalEventTemplate]=\"weekviewNormalEventTemplate||defaultNormalEventTemplate\"\n                [locale]=\"locale\"\n                (onRangeChanged)=\"rangeChanged($event)\"\n                (onEventSelected)=\"eventSelected($event)\"\n                (onTimeSelected)=\"timeSelected($event)\"\n                (onTitleChanged)=\"titleChanged($event)\">\n            </weekview>\n            <dayview *ngSwitchCase=\"'day'\"\n                [formatDayTitle]=\"formatDayTitle\"\n                [formatHourColumn]=\"formatHourColumn\"\n                [allDayLabel]=\"allDayLabel\"\n                [hourParts]=\"hourParts\"\n                [eventSource]=\"eventSource\"\n                [markDisabled]=\"markDisabled\"\n                [dayviewAllDayEventTemplate]=\"dayviewAllDayEventTemplate||defaultAllDayEventTemplate\"\n                [dayviewNormalEventTemplate]=\"dayviewNormalEventTemplate||defaultNormalEventTemplate\"\n                [locale]=\"locale\"\n                (onRangeChanged)=\"rangeChanged($event)\"\n                (onEventSelected)=\"eventSelected($event)\"\n                (onTimeSelected)=\"timeSelected($event)\"\n                (onTitleChanged)=\"titleChanged($event)\">\n            </dayview>\n        </div>\n    ",
-                    styles: ["\n        :host > div { height: 100%; }\n\n        .event-detail-container {\n          border-top: 2px darkgrey solid;\n        }\n\n        .no-events-label {\n          font-weight: bold;\n          color: darkgrey;\n          text-align: center;\n        }\n\n        .event-detail {\n          cursor: pointer;\n          white-space: nowrap;\n          text-overflow: ellipsis;\n        }\n\n        .monthview-eventdetail-timecolumn {\n          width: 110px;\n          overflow: hidden;\n        }\n\n        .calendar-event-inner {\n          overflow: hidden;\n          background-color: #3a87ad;\n          color: white;\n          height: 100%;\n          width: 100%;\n          padding: 2px;\n          line-height: 15px;\n        }\n\n        @media (max-width: 750px) {\n          .calendar-event-inner {\n            font-size: 12px;\n          }\n        }\n    "],
-                    providers: [CalendarService]
-                },] },
-    ];
-    CalendarComponent.ctorParameters = [
-        { type: CalendarService, },
-        { type: undefined, decorators: [{ type: Inject, args: [LOCALE_ID,] },] },
-    ];
-    CalendarComponent.propDecorators = {
-        'currentDate': [{ type: Input },],
-        'eventSource': [{ type: Input },],
-        'calendarMode': [{ type: Input },],
-        'formatDay': [{ type: Input },],
-        'formatDayHeader': [{ type: Input },],
-        'formatDayTitle': [{ type: Input },],
-        'formatWeekTitle': [{ type: Input },],
-        'formatMonthTitle': [{ type: Input },],
-        'formatWeekViewDayHeader': [{ type: Input },],
-        'formatHourColumn': [{ type: Input },],
-        'showEventDetail': [{ type: Input },],
-        'startingDayMonth': [{ type: Input },],
-        'startingDayWeek': [{ type: Input },],
-        'allDayLabel': [{ type: Input },],
-        'noEventsLabel': [{ type: Input },],
-        'queryMode': [{ type: Input },],
-        'step': [{ type: Input },],
-        'autoSelect': [{ type: Input },],
-        'markDisabled': [{ type: Input },],
-        'monthviewDisplayEventTemplate': [{ type: Input },],
-        'monthviewInactiveDisplayEventTemplate': [{ type: Input },],
-        'monthviewEventDetailTemplate': [{ type: Input },],
-        'weekviewAllDayEventTemplate': [{ type: Input },],
-        'weekviewNormalEventTemplate': [{ type: Input },],
-        'dayviewAllDayEventTemplate': [{ type: Input },],
-        'dayviewNormalEventTemplate': [{ type: Input },],
-        'onCurrentDateChanged': [{ type: Output },],
-        'onRangeChanged': [{ type: Output },],
-        'onEventSelected': [{ type: Output },],
-        'onTimeSelected': [{ type: Output },],
-        'onTitleChanged': [{ type: Output },],
-    };
     return CalendarComponent;
 }());
+export { CalendarComponent };
+CalendarComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'calendar',
+                template: "\n        <ng-template #monthviewDefaultDisplayEventTemplate let-view=\"view\" let-row=\"row\" let-col=\"col\">\n            {{view.dates[row*7+col].label}}\n        </ng-template>\n        <ng-template #monthviewDefaultEventDetailTemplate let-showEventDetail=\"showEventDetail\" let-selectedDate=\"selectedDate\" let-noEventsLabel=\"noEventsLabel\">\n            <ion-list class=\"event-detail-container\" has-bouncing=\"false\" *ngIf=\"showEventDetail\" overflow-scroll=\"false\">\n                <ion-item *ngFor=\"let event of selectedDate?.events\" (click)=\"eventSelected(event)\">\n                        <span *ngIf=\"!event.allDay\" class=\"monthview-eventdetail-timecolumn\">{{event.startTime|date: 'HH:mm'}}\n                            -\n                            {{event.endTime|date: 'HH:mm'}}\n                        </span>\n                    <span *ngIf=\"event.allDay\" class=\"monthview-eventdetail-timecolumn\">{{allDayLabel}}</span>\n                    <span class=\"event-detail\">  |  {{event.title}}</span>\n                </ion-item>\n                <ion-item *ngIf=\"selectedDate?.events.length==0\">\n                    <div class=\"no-events-label\">{{noEventsLabel}}</div>\n                </ion-item>\n            </ion-list>\n        </ng-template>\n        <ng-template #defaultAllDayEventTemplate let-displayEvent=\"displayEvent\">\n            <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n        </ng-template>\n        <ng-template #defaultNormalEventTemplate let-displayEvent=\"displayEvent\">\n            <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n        </ng-template>\n\n        <div [ngSwitch]=\"calendarMode\" class=\"{{calendarMode}}view-container\">\n            <monthview *ngSwitchCase=\"'month'\"\n                [formatDay]=\"formatDay\"\n                [formatDayHeader]=\"formatDayHeader\"\n                [formatMonthTitle]=\"formatMonthTitle\"\n                [startingDayMonth]=\"startingDayMonth\"\n                [showEventDetail]=\"showEventDetail\"\n                [noEventsLabel]=\"noEventsLabel\"\n                [autoSelect]=\"autoSelect\"\n                [eventSource]=\"eventSource\"\n                [markDisabled]=\"markDisabled\"\n                [monthviewDisplayEventTemplate]=\"monthviewDisplayEventTemplate||monthviewDefaultDisplayEventTemplate\"\n                [monthviewInactiveDisplayEventTemplate]=\"monthviewInactiveDisplayEventTemplate||monthviewDefaultDisplayEventTemplate\"\n                [monthviewEventDetailTemplate]=\"monthviewEventDetailTemplate||monthviewDefaultEventDetailTemplate\"\n                [locale]=\"locale\"\n                (onRangeChanged)=\"rangeChanged($event)\"\n                (onEventSelected)=\"eventSelected($event)\"\n                (onTimeSelected)=\"timeSelected($event)\"\n                (onTitleChanged)=\"titleChanged($event)\">\n            </monthview>\n            <weekview *ngSwitchCase=\"'week'\"\n                [formatWeekTitle]=\"formatWeekTitle\"\n                [formatWeekViewDayHeader]=\"formatWeekViewDayHeader\"\n                [formatHourColumn]=\"formatHourColumn\"\n                [startingDayWeek]=\"startingDayWeek\"\n                [allDayLabel]=\"allDayLabel\"\n                [hourParts]=\"hourParts\"\n                [eventSource]=\"eventSource\"\n                [markDisabled]=\"markDisabled\"\n                [weekviewAllDayEventTemplate]=\"weekviewAllDayEventTemplate||defaultAllDayEventTemplate\"\n                [weekviewNormalEventTemplate]=\"weekviewNormalEventTemplate||defaultNormalEventTemplate\"\n                [locale]=\"locale\"\n                (onRangeChanged)=\"rangeChanged($event)\"\n                (onEventSelected)=\"eventSelected($event)\"\n                (onTimeSelected)=\"timeSelected($event)\"\n                (onTitleChanged)=\"titleChanged($event)\">\n            </weekview>\n            <dayview *ngSwitchCase=\"'day'\"\n                [formatDayTitle]=\"formatDayTitle\"\n                [formatHourColumn]=\"formatHourColumn\"\n                [allDayLabel]=\"allDayLabel\"\n                [hourParts]=\"hourParts\"\n                [eventSource]=\"eventSource\"\n                [markDisabled]=\"markDisabled\"\n                [dayviewAllDayEventTemplate]=\"dayviewAllDayEventTemplate||defaultAllDayEventTemplate\"\n                [dayviewNormalEventTemplate]=\"dayviewNormalEventTemplate||defaultNormalEventTemplate\"\n                [locale]=\"locale\"\n                (onRangeChanged)=\"rangeChanged($event)\"\n                (onEventSelected)=\"eventSelected($event)\"\n                (onTimeSelected)=\"timeSelected($event)\"\n                (onTitleChanged)=\"titleChanged($event)\">\n            </dayview>\n        </div>\n    ",
+                styles: ["\n        :host > div { height: 100%; }\n\n        .event-detail-container {\n          border-top: 2px darkgrey solid;\n        }\n\n        .no-events-label {\n          font-weight: bold;\n          color: darkgrey;\n          text-align: center;\n        }\n\n        .event-detail {\n          cursor: pointer;\n          white-space: nowrap;\n          text-overflow: ellipsis;\n        }\n\n        .monthview-eventdetail-timecolumn {\n          width: 110px;\n          overflow: hidden;\n        }\n\n        .calendar-event-inner {\n          overflow: hidden;\n          background-color: #3a87ad;\n          color: white;\n          height: 100%;\n          width: 100%;\n          padding: 2px;\n          line-height: 15px;\n        }\n\n        @media (max-width: 750px) {\n          .calendar-event-inner {\n            font-size: 12px;\n          }\n        }\n    "],
+                providers: [CalendarService]
+            },] },
+];
+CalendarComponent.ctorParameters = function () { return [
+    { type: CalendarService, },
+    { type: undefined, decorators: [{ type: Inject, args: [LOCALE_ID,] },] },
+]; };
+CalendarComponent.propDecorators = {
+    'currentDate': [{ type: Input },],
+    'eventSource': [{ type: Input },],
+    'calendarMode': [{ type: Input },],
+    'formatDay': [{ type: Input },],
+    'formatDayHeader': [{ type: Input },],
+    'formatDayTitle': [{ type: Input },],
+    'formatWeekTitle': [{ type: Input },],
+    'formatMonthTitle': [{ type: Input },],
+    'formatWeekViewDayHeader': [{ type: Input },],
+    'formatHourColumn': [{ type: Input },],
+    'showEventDetail': [{ type: Input },],
+    'startingDayMonth': [{ type: Input },],
+    'startingDayWeek': [{ type: Input },],
+    'allDayLabel': [{ type: Input },],
+    'noEventsLabel': [{ type: Input },],
+    'queryMode': [{ type: Input },],
+    'step': [{ type: Input },],
+    'autoSelect': [{ type: Input },],
+    'markDisabled': [{ type: Input },],
+    'monthviewDisplayEventTemplate': [{ type: Input },],
+    'monthviewInactiveDisplayEventTemplate': [{ type: Input },],
+    'monthviewEventDetailTemplate': [{ type: Input },],
+    'weekviewAllDayEventTemplate': [{ type: Input },],
+    'weekviewNormalEventTemplate': [{ type: Input },],
+    'dayviewAllDayEventTemplate': [{ type: Input },],
+    'dayviewNormalEventTemplate': [{ type: Input },],
+    'onCurrentDateChanged': [{ type: Output },],
+    'onRangeChanged': [{ type: Output },],
+    'onEventSelected': [{ type: Output },],
+    'onTimeSelected': [{ type: Output },],
+    'onTitleChanged': [{ type: Output },],
+};
 //# sourceMappingURL=calendar.js.map

calendar.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"Step":{"QuarterHour":15,"HalfHour":30,"Hour":60},"CalendarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"calendar","template":"\n        <template #monthviewDefaultDisplayEventTemplate let-view=\"view\" let-row=\"row\" let-col=\"col\">\n            {{view.dates[row*7+col].label}}\n        </template>\n        <template #monthviewDefaultEventDetailTemplate let-showEventDetail=\"showEventDetail\" let-selectedDate=\"selectedDate\" let-noEventsLabel=\"noEventsLabel\">\n            <ion-list class=\"event-detail-container\" has-bouncing=\"false\" *ngIf=\"showEventDetail\" overflow-scroll=\"false\">\n                <ion-item *ngFor=\"let event of selectedDate?.events\" (click)=\"eventSelected(event)\">\n                        <span *ngIf=\"!event.allDay\" class=\"monthview-eventdetail-timecolumn\">{{event.startTime|date: 'HH:mm'}}\n                            -\n                            {{event.endTime|date: 'HH:mm'}}\n                        </span>\n                    <span *ngIf=\"event.allDay\" class=\"monthview-eventdetail-timecolumn\">{{allDayLabel}}</span>\n                    <span class=\"event-detail\">  |  {{event.title}}</span>\n                </ion-item>\n                <ion-item *ngIf=\"selectedDate?.events.length==0\">\n                    <div class=\"no-events-label\">{{noEventsLabel}}</div>\n                </ion-item>\n            </ion-list>\n        </template>\n        <template #defaultAllDayEventTemplate let-displayEvent=\"displayEvent\">\n            <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n        </template>\n        <template #defaultNormalEventTemplate let-displayEvent=\"displayEvent\">\n            <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n        </template>\n\n        <div [ngSwitch]=\"calendarMode\" class=\"{{calendarMode}}view-container\">\n            <monthview *ngSwitchCase=\"'month'\"\n                [formatDay]=\"formatDay\"\n                [formatDayHeader]=\"formatDayHeader\"\n                [formatMonthTitle]=\"formatMonthTitle\"\n                [startingDayMonth]=\"startingDayMonth\"\n                [showEventDetail]=\"showEventDetail\"\n                [noEventsLabel]=\"noEventsLabel\"\n                [autoSelect]=\"autoSelect\"\n                [eventSource]=\"eventSource\"\n                [markDisabled]=\"markDisabled\"\n                [monthviewDisplayEventTemplate]=\"monthviewDisplayEventTemplate||monthviewDefaultDisplayEventTemplate\"\n                [monthviewInactiveDisplayEventTemplate]=\"monthviewInactiveDisplayEventTemplate||monthviewDefaultDisplayEventTemplate\"\n                [monthviewEventDetailTemplate]=\"monthviewEventDetailTemplate||monthviewDefaultEventDetailTemplate\"\n                [locale]=\"locale\"\n                (onRangeChanged)=\"rangeChanged($event)\"\n                (onEventSelected)=\"eventSelected($event)\"\n                (onTimeSelected)=\"timeSelected($event)\"\n                (onTitleChanged)=\"titleChanged($event)\">\n            </monthview>\n            <weekview *ngSwitchCase=\"'week'\"\n                [formatWeekTitle]=\"formatWeekTitle\"\n                [formatWeekViewDayHeader]=\"formatWeekViewDayHeader\"\n                [formatHourColumn]=\"formatHourColumn\"\n                [startingDayWeek]=\"startingDayWeek\"\n                [allDayLabel]=\"allDayLabel\"\n                [hourParts]=\"hourParts\"\n                [eventSource]=\"eventSource\"\n                [markDisabled]=\"markDisabled\"\n                [weekviewAllDayEventTemplate]=\"weekviewAllDayEventTemplate||defaultAllDayEventTemplate\"\n                [weekviewNormalEventTemplate]=\"weekviewNormalEventTemplate||defaultNormalEventTemplate\"\n                [locale]=\"locale\"\n                (onRangeChanged)=\"rangeChanged($event)\"\n                (onEventSelected)=\"eventSelected($event)\"\n                (onTimeSelected)=\"timeSelected($event)\"\n                (onTitleChanged)=\"titleChanged($event)\">\n            </weekview>\n            <dayview *ngSwitchCase=\"'day'\"\n                [formatDayTitle]=\"formatDayTitle\"\n                [formatHourColumn]=\"formatHourColumn\"\n                [allDayLabel]=\"allDayLabel\"\n                [hourParts]=\"hourParts\"\n                [eventSource]=\"eventSource\"\n                [markDisabled]=\"markDisabled\"\n                [dayviewAllDayEventTemplate]=\"dayviewAllDayEventTemplate||defaultAllDayEventTemplate\"\n                [dayviewNormalEventTemplate]=\"dayviewNormalEventTemplate||defaultNormalEventTemplate\"\n                [locale]=\"locale\"\n                (onRangeChanged)=\"rangeChanged($event)\"\n                (onEventSelected)=\"eventSelected($event)\"\n                (onTimeSelected)=\"timeSelected($event)\"\n                (onTitleChanged)=\"titleChanged($event)\">\n            </dayview>\n        </div>\n    ","styles":["\n        :host > div { height: 100%; }\n\n        .event-detail-container {\n          border-top: 2px darkgrey solid;\n        }\n\n        .no-events-label {\n          font-weight: bold;\n          color: darkgrey;\n          text-align: center;\n        }\n\n        .event-detail {\n          cursor: pointer;\n          white-space: nowrap;\n          text-overflow: ellipsis;\n        }\n\n        .monthview-eventdetail-timecolumn {\n          width: 110px;\n          overflow: hidden;\n        }\n\n        .calendar-event-inner {\n          overflow: hidden;\n          background-color: #3a87ad;\n          color: white;\n          height: 100%;\n          width: 100%;\n          padding: 2px;\n          line-height: 15px;\n        }\n\n        @media (max-width: 750px) {\n          .calendar-event-inner {\n            font-size: 12px;\n          }\n        }\n    "],"providers":[{"__symbolic":"reference","module":"./calendar.service","name":"CalendarService"}]}]}],"members":{"currentDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"eventSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"calendarMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatDay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatDayHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatDayTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatWeekTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatMonthTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatWeekViewDayHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatHourColumn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showEventDetail":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"startingDayMonth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"startingDayWeek":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"allDayLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"noEventsLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"queryMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"step":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"autoSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"markDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"monthviewDisplayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"monthviewInactiveDisplayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"monthviewEventDetailTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekviewAllDayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekviewNormalEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dayviewAllDayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dayviewNormalEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onCurrentDateChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onRangeChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onEventSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onTimeSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onTitleChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"LOCALE_ID"}]}]],"parameters":[{"__symbolic":"reference","module":"./calendar.service","name":"CalendarService"},{"__symbolic":"reference","name":"string"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"rangeChanged":[{"__symbolic":"method"}],"eventSelected":[{"__symbolic":"method"}],"timeSelected":[{"__symbolic":"method"}],"titleChanged":[{"__symbolic":"method"}]}}}}
+[{"__symbolic":"module","version":3,"metadata":{"IEvent":{"__symbolic":"interface"},"IRange":{"__symbolic":"interface"},"IView":{"__symbolic":"interface"},"IDayView":{"__symbolic":"interface"},"IDayViewRow":{"__symbolic":"interface"},"IMonthView":{"__symbolic":"interface"},"IMonthViewRow":{"__symbolic":"interface"},"IWeekView":{"__symbolic":"interface"},"IWeekViewDateRow":{"__symbolic":"interface"},"IWeekViewRow":{"__symbolic":"interface"},"IDisplayEvent":{"__symbolic":"interface"},"IDisplayAllDayEvent":{"__symbolic":"interface"},"ICalendarComponent":{"__symbolic":"interface"},"ITimeSelected":{"__symbolic":"interface"},"IMonthViewDisplayEventTemplateContext":{"__symbolic":"interface"},"IMonthViewEventDetailTemplateContext":{"__symbolic":"interface"},"Step":{"QuarterHour":15,"HalfHour":30,"Hour":60},"CalendarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"calendar","template":"\n        <ng-template #monthviewDefaultDisplayEventTemplate let-view=\"view\" let-row=\"row\" let-col=\"col\">\n            {{view.dates[row*7+col].label}}\n        </ng-template>\n        <ng-template #monthviewDefaultEventDetailTemplate let-showEventDetail=\"showEventDetail\" let-selectedDate=\"selectedDate\" let-noEventsLabel=\"noEventsLabel\">\n            <ion-list class=\"event-detail-container\" has-bouncing=\"false\" *ngIf=\"showEventDetail\" overflow-scroll=\"false\">\n                <ion-item *ngFor=\"let event of selectedDate?.events\" (click)=\"eventSelected(event)\">\n                        <span *ngIf=\"!event.allDay\" class=\"monthview-eventdetail-timecolumn\">{{event.startTime|date: 'HH:mm'}}\n                            -\n                            {{event.endTime|date: 'HH:mm'}}\n                        </span>\n                    <span *ngIf=\"event.allDay\" class=\"monthview-eventdetail-timecolumn\">{{allDayLabel}}</span>\n                    <span class=\"event-detail\">  |  {{event.title}}</span>\n                </ion-item>\n                <ion-item *ngIf=\"selectedDate?.events.length==0\">\n                    <div class=\"no-events-label\">{{noEventsLabel}}</div>\n                </ion-item>\n            </ion-list>\n        </ng-template>\n        <ng-template #defaultAllDayEventTemplate let-displayEvent=\"displayEvent\">\n            <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n        </ng-template>\n        <ng-template #defaultNormalEventTemplate let-displayEvent=\"displayEvent\">\n            <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n        </ng-template>\n\n        <div [ngSwitch]=\"calendarMode\" class=\"{{calendarMode}}view-container\">\n            <monthview *ngSwitchCase=\"'month'\"\n                [formatDay]=\"formatDay\"\n                [formatDayHeader]=\"formatDayHeader\"\n                [formatMonthTitle]=\"formatMonthTitle\"\n                [startingDayMonth]=\"startingDayMonth\"\n                [showEventDetail]=\"showEventDetail\"\n                [noEventsLabel]=\"noEventsLabel\"\n                [autoSelect]=\"autoSelect\"\n                [eventSource]=\"eventSource\"\n                [markDisabled]=\"markDisabled\"\n                [monthviewDisplayEventTemplate]=\"monthviewDisplayEventTemplate||monthviewDefaultDisplayEventTemplate\"\n                [monthviewInactiveDisplayEventTemplate]=\"monthviewInactiveDisplayEventTemplate||monthviewDefaultDisplayEventTemplate\"\n                [monthviewEventDetailTemplate]=\"monthviewEventDetailTemplate||monthviewDefaultEventDetailTemplate\"\n                [locale]=\"locale\"\n                (onRangeChanged)=\"rangeChanged($event)\"\n                (onEventSelected)=\"eventSelected($event)\"\n                (onTimeSelected)=\"timeSelected($event)\"\n                (onTitleChanged)=\"titleChanged($event)\">\n            </monthview>\n            <weekview *ngSwitchCase=\"'week'\"\n                [formatWeekTitle]=\"formatWeekTitle\"\n                [formatWeekViewDayHeader]=\"formatWeekViewDayHeader\"\n                [formatHourColumn]=\"formatHourColumn\"\n                [startingDayWeek]=\"startingDayWeek\"\n                [allDayLabel]=\"allDayLabel\"\n                [hourParts]=\"hourParts\"\n                [eventSource]=\"eventSource\"\n                [markDisabled]=\"markDisabled\"\n                [weekviewAllDayEventTemplate]=\"weekviewAllDayEventTemplate||defaultAllDayEventTemplate\"\n                [weekviewNormalEventTemplate]=\"weekviewNormalEventTemplate||defaultNormalEventTemplate\"\n                [locale]=\"locale\"\n                (onRangeChanged)=\"rangeChanged($event)\"\n                (onEventSelected)=\"eventSelected($event)\"\n                (onTimeSelected)=\"timeSelected($event)\"\n                (onTitleChanged)=\"titleChanged($event)\">\n            </weekview>\n            <dayview *ngSwitchCase=\"'day'\"\n                [formatDayTitle]=\"formatDayTitle\"\n                [formatHourColumn]=\"formatHourColumn\"\n                [allDayLabel]=\"allDayLabel\"\n                [hourParts]=\"hourParts\"\n                [eventSource]=\"eventSource\"\n                [markDisabled]=\"markDisabled\"\n                [dayviewAllDayEventTemplate]=\"dayviewAllDayEventTemplate||defaultAllDayEventTemplate\"\n                [dayviewNormalEventTemplate]=\"dayviewNormalEventTemplate||defaultNormalEventTemplate\"\n                [locale]=\"locale\"\n                (onRangeChanged)=\"rangeChanged($event)\"\n                (onEventSelected)=\"eventSelected($event)\"\n                (onTimeSelected)=\"timeSelected($event)\"\n                (onTitleChanged)=\"titleChanged($event)\">\n            </dayview>\n        </div>\n    ","styles":["\n        :host > div { height: 100%; }\n\n        .event-detail-container {\n          border-top: 2px darkgrey solid;\n        }\n\n        .no-events-label {\n          font-weight: bold;\n          color: darkgrey;\n          text-align: center;\n        }\n\n        .event-detail {\n          cursor: pointer;\n          white-space: nowrap;\n          text-overflow: ellipsis;\n        }\n\n        .monthview-eventdetail-timecolumn {\n          width: 110px;\n          overflow: hidden;\n        }\n\n        .calendar-event-inner {\n          overflow: hidden;\n          background-color: #3a87ad;\n          color: white;\n          height: 100%;\n          width: 100%;\n          padding: 2px;\n          line-height: 15px;\n        }\n\n        @media (max-width: 750px) {\n          .calendar-event-inner {\n            font-size: 12px;\n          }\n        }\n    "],"providers":[{"__symbolic":"reference","module":"./calendar.service","name":"CalendarService"}]}]}],"members":{"currentDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"eventSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"calendarMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatDay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatDayHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatDayTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatWeekTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatMonthTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatWeekViewDayHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatHourColumn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showEventDetail":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"startingDayMonth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"startingDayWeek":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"allDayLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"noEventsLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"queryMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"step":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"autoSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"markDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"monthviewDisplayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"monthviewInactiveDisplayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"monthviewEventDetailTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekviewAllDayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekviewNormalEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dayviewAllDayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dayviewNormalEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onCurrentDateChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onRangeChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onEventSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onTimeSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onTitleChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"LOCALE_ID"}]}]],"parameters":[{"__symbolic":"reference","module":"./calendar.service","name":"CalendarService"},{"__symbolic":"reference","name":"string"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"rangeChanged":[{"__symbolic":"method"}],"eventSelected":[{"__symbolic":"method"}],"timeSelected":[{"__symbolic":"method"}],"titleChanged":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"IEvent":{"__symbolic":"interface"},"IRange":{"__symbolic":"interface"},"IView":{"__symbolic":"interface"},"IDayView":{"__symbolic":"interface"},"IDayViewRow":{"__symbolic":"interface"},"IMonthView":{"__symbolic":"interface"},"IMonthViewRow":{"__symbolic":"interface"},"IWeekView":{"__symbolic":"interface"},"IWeekViewDateRow":{"__symbolic":"interface"},"IWeekViewRow":{"__symbolic":"interface"},"IDisplayEvent":{"__symbolic":"interface"},"IDisplayAllDayEvent":{"__symbolic":"interface"},"ICalendarComponent":{"__symbolic":"interface"},"ITimeSelected":{"__symbolic":"interface"},"IMonthViewDisplayEventTemplateContext":{"__symbolic":"interface"},"IMonthViewEventDetailTemplateContext":{"__symbolic":"interface"},"Step":{"QuarterHour":15,"HalfHour":30,"Hour":60},"CalendarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"calendar","template":"\n        <ng-template #monthviewDefaultDisplayEventTemplate let-view=\"view\" let-row=\"row\" let-col=\"col\">\n            {{view.dates[row*7+col].label}}\n        </ng-template>\n        <ng-template #monthviewDefaultEventDetailTemplate let-showEventDetail=\"showEventDetail\" let-selectedDate=\"selectedDate\" let-noEventsLabel=\"noEventsLabel\">\n            <ion-list class=\"event-detail-container\" has-bouncing=\"false\" *ngIf=\"showEventDetail\" overflow-scroll=\"false\">\n                <ion-item *ngFor=\"let event of selectedDate?.events\" (click)=\"eventSelected(event)\">\n                        <span *ngIf=\"!event.allDay\" class=\"monthview-eventdetail-timecolumn\">{{event.startTime|date: 'HH:mm'}}\n                            -\n                            {{event.endTime|date: 'HH:mm'}}\n                        </span>\n                    <span *ngIf=\"event.allDay\" class=\"monthview-eventdetail-timecolumn\">{{allDayLabel}}</span>\n                    <span class=\"event-detail\">  |  {{event.title}}</span>\n                </ion-item>\n                <ion-item *ngIf=\"selectedDate?.events.length==0\">\n                    <div class=\"no-events-label\">{{noEventsLabel}}</div>\n                </ion-item>\n            </ion-list>\n        </ng-template>\n        <ng-template #defaultAllDayEventTemplate let-displayEvent=\"displayEvent\">\n            <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n        </ng-template>\n        <ng-template #defaultNormalEventTemplate let-displayEvent=\"displayEvent\">\n            <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n        </ng-template>\n\n        <div [ngSwitch]=\"calendarMode\" class=\"{{calendarMode}}view-container\">\n            <monthview *ngSwitchCase=\"'month'\"\n                [formatDay]=\"formatDay\"\n                [formatDayHeader]=\"formatDayHeader\"\n                [formatMonthTitle]=\"formatMonthTitle\"\n                [startingDayMonth]=\"startingDayMonth\"\n                [showEventDetail]=\"showEventDetail\"\n                [noEventsLabel]=\"noEventsLabel\"\n                [autoSelect]=\"autoSelect\"\n                [eventSource]=\"eventSource\"\n                [markDisabled]=\"markDisabled\"\n                [monthviewDisplayEventTemplate]=\"monthviewDisplayEventTemplate||monthviewDefaultDisplayEventTemplate\"\n                [monthviewInactiveDisplayEventTemplate]=\"monthviewInactiveDisplayEventTemplate||monthviewDefaultDisplayEventTemplate\"\n                [monthviewEventDetailTemplate]=\"monthviewEventDetailTemplate||monthviewDefaultEventDetailTemplate\"\n                [locale]=\"locale\"\n                (onRangeChanged)=\"rangeChanged($event)\"\n                (onEventSelected)=\"eventSelected($event)\"\n                (onTimeSelected)=\"timeSelected($event)\"\n                (onTitleChanged)=\"titleChanged($event)\">\n            </monthview>\n            <weekview *ngSwitchCase=\"'week'\"\n                [formatWeekTitle]=\"formatWeekTitle\"\n                [formatWeekViewDayHeader]=\"formatWeekViewDayHeader\"\n                [formatHourColumn]=\"formatHourColumn\"\n                [startingDayWeek]=\"startingDayWeek\"\n                [allDayLabel]=\"allDayLabel\"\n                [hourParts]=\"hourParts\"\n                [eventSource]=\"eventSource\"\n                [markDisabled]=\"markDisabled\"\n                [weekviewAllDayEventTemplate]=\"weekviewAllDayEventTemplate||defaultAllDayEventTemplate\"\n                [weekviewNormalEventTemplate]=\"weekviewNormalEventTemplate||defaultNormalEventTemplate\"\n                [locale]=\"locale\"\n                (onRangeChanged)=\"rangeChanged($event)\"\n                (onEventSelected)=\"eventSelected($event)\"\n                (onTimeSelected)=\"timeSelected($event)\"\n                (onTitleChanged)=\"titleChanged($event)\">\n            </weekview>\n            <dayview *ngSwitchCase=\"'day'\"\n                [formatDayTitle]=\"formatDayTitle\"\n                [formatHourColumn]=\"formatHourColumn\"\n                [allDayLabel]=\"allDayLabel\"\n                [hourParts]=\"hourParts\"\n                [eventSource]=\"eventSource\"\n                [markDisabled]=\"markDisabled\"\n                [dayviewAllDayEventTemplate]=\"dayviewAllDayEventTemplate||defaultAllDayEventTemplate\"\n                [dayviewNormalEventTemplate]=\"dayviewNormalEventTemplate||defaultNormalEventTemplate\"\n                [locale]=\"locale\"\n                (onRangeChanged)=\"rangeChanged($event)\"\n                (onEventSelected)=\"eventSelected($event)\"\n                (onTimeSelected)=\"timeSelected($event)\"\n                (onTitleChanged)=\"titleChanged($event)\">\n            </dayview>\n        </div>\n    ","styles":["\n        :host > div { height: 100%; }\n\n        .event-detail-container {\n          border-top: 2px darkgrey solid;\n        }\n\n        .no-events-label {\n          font-weight: bold;\n          color: darkgrey;\n          text-align: center;\n        }\n\n        .event-detail {\n          cursor: pointer;\n          white-space: nowrap;\n          text-overflow: ellipsis;\n        }\n\n        .monthview-eventdetail-timecolumn {\n          width: 110px;\n          overflow: hidden;\n        }\n\n        .calendar-event-inner {\n          overflow: hidden;\n          background-color: #3a87ad;\n          color: white;\n          height: 100%;\n          width: 100%;\n          padding: 2px;\n          line-height: 15px;\n        }\n\n        @media (max-width: 750px) {\n          .calendar-event-inner {\n            font-size: 12px;\n          }\n        }\n    "],"providers":[{"__symbolic":"reference","module":"./calendar.service","name":"CalendarService"}]}]}],"members":{"currentDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"eventSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"calendarMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatDay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatDayHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatDayTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatWeekTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatMonthTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatWeekViewDayHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatHourColumn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showEventDetail":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"startingDayMonth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"startingDayWeek":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"allDayLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"noEventsLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"queryMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"step":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"autoSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"markDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"monthviewDisplayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"monthviewInactiveDisplayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"monthviewEventDetailTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekviewAllDayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekviewNormalEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dayviewAllDayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dayviewNormalEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onCurrentDateChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onRangeChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onEventSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onTimeSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onTitleChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"LOCALE_ID"}]}]],"parameters":[{"__symbolic":"reference","module":"./calendar.service","name":"CalendarService"},{"__symbolic":"reference","name":"string"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"rangeChanged":[{"__symbolic":"method"}],"eventSelected":[{"__symbolic":"method"}],"timeSelected":[{"__symbolic":"method"}],"titleChanged":[{"__symbolic":"method"}]}}}}]

calendar.module.js

 import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
 import { IonicModule } from 'ionic-angular';
@@ -9,18 +10,19 @@ import 'intl';
 import { CalendarComponent } from './calendar';
-export var NgCalendarModule = (function () {
+var NgCalendarModule = (function () {
     function NgCalendarModule() {
     }
-    NgCalendarModule.decorators = [
-        { type: NgModule, args: [{
-                    declarations: [
-                        MonthViewComponent, WeekViewComponent, DayViewComponent, CalendarComponent
-                    ],
-                    imports: [IonicModule],
-                    exports: [CalendarComponent],
-                    entryComponents: [CalendarComponent]
-                },] },
-    ];
-    NgCalendarModule.ctorParameters = [];
     return NgCalendarModule;
 }());
+export { NgCalendarModule };
+NgCalendarModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    MonthViewComponent, WeekViewComponent, DayViewComponent, CalendarComponent
+                ],
+                imports: [BrowserModule, IonicModule],
+                exports: [CalendarComponent],
+                entryComponents: [CalendarComponent]
+            },] },
+];
+NgCalendarModule.ctorParameters = function () { return []; };
 //# sourceMappingURL=calendar.module.js.map

calendar.module.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"NgCalendarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./monthview","name":"MonthViewComponent"},{"__symbolic":"reference","module":"./weekview","name":"WeekViewComponent"},{"__symbolic":"reference","module":"./dayview","name":"DayViewComponent"},{"__symbolic":"reference","module":"./calendar","name":"CalendarComponent"}],"imports":[{"__symbolic":"reference","module":"ionic-angular","name":"IonicModule"}],"exports":[{"__symbolic":"reference","module":"./calendar","name":"CalendarComponent"}],"entryComponents":[{"__symbolic":"reference","module":"./calendar","name":"CalendarComponent"}]}]}]}}}
+[{"__symbolic":"module","version":3,"metadata":{"NgCalendarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./monthview","name":"MonthViewComponent"},{"__symbolic":"reference","module":"./weekview","name":"WeekViewComponent"},{"__symbolic":"reference","module":"./dayview","name":"DayViewComponent"},{"__symbolic":"reference","module":"./calendar","name":"CalendarComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"BrowserModule"},{"__symbolic":"reference","module":"ionic-angular","name":"IonicModule"}],"exports":[{"__symbolic":"reference","module":"./calendar","name":"CalendarComponent"}],"entryComponents":[{"__symbolic":"reference","module":"./calendar","name":"CalendarComponent"}]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"NgCalendarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./monthview","name":"MonthViewComponent"},{"__symbolic":"reference","module":"./weekview","name":"WeekViewComponent"},{"__symbolic":"reference","module":"./dayview","name":"DayViewComponent"},{"__symbolic":"reference","module":"./calendar","name":"CalendarComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"BrowserModule"},{"__symbolic":"reference","module":"ionic-angular","name":"IonicModule"}],"exports":[{"__symbolic":"reference","module":"./calendar","name":"CalendarComponent"}],"entryComponents":[{"__symbolic":"reference","module":"./calendar","name":"CalendarComponent"}]}]}]}}}]

calendar.module.ngfactory.ts

 /**
- * @fileoverview This file is generated by the Angular 2 template compiler.
+ * @fileoverview This file is generated by the Angular template compiler.
  * Do not edit.
@@ -8,292 +8,215 @@ * @suppress {suspiciousCode,uselessCode,missingProperties}
 
-import * as import0 from '@angular/core/src/linker/ng_module_factory';
+
+import * as import0 from '@angular/core';
 import * as import1 from './calendar.module';
-import * as import2 from '@angular/common/src/common_module';
-import * as import3 from '@angular/core/src/application_module';
-import * as import4 from '@angular/platform-browser/src/browser';
-import * as import5 from '@angular/http/src/http_module';
-import * as import6 from '@angular/forms/src/directives';
-import * as import7 from '@angular/forms/src/form_providers';
-import * as import8 from 'ionic-angular/index';
-import * as import9 from '@angular/common/src/localization';
-import * as import10 from '@angular/core/src/application_init';
-import * as import11 from '@angular/core/src/testability/testability';
-import * as import12 from '@angular/core/src/application_ref';
-import * as import13 from '@angular/core/src/linker/compiler';
-import * as import14 from '@angular/platform-browser/src/dom/events/hammer_gestures';
-import * as import15 from '@angular/platform-browser/src/dom/events/event_manager';
-import * as import16 from '@angular/platform-browser/src/dom/shared_styles_host';
-import * as import17 from '@angular/platform-browser/src/dom/dom_renderer';
-import * as import18 from '@angular/platform-browser/src/security/dom_sanitization_service';
-import * as import19 from '@angular/core/src/linker/view_utils';
-import * as import20 from '@angular/platform-browser/src/browser/title';
-import * as import21 from '@angular/http/src/backends/browser_xhr';
-import * as import22 from '@angular/http/src/base_response_options';
-import * as import23 from '@angular/http/src/backends/xhr_backend';
-import * as import24 from '@angular/http/src/base_request_options';
-import * as import25 from '@angular/forms/src/directives/radio_control_value_accessor';
-import * as import26 from '@angular/forms/src/form_builder';
-import * as import27 from '@angular/core/src/di/injector';
-import * as import28 from 'ionic-angular/components/action-sheet/action-sheet-component.ngfactory';
-import * as import29 from 'ionic-angular/components/alert/alert-component.ngfactory';
-import * as import30 from 'ionic-angular/components/app/app-root.ngfactory';
-import * as import31 from 'ionic-angular/components/loading/loading-component.ngfactory';
-import * as import32 from 'ionic-angular/components/modal/modal-component.ngfactory';
-import * as import33 from 'ionic-angular/components/picker/picker-component.ngfactory';
-import * as import34 from 'ionic-angular/components/popover/popover-component.ngfactory';
-import * as import35 from 'ionic-angular/components/toast/toast-component.ngfactory';
-import * as import36 from './calendar.ngfactory';
-import * as import37 from '@angular/core/src/application_tokens';
-import * as import38 from '@angular/platform-browser/src/dom/events/dom_events';
-import * as import39 from '@angular/platform-browser/src/dom/events/key_events';
-import * as import40 from '@angular/core/src/zone/ng_zone';
-import * as import41 from '@angular/platform-browser/src/dom/debug/ng_probe';
-import * as import42 from '@angular/core/src/console';
-import * as import43 from '@angular/core/src/i18n/tokens';
-import * as import44 from '@angular/core/src/error_handler';
-import * as import45 from '@angular/platform-browser/src/dom/dom_tokens';
-import * as import46 from '@angular/platform-browser/src/dom/animation_driver';
-import * as import47 from '@angular/core/src/render/api';
-import * as import48 from '@angular/core/src/security';
-import * as import49 from '@angular/core/src/change_detection/differs/iterable_differs';
-import * as import50 from '@angular/core/src/change_detection/differs/keyvalue_differs';
-import * as import51 from '@angular/http/src/interfaces';
-import * as import52 from '@angular/http/src/http';
-class NgCalendarModuleInjector extends import0.NgModuleInjector<import1.NgCalendarModule> {
+import * as import2 from '@angular/common';
+import * as import3 from '@angular/platform-browser';
+import * as import4 from '@angular/forms';
+import * as import5 from 'ionic-angular/module';
+import * as import6 from 'ionic-angular/components/action-sheet/action-sheet-component.ngfactory';
+import * as import7 from 'ionic-angular/components/alert/alert-component.ngfactory';
+import * as import8 from 'ionic-angular/components/app/app-root.ngfactory';
+import * as import9 from 'ionic-angular/components/loading/loading-component.ngfactory';
+import * as import10 from 'ionic-angular/components/modal/modal-component.ngfactory';
+import * as import11 from 'ionic-angular/components/picker/picker-component.ngfactory';
+import * as import12 from 'ionic-angular/components/popover/popover-component.ngfactory';
+import * as import13 from 'ionic-angular/components/select/select-popover-component.ngfactory';
+import * as import14 from 'ionic-angular/components/toast/toast-component.ngfactory';
+import * as import15 from './calendar.ngfactory';
+class NgCalendarModuleInjector extends import0.ɵNgModuleInjector<import1.NgCalendarModule> {
   _CommonModule_0:import2.CommonModule;
-  _ApplicationModule_1:import3.ApplicationModule;
-  _BrowserModule_2:import4.BrowserModule;
-  _HttpModule_3:import5.HttpModule;
-  _InternalFormsSharedModule_4:import6.InternalFormsSharedModule;
-  _FormsModule_5:import7.FormsModule;
-  _ReactiveFormsModule_6:import7.ReactiveFormsModule;
-  _IonicModule_7:import8.IonicModule;
-  _NgCalendarModule_8:import1.NgCalendarModule;
-  __LOCALE_ID_9:any;
-  __NgLocalization_10:import9.NgLocaleLocalization;
-  _ErrorHandler_11:any;
-  _ApplicationInitStatus_12:import10.ApplicationInitStatus;
-  _Testability_13:import11.Testability;
-  _ApplicationRef__14:import12.ApplicationRef_;
-  __ApplicationRef_15:any;
-  __Compiler_16:import13.Compiler;
-  __APP_ID_17:any;
-  __DOCUMENT_18:any;
-  __HAMMER_GESTURE_CONFIG_19:import14.HammerGestureConfig;
-  __EVENT_MANAGER_PLUGINS_20:any[];
-  __EventManager_21:import15.EventManager;
-  __DomSharedStylesHost_22:import16.DomSharedStylesHost;
-  __AnimationDriver_23:any;
-  __DomRootRenderer_24:import17.DomRootRenderer_;
-  __RootRenderer_25:any;
-  __DomSanitizer_26:import18.DomSanitizerImpl;
-  __Sanitizer_27:any;
-  __ViewUtils_28:import19.ViewUtils;
-  __IterableDiffers_29:any;
-  __KeyValueDiffers_30:any;
-  __SharedStylesHost_31:any;
-  __Title_32:import20.Title;
-  __BrowserXhr_33:import21.BrowserXhr;
-  __ResponseOptions_34:import22.BaseResponseOptions;
-  __XSRFStrategy_35:any;
-  __XHRBackend_36:import23.XHRBackend;
-  __RequestOptions_37:import24.BaseRequestOptions;
-  __Http_38:any;
-  __RadioControlRegistry_39:import25.RadioControlRegistry;
-  __FormBuilder_40:import26.FormBuilder;
-  constructor(parent:import27.Injector) {
+  _ErrorHandler_1:any;
+  _APP_INITIALIZER_2:any[];
+  _ApplicationInitStatus_3:import0.ApplicationInitStatus;
+  _ɵf_4:import0.ɵf;
+  _ApplicationRef_5:any;
+  _ApplicationModule_6:import0.ApplicationModule;
+  _BrowserModule_7:import3.BrowserModule;
+  _ɵba_8:import4.ɵba;
+  _FormsModule_9:import4.FormsModule;
+  _ReactiveFormsModule_10:import4.ReactiveFormsModule;
+  _IonicModule_11:import5.IonicModule;
+  _NgCalendarModule_12:import1.NgCalendarModule;
+  __LOCALE_ID_13:any;
+  __NgLocalization_14:import2.NgLocaleLocalization;
+  __Compiler_15:import0.Compiler;
+  __APP_ID_16:any;
+  __IterableDiffers_17:any;
+  __KeyValueDiffers_18:any;
+  __DomSanitizer_19:import3.ɵe;
+  __Sanitizer_20:any;
+  __HAMMER_GESTURE_CONFIG_21:import3.HammerGestureConfig;
+  __EVENT_MANAGER_PLUGINS_22:any[];
+  __EventManager_23:import3.EventManager;
+  __ɵDomSharedStylesHost_24:import3.ɵDomSharedStylesHost;
+  __ɵDomRendererFactory2_25:import3.ɵDomRendererFactory2;
+  __RendererFactory2_26:any;
+  __ɵSharedStylesHost_27:any;
+  __Testability_28:import0.Testability;
+  __Meta_29:import3.Meta;
+  __Title_30:import3.Title;
+  __ɵi_31:import4.ɵi;
+  __FormBuilder_32:import4.FormBuilder;
+  constructor(parent:import0.Injector) {
     super(parent,[
-      import28.ActionSheetCmpNgFactory,
-      import29.AlertCmpNgFactory,
-      import30.IonicAppNgFactory,
-      import31.LoadingCmpNgFactory,
-      import32.ModalCmpNgFactory,
-      import33.PickerCmpNgFactory,
-      import34.PopoverCmpNgFactory,
-      import35.ToastCmpNgFactory,
-      import36.CalendarComponentNgFactory
+      import6.ActionSheetCmpNgFactory,
+      import7.AlertCmpNgFactory,
+      import8.IonicAppNgFactory,
+      import9.LoadingCmpNgFactory,
+      import10.ModalCmpNgFactory,
+      import11.PickerCmpNgFactory,
+      import12.PopoverCmpNgFactory,
+      import13.SelectPopoverNgFactory,
+      import14.ToastCmpNgFactory,
+      import15.CalendarComponentNgFactory
     ]
     ,([] as any[]));
   }
-  get _LOCALE_ID_9():any {
-    if ((this.__LOCALE_ID_9 == null)) { (this.__LOCALE_ID_9 = 'en-US'); }
-    return this.__LOCALE_ID_9;
+  get _LOCALE_ID_13():any {
+    if ((this.__LOCALE_ID_13 == null)) { (this.__LOCALE_ID_13 = import0.ɵn(this.parent.get(import0.LOCALE_ID,(null as any)))); }
+    return this.__LOCALE_ID_13;
   }
-  get _NgLocalization_10():import9.NgLocaleLocalization {
-    if ((this.__NgLocalization_10 == null)) { (this.__NgLocalization_10 = new import9.NgLocaleLocalization(this._LOCALE_ID_9)); }
-    return this.__NgLocalization_10;
+  get _NgLocalization_14():import2.NgLocaleLocalization {
+    if ((this.__NgLocalization_14 == null)) { (this.__NgLocalization_14 = new import2.NgLocaleLocalization(this._LOCALE_ID_13)); }
+    return this.__NgLocalization_14;
   }
-  get _ApplicationRef_15():any {
-    if ((this.__ApplicationRef_15 == null)) { (this.__ApplicationRef_15 = this._ApplicationRef__14); }
-    return this.__ApplicationRef_15;
+  get _Compiler_15():import0.Compiler {
+    if ((this.__Compiler_15 == null)) { (this.__Compiler_15 = new import0.Compiler()); }
+    return this.__Compiler_15;
   }
-  get _Compiler_16():import13.Compiler {
-    if ((this.__Compiler_16 == null)) { (this.__Compiler_16 = new import13.Compiler()); }
-    return this.__Compiler_16;
+  get _APP_ID_16():any {
+    if ((this.__APP_ID_16 == null)) { (this.__APP_ID_16 = import0.ɵg()); }
+    return this.__APP_ID_16;
   }
-  get _APP_ID_17():any {
-    if ((this.__APP_ID_17 == null)) { (this.__APP_ID_17 = import37._appIdRandomProviderFactory()); }
-    return this.__APP_ID_17;
+  get _IterableDiffers_17():any {
+    if ((this.__IterableDiffers_17 == null)) { (this.__IterableDiffers_17 = import0.ɵl()); }
+    return this.__IterableDiffers_17;
   }
-  get _DOCUMENT_18():any {
-    if ((this.__DOCUMENT_18 == null)) { (this.__DOCUMENT_18 = import4._document()); }
-    return this.__DOCUMENT_18;
+  get _KeyValueDiffers_18():any {
+    if ((this.__KeyValueDiffers_18 == null)) { (this.__KeyValueDiffers_18 = import0.ɵm()); }
+    return this.__KeyValueDiffers_18;
   }
-  get _HAMMER_GESTURE_CONFIG_19():import14.HammerGestureConfig {
-    if ((this.__HAMMER_GESTURE_CONFIG_19 == null)) { (this.__HAMMER_GESTURE_CONFIG_19 = new import14.HammerGestureConfig()); }
-    return this.__HAMMER_GESTURE_CONFIG_19;
+  get _DomSanitizer_19():import3.ɵe {
+    if ((this.__DomSanitizer_19 == null)) { (this.__DomSanitizer_19 = new import3.ɵe(this.parent.get(import3.DOCUMENT))); }
+    return this.__DomSanitizer_19;
   }
-  get _EVENT_MANAGER_PLUGINS_20():any[] {
-    if ((this.__EVENT_MANAGER_PLUGINS_20 == null)) { (this.__EVENT_MANAGER_PLUGINS_20 = [
-      new import38.DomEventsPlugin(),
-      new import39.KeyEventsPlugin(),
-      new import14.HammerGesturesPlugin(this._HAMMER_GESTURE_CONFIG_19)
+  get _Sanitizer_20():any {
+    if ((this.__Sanitizer_20 == null)) { (this.__Sanitizer_20 = this._DomSanitizer_19); }
+    return this.__Sanitizer_20;
+  }
+  get _HAMMER_GESTURE_CONFIG_21():import3.HammerGestureConfig {
+    if ((this.__HAMMER_GESTURE_CONFIG_21 == null)) { (this.__HAMMER_GESTURE_CONFIG_21 = new import3.HammerGestureConfig()); }
+    return this.__HAMMER_GESTURE_CONFIG_21;
+  }
+  get _EVENT_MANAGER_PLUGINS_22():any[] {
+    if ((this.__EVENT_MANAGER_PLUGINS_22 == null)) { (this.__EVENT_MANAGER_PLUGINS_22 = [
+      new import3.ɵDomEventsPlugin(this.parent.get(import3.DOCUMENT)),
+      new import3.ɵKeyEventsPlugin(this.parent.get(import3.DOCUMENT)),
+      new import3.ɵHammerGesturesPlugin(this.parent.get(import3.DOCUMENT),this._HAMMER_GESTURE_CONFIG_21)
     ]
     ); }
-    return this.__EVENT_MANAGER_PLUGINS_20;
+    return this.__EVENT_MANAGER_PLUGINS_22;
   }
-  get _EventManager_21():import15.EventManager {
-    if ((this.__EventManager_21 == null)) { (this.__EventManager_21 = new import15.EventManager(this._EVENT_MANAGER_PLUGINS_20,this.parent.get(import40.NgZone))); }
-    return this.__EventManager_21;
+  get _EventManager_23():import3.EventManager {
+    if ((this.__EventManager_23 == null)) { (this.__EventManager_23 = new import3.EventManager(this._EVENT_MANAGER_PLUGINS_22,this.parent.get(import0.NgZone))); }
+    return this.__EventManager_23;
   }
-  get _DomSharedStylesHost_22():import16.DomSharedStylesHost {
-    if ((this.__DomSharedStylesHost_22 == null)) { (this.__DomSharedStylesHost_22 = new import16.DomSharedStylesHost(this._DOCUMENT_18)); }
-    return this.__DomSharedStylesHost_22;
+  get _ɵDomSharedStylesHost_24():import3.ɵDomSharedStylesHost {
+    if ((this.__ɵDomSharedStylesHost_24 == null)) { (this.__ɵDomSharedStylesHost_24 = new import3.ɵDomSharedStylesHost(this.parent.get(import3.DOCUMENT))); }
+    return this.__ɵDomSharedStylesHost_24;
   }
-  get _AnimationDriver_23():any {
-    if ((this.__AnimationDriver_23 == null)) { (this.__AnimationDriver_23 = import4._resolveDefaultAnimationDriver()); }
-    return this.__AnimationDriver_23;
+  get _ɵDomRendererFactory2_25():import3.ɵDomRendererFactory2 {
+    if ((this.__ɵDomRendererFactory2_25 == null)) { (this.__ɵDomRendererFactory2_25 = new import3.ɵDomRendererFactory2(this._EventManager_23,this._ɵDomSharedStylesHost_24)); }
+    return this.__ɵDomRendererFactory2_25;
   }
-  get _DomRootRenderer_24():import17.DomRootRenderer_ {
-    if ((this.__DomRootRenderer_24 == null)) { (this.__DomRootRenderer_24 = new import17.DomRootRenderer_(this._DOCUMENT_18,this._EventManager_21,this._DomSharedStylesHost_22,this._AnimationDriver_23,this._APP_ID_17)); }
-    return this.__DomRootRenderer_24;
+  get _RendererFactory2_26():any {
+    if ((this.__RendererFactory2_26 == null)) { (this.__RendererFactory2_26 = this._ɵDomRendererFactory2_25); }
+    return this.__RendererFactory2_26;
   }
-  get _RootRenderer_25():any {
-    if ((this.__RootRenderer_25 == null)) { (this.__RootRenderer_25 = import41._createConditionalRootRenderer(this._DomRootRenderer_24,this.parent.get(import41.NgProbeToken,(null as any)))); }
-    return this.__RootRenderer_25;
+  get _ɵSharedStylesHost_27():any {
+    if ((this.__ɵSharedStylesHost_27 == null)) { (this.__ɵSharedStylesHost_27 = this._ɵDomSharedStylesHost_24); }
+    return this.__ɵSharedStylesHost_27;
   }
-  get _DomSanitizer_26():import18.DomSanitizerImpl {
-    if ((this.__DomSanitizer_26 == null)) { (this.__DomSanitizer_26 = new import18.DomSanitizerImpl()); }
-    return this.__DomSanitizer_26;
+  get _Testability_28():import0.Testability {
+    if ((this.__Testability_28 == null)) { (this.__Testability_28 = new import0.Testability(this.parent.get(import0.NgZone))); }
+    return this.__Testability_28;
   }
-  get _Sanitizer_27():any {
-    if ((this.__Sanitizer_27 == null)) { (this.__Sanitizer_27 = this._DomSanitizer_26); }
-    return this.__Sanitizer_27;
+  get _Meta_29():import3.Meta {
+    if ((this.__Meta_29 == null)) { (this.__Meta_29 = new import3.Meta(this.parent.get(import3.DOCUMENT))); }
+    return this.__Meta_29;
   }
-  get _ViewUtils_28():import19.ViewUtils {
-    if ((this.__ViewUtils_28 == null)) { (this.__ViewUtils_28 = new import19.ViewUtils(this._RootRenderer_25,this._Sanitizer_27)); }
-    return this.__ViewUtils_28;
+  get _Title_30():import3.Title {
+    if ((this.__Title_30 == null)) { (this.__Title_30 = new import3.Title(this.parent.get(import3.DOCUMENT))); }
+    return this.__Title_30;
   }
-  get _IterableDiffers_29():any {
-    if ((this.__IterableDiffers_29 == null)) { (this.__IterableDiffers_29 = import3._iterableDiffersFactory()); }
-    return this.__IterableDiffers_29;
+  get _ɵi_31():import4.ɵi {
+    if ((this.__ɵi_31 == null)) { (this.__ɵi_31 = new import4.ɵi()); }
+    return this.__ɵi_31;
   }
-  get _KeyValueDiffers_30():any {
-    if ((this.__KeyValueDiffers_30 == null)) { (this.__KeyValueDiffers_30 = import3._keyValueDiffersFactory()); }
-    return this.__KeyValueDiffers_30;
+  get _FormBuilder_32():import4.FormBuilder {
+    if ((this.__FormBuilder_32 == null)) { (this.__FormBuilder_32 = new import4.FormBuilder()); }
+    return this.__FormBuilder_32;
   }
-  get _SharedStylesHost_31():any {
-    if ((this.__SharedStylesHost_31 == null)) { (this.__SharedStylesHost_31 = this._DomSharedStylesHost_22); }
-    return this.__SharedStylesHost_31;
-  }
-  get _Title_32():import20.Title {
-    if ((this.__Title_32 == null)) { (this.__Title_32 = new import20.Title()); }
-    return this.__Title_32;
-  }
-  get _BrowserXhr_33():import21.BrowserXhr {
-    if ((this.__BrowserXhr_33 == null)) { (this.__BrowserXhr_33 = new import21.BrowserXhr()); }
-    return this.__BrowserXhr_33;
-  }
-  get _ResponseOptions_34():import22.BaseResponseOptions {
-    if ((this.__ResponseOptions_34 == null)) { (this.__ResponseOptions_34 = new import22.BaseResponseOptions()); }
-    return this.__ResponseOptions_34;
-  }
-  get _XSRFStrategy_35():any {
-    if ((this.__XSRFStrategy_35 == null)) { (this.__XSRFStrategy_35 = import5._createDefaultCookieXSRFStrategy()); }
-    return this.__XSRFStrategy_35;
-  }
-  get _XHRBackend_36():import23.XHRBackend {
-    if ((this.__XHRBackend_36 == null)) { (this.__XHRBackend_36 = new import23.XHRBackend(this._BrowserXhr_33,this._ResponseOptions_34,this._XSRFStrategy_35)); }
-    return this.__XHRBackend_36;
-  }
-  get _RequestOptions_37():import24.BaseRequestOptions {
-    if ((this.__RequestOptions_37 == null)) { (this.__RequestOptions_37 = new import24.BaseRequestOptions()); }
-    return this.__RequestOptions_37;
-  }
-  get _Http_38():any {
-    if ((this.__Http_38 == null)) { (this.__Http_38 = import5.httpFactory(this._XHRBackend_36,this._RequestOptions_37)); }
-    return this.__Http_38;
-  }
-  get _RadioControlRegistry_39():import25.RadioControlRegistry {
-    if ((this.__RadioControlRegistry_39 == null)) { (this.__RadioControlRegistry_39 = new import25.RadioControlRegistry()); }
-    return this.__RadioControlRegistry_39;
-  }
-  get _FormBuilder_40():import26.FormBuilder {
-    if ((this.__FormBuilder_40 == null)) { (this.__FormBuilder_40 = new import26.FormBuilder()); }
-    return this.__FormBuilder_40;
-  }
   createInternal():import1.NgCalendarModule {
     this._CommonModule_0 = new import2.CommonModule();
-    this._ApplicationModule_1 = new import3.ApplicationModule();
-    this._BrowserModule_2 = new import4.BrowserModule(this.parent.get(import4.BrowserModule,(null as any)));
-    this._HttpModule_3 = new import5.HttpModule();
-    this._InternalFormsSharedModule_4 = new import6.InternalFormsSharedModule();
-    this._FormsModule_5 = new import7.FormsModule();
-    this._ReactiveFormsModule_6 = new import7.ReactiveFormsModule();
-    this._IonicModule_7 = new import8.IonicModule();
-    this._NgCalendarModule_8 = new import1.NgCalendarModule();
-    this._ErrorHandler_11 = import4.errorHandler();
-    this._ApplicationInitStatus_12 = new import10.ApplicationInitStatus(this.parent.get(import10.APP_INITIALIZER,(null as any)));
-    this._Testability_13 = new import11.Testability(this.parent.get(import40.NgZone));
-    this._ApplicationRef__14 = new import12.ApplicationRef_(this.parent.get(import40.NgZone),this.parent.get(import42.Console),this,this._ErrorHandler_11,this,this._ApplicationInitStatus_12,this.parent.get(import11.TestabilityRegistry,(null as any)),this._Testability_13);
-    return this._NgCalendarModule_8;
+    this._ErrorHandler_1 = import3.ɵa();
+    this._APP_INITIALIZER_2 = [
+      import0.ɵo,
+      import3.ɵc(this.parent.get(import3.NgProbeToken,(null as any)),this.parent.get(import0.NgProbeToken,(null as any)))
+    ]
+    ;
+    this._ApplicationInitStatus_3 = new import0.ApplicationInitStatus(this._APP_INITIALIZER_2);
+    this._ɵf_4 = new import0.ɵf(this.parent.get(import0.NgZone),this.parent.get(import0.ɵConsole),this,this._ErrorHandler_1,this.componentFactoryResolver,this._ApplicationInitStatus_3);
+    this._ApplicationRef_5 = this._ɵf_4;
+    this._ApplicationModule_6 = new import0.ApplicationModule(this._ApplicationRef_5);
+    this._BrowserModule_7 = new import3.BrowserModule(this.parent.get(import3.BrowserModule,(null as any)));
+    this._ɵba_8 = new import4.ɵba();
+    this._FormsModule_9 = new import4.FormsModule();
+    this._ReactiveFormsModule_10 = new import4.ReactiveFormsModule();
+    this._IonicModule_11 = new import5.IonicModule();
+    this._NgCalendarModule_12 = new import1.NgCalendarModule();
+    return this._NgCalendarModule_12;
   }
   getInternal(token:any,notFoundResult:any):any {
     if ((token === import2.CommonModule)) { return this._CommonModule_0; }
-    if ((token === import3.ApplicationModule)) { return this._ApplicationModule_1; }
-    if ((token === import4.BrowserModule)) { return this._BrowserModule_2; }
-    if ((token === import5.HttpModule)) { return this._HttpModule_3; }
-    if ((token === import6.InternalFormsSharedModule)) { return this._InternalFormsSharedModule_4; }
-    if ((token === import7.FormsModule)) { return this._FormsModule_5; }
-    if ((token === import7.ReactiveFormsModule)) { return this._ReactiveFormsModule_6; }
-    if ((token === import8.IonicModule)) { return this._IonicModule_7; }
-    if ((token === import1.NgCalendarModule)) { return this._NgCalendarModule_8; }
-    if ((token === import43.LOCALE_ID)) { return this._LOCALE_ID_9; }
-    if ((token === import9.NgLocalization)) { return this._NgLocalization_10; }
-    if ((token === import44.ErrorHandler)) { return this._ErrorHandler_11; }
-    if ((token === import10.ApplicationInitStatus)) { return this._ApplicationInitStatus_12; }
-    if ((token === import11.Testability)) { return this._Testability_13; }
-    if ((token === import12.ApplicationRef_)) { return this._ApplicationRef__14; }
-    if ((token === import12.ApplicationRef)) { return this._ApplicationRef_15; }
-    if ((token === import13.Compiler)) { return this._Compiler_16; }
-    if ((token === import37.APP_ID)) { return this._APP_ID_17; }
-    if ((token === import45.DOCUMENT)) { return this._DOCUMENT_18; }
-    if ((token === import14.HAMMER_GESTURE_CONFIG)) { return this._HAMMER_GESTURE_CONFIG_19; }
-    if ((token === import15.EVENT_MANAGER_PLUGINS)) { return this._EVENT_MANAGER_PLUGINS_20; }
-    if ((token === import15.EventManager)) { return this._EventManager_21; }
-    if ((token === import16.DomSharedStylesHost)) { return this._DomSharedStylesHost_22; }
-    if ((token === import46.AnimationDriver)) { return this._AnimationDriver_23; }
-    if ((token === import17.DomRootRenderer)) { return this._DomRootRenderer_24; }
-    if ((token === import47.RootRenderer)) { return this._RootRenderer_25; }
-    if ((token === import18.DomSanitizer)) { return this._DomSanitizer_26; }
-    if ((token === import48.Sanitizer)) { return this._Sanitizer_27; }
-    if ((token === import19.ViewUtils)) { return this._ViewUtils_28; }
-    if ((token === import49.IterableDiffers)) { return this._IterableDiffers_29; }
-    if ((token === import50.KeyValueDiffers)) { return this._KeyValueDiffers_30; }
-    if ((token === import16.SharedStylesHost)) { return this._SharedStylesHost_31; }
-    if ((token === import20.Title)) { return this._Title_32; }
-    if ((token === import21.BrowserXhr)) { return this._BrowserXhr_33; }
-    if ((token === import22.ResponseOptions)) { return this._ResponseOptions_34; }
-    if ((token === import51.XSRFStrategy)) { return this._XSRFStrategy_35; }
-    if ((token === import23.XHRBackend)) { return this._XHRBackend_36; }
-    if ((token === import24.RequestOptions)) { return this._RequestOptions_37; }
-    if ((token === import52.Http)) { return this._Http_38; }
-    if ((token === import25.RadioControlRegistry)) { return this._RadioControlRegistry_39; }
-    if ((token === import26.FormBuilder)) { return this._FormBuilder_40; }
+    if ((token === import0.ErrorHandler)) { return this._ErrorHandler_1; }
+    if ((token === import0.APP_INITIALIZER)) { return this._APP_INITIALIZER_2; }
+    if ((token === import0.ApplicationInitStatus)) { return this._ApplicationInitStatus_3; }
+    if ((token === import0.ɵf)) { return this._ɵf_4; }
+    if ((token === import0.ApplicationRef)) { return this._ApplicationRef_5; }
+    if ((token === import0.ApplicationModule)) { return this._ApplicationModule_6; }
+    if ((token === import3.BrowserModule)) { return this._BrowserModule_7; }
+    if ((token === import4.ɵba)) { return this._ɵba_8; }
+    if ((token === import4.FormsModule)) { return this._FormsModule_9; }
+    if ((token === import4.ReactiveFormsModule)) { return this._ReactiveFormsModule_10; }
+    if ((token === import5.IonicModule)) { return this._IonicModule_11; }
+    if ((token === import1.NgCalendarModule)) { return this._NgCalendarModule_12; }
+    if ((token === import0.LOCALE_ID)) { return this._LOCALE_ID_13; }
+    if ((token === import2.NgLocalization)) { return this._NgLocalization_14; }
+    if ((token === import0.Compiler)) { return this._Compiler_15; }
+    if ((token === import0.APP_ID)) { return this._APP_ID_16; }
+    if ((token === import0.IterableDiffers)) { return this._IterableDiffers_17; }
+    if ((token === import0.KeyValueDiffers)) { return this._KeyValueDiffers_18; }
+    if ((token === import3.DomSanitizer)) { return this._DomSanitizer_19; }
+    if ((token === import0.Sanitizer)) { return this._Sanitizer_20; }
+    if ((token === import3.HAMMER_GESTURE_CONFIG)) { return this._HAMMER_GESTURE_CONFIG_21; }
+    if ((token === import3.EVENT_MANAGER_PLUGINS)) { return this._EVENT_MANAGER_PLUGINS_22; }
+    if ((token === import3.EventManager)) { return this._EventManager_23; }
+    if ((token === import3.ɵDomSharedStylesHost)) { return this._ɵDomSharedStylesHost_24; }
+    if ((token === import3.ɵDomRendererFactory2)) { return this._ɵDomRendererFactory2_25; }
+    if ((token === import0.RendererFactory2)) { return this._RendererFactory2_26; }
+    if ((token === import3.ɵSharedStylesHost)) { return this._ɵSharedStylesHost_27; }
+    if ((token === import0.Testability)) { return this._Testability_28; }
+    if ((token === import3.Meta)) { return this._Meta_29; }
+    if ((token === import3.Title)) { return this._Title_30; }
+    if ((token === import4.ɵi)) { return this._ɵi_31; }
+    if ((token === import4.FormBuilder)) { return this._FormBuilder_32; }
     return notFoundResult;
   }
   destroyInternal():void {
-    this._ApplicationRef__14.ngOnDestroy();
+    this._ɵf_4.ngOnDestroy();
+    (this.__ɵDomSharedStylesHost_24 && this._ɵDomSharedStylesHost_24.ngOnDestroy());
   }
 }
-export const NgCalendarModuleNgFactory:import0.NgModuleFactory<import1.NgCalendarModule> = new import0.NgModuleFactory(NgCalendarModuleInjector,import1.NgCalendarModule);
+export const NgCalendarModuleNgFactory:import0.NgModuleFactory<import1.NgCalendarModule> = new import0.NgModuleFactory<any>(NgCalendarModuleInjector,import1.NgCalendarModule);
+//# sourceMappingURL=data:application/json;base64,eyJmaWxlIjoiL1VzZXJzL3R3aW5zc2JjL1dlYnN0b3JtUHJvamVjdHMvSW9uaWMyLUNhbGVuZGFyXzMvSW9uaWMyLUNhbGVuZGFyL3NyYy9jYWxlbmRhci5tb2R1bGUubmdmYWN0b3J5LnRzIiwidmVyc2lvbiI6Mywic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsibmc6Ly8vVXNlcnMvdHdpbnNzYmMvV2Vic3Rvcm1Qcm9qZWN0cy9Jb25pYzItQ2FsZW5kYXJfMy9Jb25pYzItQ2FsZW5kYXIvc3JjL2NhbGVuZGFyLm1vZHVsZS50cyJdLCJzb3VyY2VzQ29udGVudCI6WyIgIl0sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OyJ9

calendar.service.js

 import { Injectable } from '@angular/core';
 import { Subject } from "rxjs/Subject";
-export var CalendarService = (function () {
+var CalendarService = (function () {
     function CalendarService() {
@@ -111,8 +111,9 @@ this.currentDateChangedFromParent = new Subject();
     };
-    CalendarService.decorators = [
-        { type: Injectable },
-    ];
-    CalendarService.ctorParameters = [];
     return CalendarService;
 }());
+export { CalendarService };
+CalendarService.decorators = [
+    { type: Injectable },
+];
+CalendarService.ctorParameters = function () { return []; };
 //# sourceMappingURL=calendar.service.js.map

calendar.service.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"CalendarService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"setCurrentDate":[{"__symbolic":"method"}],"rangeChanged":[{"__symbolic":"method"}],"getStep":[{"__symbolic":"method"}],"getAdjacentCalendarDate":[{"__symbolic":"method"}],"getAdjacentViewStartTime":[{"__symbolic":"method"}],"populateAdjacentViews":[{"__symbolic":"method"}]}}}}
+[{"__symbolic":"module","version":3,"metadata":{"CalendarService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"setCurrentDate":[{"__symbolic":"method"}],"rangeChanged":[{"__symbolic":"method"}],"getStep":[{"__symbolic":"method"}],"getAdjacentCalendarDate":[{"__symbolic":"method"}],"getAdjacentViewStartTime":[{"__symbolic":"method"}],"populateAdjacentViews":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CalendarService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"setCurrentDate":[{"__symbolic":"method"}],"rangeChanged":[{"__symbolic":"method"}],"getStep":[{"__symbolic":"method"}],"getAdjacentCalendarDate":[{"__symbolic":"method"}],"getAdjacentViewStartTime":[{"__symbolic":"method"}],"populateAdjacentViews":[{"__symbolic":"method"}]}}}}]

dayview.js

 import { DatePipe } from '@angular/common';
 import { Component, HostBinding, Input, Output, EventEmitter, ViewChild, ViewEncapsulation } from '@angular/core';
 import { CalendarService } from './calendar.service';
-export var DayViewComponent = (function () {
+var DayViewComponent = (function () {
     function DayViewComponent(calendarService) {
@@ -315,32 +315,33 @@ this.calendarService = calendarService;
     };
-    DayViewComponent.decorators = [
-        { type: Component, args: [{
-                    selector: 'dayview',
-                    template: "\n        <ion-slides #daySlider [loop]=\"true\" (ionSlideDidChange)=\"onSlideChanged()\">\n            <ion-slide>\n                <div class=\"dayview-allday-table\">\n                    <div class=\"dayview-allday-label\">{{allDayLabel}}</div>\n                    <ion-scroll scrollY=\"true\" zoom=\"false\" class=\"dayview-allday-content-wrapper\">\n                        <table class=\"table table-bordered dayview-allday-content-table\">\n                            <tbody>\n                            <tr>\n                                <td class=\"calendar-cell\" [ngClass]=\"{'calendar-event-wrap':views[0].allDayEvents.length>0}\"\n                                    [ngStyle]=\"{height: 25*views[0].allDayEvents.length+'px'}\"\n                                    *ngIf=\"0===currentViewIndex\">\n                                    <div *ngFor=\"let displayEvent of views[0].allDayEvents; let eventIndex=index\"\n                                         class=\"calendar-event\" tappable\n                                         (click)=\"eventSelected(displayEvent.event)\"\n                                         [ngStyle]=\"{top: 25*eventIndex+'px',width: '100%',height:'25px'}\">\n                                        <template [ngTemplateOutlet]=\"dayviewAllDayEventTemplate\"\n                                            [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                        </template>\n                                    </div>\n                                </td>\n                                <td class=\"calendar-cell\" *ngIf=\"0!==currentViewIndex\">\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n                <ion-scroll scrollY=\"true\" class=\"dayview-normal-event-container\">\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                           *ngIf=\"0===currentViewIndex\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[0].rows\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{tm.time | date: formatHourColumn}}\n                            </td>\n                            <td class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n                                <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                    <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n                                         (click)=\"eventSelected(displayEvent.event)\"\n                                         [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px', left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n                                         <template [ngTemplateOutlet]=\"dayviewNormalEventTemplate\"\n                                             [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                         </template>\n                                    </div>\n                                </div>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                           *ngIf=\"0!==currentViewIndex\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[0].rows\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{tm.time | date: formatHourColumn}}\n                            </td>\n                            <td class=\"calendar-cell\">\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                </ion-scroll>\n            </ion-slide>\n            <ion-slide>\n                <div class=\"dayview-allday-table\">\n                    <div class=\"dayview-allday-label\">{{allDayLabel}}</div>\n                    <ion-scroll scrollY=\"true\" zoom=\"false\" class=\"dayview-allday-content-wrapper\">\n                        <table class=\"table table-bordered dayview-allday-content-table\">\n                            <tbody>\n                            <tr>\n                                <td class=\"calendar-cell\" [ngClass]=\"{'calendar-event-wrap':views[1].allDayEvents.length>0}\"\n                                    [ngStyle]=\"{height: 25*views[1].allDayEvents.length+'px'}\"\n                                    *ngIf=\"1===currentViewIndex\">\n                                    <div *ngFor=\"let displayEvent of views[1].allDayEvents; let eventIndex=index\"\n                                         class=\"calendar-event\" tappable\n                                         (click)=\"eventSelected(displayEvent.event)\"\n                                         [ngStyle]=\"{top: 25*eventIndex+'px',width: '100%',height:'25px'}\">\n                                        <template [ngTemplateOutlet]=\"dayviewAllDayEventTemplate\"\n                                            [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                        </template>\n                                    </div>\n                                </td>\n                                <td class=\"calendar-cell\" *ngIf=\"1!==currentViewIndex\">\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n                <ion-scroll scrollY=\"true\" class=\"dayview-normal-event-container\">\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                           *ngIf=\"1===currentViewIndex\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[1].rows\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{tm.time | date: formatHourColumn}}\n                            </td>\n                            <td class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n                                <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                    <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n                                         (click)=\"eventSelected(displayEvent.event)\"\n                                         [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px', left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n                                         <template [ngTemplateOutlet]=\"dayviewNormalEventTemplate\"\n                                             [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                         </template>\n                                    </div>\n                                </div>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                           *ngIf=\"1!==currentViewIndex\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[1].rows\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{tm.time | date: formatHourColumn}}\n                            </td>\n                            <td class=\"calendar-cell\">\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                </ion-scroll>\n            </ion-slide>\n            <ion-slide>\n                <div class=\"dayview-allday-table\">\n                    <div class=\"dayview-allday-label\">{{allDayLabel}}</div>\n                    <ion-scroll scrollY=\"true\" zoom=\"false\" class=\"dayview-allday-content-wrapper\">\n                        <table class=\"table table-bordered dayview-allday-content-table\">\n                            <tbody>\n                            <tr>\n                                <td class=\"calendar-cell\" [ngClass]=\"{'calendar-event-wrap':views[2].allDayEvents.length>0}\"\n                                    [ngStyle]=\"{height: 25*views[2].allDayEvents.length+'px'}\"\n                                    *ngIf=\"2===currentViewIndex\">\n                                    <div *ngFor=\"let displayEvent of views[2].allDayEvents; let eventIndex=index\"\n                                         class=\"calendar-event\" tappable\n                                         (click)=\"eventSelected(displayEvent.event)\"\n                                         [ngStyle]=\"{top: 25*eventIndex+'px',width: '100%',height:'25px'}\">\n                                        <template [ngTemplateOutlet]=\"dayviewAllDayEventTemplate\"\n                                            [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                        </template>\n                                    </div>\n                                </td>\n                                <td class=\"calendar-cell\" *ngIf=\"2!==currentViewIndex\">\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n                <ion-scroll scrollY=\"true\" class=\"dayview-normal-event-container\">\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                           *ngIf=\"2===currentViewIndex\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[2].rows\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{tm.time | date: formatHourColumn}}\n                            </td>\n                            <td class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n                                <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                    <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n                                         (click)=\"eventSelected(displayEvent.event)\"\n                                         [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px', left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n                                         <template [ngTemplateOutlet]=\"dayviewNormalEventTemplate\"\n                                             [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                         </template>\n                                    </div>\n                                </div>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                           *ngIf=\"2!==currentViewIndex\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[2].rows\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{tm.time | date: formatHourColumn}}\n                            </td>\n                            <td class=\"calendar-cell\">\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                </ion-scroll>\n            </ion-slide>\n        </ion-slides>\n    ",
-                    styles: ["\n        .table-fixed {\n          table-layout: fixed;\n        }\n\n        .table {\n          width: 100%;\n          max-width: 100%;\n          background-color: transparent;\n        }\n\n        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,\n        .table > tbody > tr > td, .table > tfoot > tr > td {\n          padding: 8px;\n          line-height: 20px;\n          vertical-align: top;\n        }\n\n        .table > thead > tr > th {\n          vertical-align: bottom;\n          border-bottom: 2px solid #ddd;\n        }\n\n        .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {\n          border-top: 0\n        }\n\n        .table > tbody + tbody {\n          border-top: 2px solid #ddd;\n        }\n\n        .table-bordered {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,\n        .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {\n          border-bottom-width: 2px;\n        }\n\n        .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {\n          background-color: #f9f9f9\n        }\n\n        .calendar-hour-column {\n          width: 50px;\n          white-space: nowrap;\n        }\n\n        .calendar-event-wrap {\n          position: relative;\n          width: 100%;\n          height: 100%;\n        }\n\n        .calendar-event {\n          position: absolute;\n          padding: 2px;\n          cursor: pointer;\n          z-index: 10000;\n        }\n\n        .calendar-cell {\n          padding: 0 !important;\n          height: 37px;\n        }\n\n        .dayview-allday-label {\n          float: left;\n          height: 100%;\n          line-height: 50px;\n          text-align: center;\n          width: 50px;\n        }\n\n        .dayview-allday-content-wrapper {\n          margin-left: 50px;\n          overflow: hidden;\n          height: 51px;\n        }\n\n        .dayview-allday-content-table {\n          min-height: 50px;\n        }\n\n        .dayview-allday-content-table td {\n          border-left: 1px solid #ddd;\n          border-right: 1px solid #ddd;\n        }\n\n        .dayview-allday-table {\n          height: 50px;\n          position: relative;\n          border-bottom: 1px solid #ddd;\n          font-size: 14px;\n        }\n\n        .dayview-normal-event-container {\n          margin-top: 50px;\n          overflow: hidden;\n          left: 0;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          position: absolute;\n          font-size: 14px;\n        }\n\n        .dayview .slide-zoom {\n          height: 100%;\n        }\n\n        .dayview-allday-content-wrapper scroll-content {\n          width: 100%;\n        }\n\n        ::-webkit-scrollbar,\n        *::-webkit-scrollbar {\n          display: none;\n        }\n\n        .table > tbody > tr > td.calendar-hour-column {\n          padding-left: 0;\n          padding-right: 0;\n          vertical-align: middle;\n        }\n\n        @media (max-width: 750px) {\n          .dayview-allday-label, .calendar-hour-column {\n            width: 31px;\n            font-size: 12px;\n          }\n\n          .dayview-allday-label {\n            padding-top: 4px;\n          }\n\n          .table > tbody > tr > td.calendar-hour-column {\n            padding-left: 0;\n            padding-right: 0;\n            vertical-align: middle;\n            line-height: 12px;\n          }\n\n          .dayview-allday-label {\n            line-height: 20px;\n          }\n\n          .dayview-allday-content-wrapper {\n            margin-left: 31px;\n          }\n        }\n    "],
-                    encapsulation: ViewEncapsulation.None
-                },] },
-    ];
-    DayViewComponent.ctorParameters = [
-        { type: CalendarService, },
-    ];
-    DayViewComponent.propDecorators = {
-        'slider': [{ type: ViewChild, args: ['daySlider',] },],
-        'class': [{ type: HostBinding, args: ['class.dayview',] },],
-        'dayviewAllDayEventTemplate': [{ type: Input },],
-        'dayviewNormalEventTemplate': [{ type: Input },],
-        'formatHourColumn': [{ type: Input },],
-        'formatDayTitle': [{ type: Input },],
-        'allDayLabel': [{ type: Input },],
-        'hourParts': [{ type: Input },],
-        'eventSource': [{ type: Input },],
-        'markDisabled': [{ type: Input },],
-        'locale': [{ type: Input },],
-        'onRangeChanged': [{ type: Output },],
-        'onEventSelected': [{ type: Output },],
-        'onTimeSelected': [{ type: Output },],
-        'onTitleChanged': [{ type: Output },],
-    };
     return DayViewComponent;
 }());
+export { DayViewComponent };
+DayViewComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'dayview',
+                template: "\n        <ion-slides #daySlider [loop]=\"true\" (ionSlideDidChange)=\"onSlideChanged()\">\n            <ion-slide>\n                <div class=\"dayview-allday-table\">\n                    <div class=\"dayview-allday-label\">{{allDayLabel}}</div>\n                    <ion-scroll scrollY=\"true\" zoom=\"false\" class=\"dayview-allday-content-wrapper\">\n                        <table class=\"table table-bordered dayview-allday-content-table\">\n                            <tbody>\n                            <tr>\n                                <td class=\"calendar-cell\" [ngClass]=\"{'calendar-event-wrap':views[0].allDayEvents.length>0}\"\n                                    [ngStyle]=\"{height: 25*views[0].allDayEvents.length+'px'}\"\n                                    *ngIf=\"0===currentViewIndex\">\n                                    <div *ngFor=\"let displayEvent of views[0].allDayEvents; let eventIndex=index\"\n                                         class=\"calendar-event\" tappable\n                                         (click)=\"eventSelected(displayEvent.event)\"\n                                         [ngStyle]=\"{top: 25*eventIndex+'px',width: '100%',height:'25px'}\">\n                                        <ng-template [ngTemplateOutlet]=\"dayviewAllDayEventTemplate\"\n                                            [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                        </ng-template>\n                                    </div>\n                                </td>\n                                <td class=\"calendar-cell\" *ngIf=\"0!==currentViewIndex\">\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n                <ion-scroll scrollY=\"true\" class=\"dayview-normal-event-container\">\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                           *ngIf=\"0===currentViewIndex\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[0].rows\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{tm.time | date: formatHourColumn}}\n                            </td>\n                            <td class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n                                <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                    <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n                                         (click)=\"eventSelected(displayEvent.event)\"\n                                         [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px', left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n                                         <ng-template [ngTemplateOutlet]=\"dayviewNormalEventTemplate\"\n                                             [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                         </ng-template>\n                                    </div>\n                                </div>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                           *ngIf=\"0!==currentViewIndex\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[0].rows\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{tm.time | date: formatHourColumn}}\n                            </td>\n                            <td class=\"calendar-cell\">\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                </ion-scroll>\n            </ion-slide>\n            <ion-slide>\n                <div class=\"dayview-allday-table\">\n                    <div class=\"dayview-allday-label\">{{allDayLabel}}</div>\n                    <ion-scroll scrollY=\"true\" zoom=\"false\" class=\"dayview-allday-content-wrapper\">\n                        <table class=\"table table-bordered dayview-allday-content-table\">\n                            <tbody>\n                            <tr>\n                                <td class=\"calendar-cell\" [ngClass]=\"{'calendar-event-wrap':views[1].allDayEvents.length>0}\"\n                                    [ngStyle]=\"{height: 25*views[1].allDayEvents.length+'px'}\"\n                                    *ngIf=\"1===currentViewIndex\">\n                                    <div *ngFor=\"let displayEvent of views[1].allDayEvents; let eventIndex=index\"\n                                         class=\"calendar-event\" tappable\n                                         (click)=\"eventSelected(displayEvent.event)\"\n                                         [ngStyle]=\"{top: 25*eventIndex+'px',width: '100%',height:'25px'}\">\n                                        <ng-template [ngTemplateOutlet]=\"dayviewAllDayEventTemplate\"\n                                            [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                        </ng-template>\n                                    </div>\n                                </td>\n                                <td class=\"calendar-cell\" *ngIf=\"1!==currentViewIndex\">\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n                <ion-scroll scrollY=\"true\" class=\"dayview-normal-event-container\">\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                           *ngIf=\"1===currentViewIndex\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[1].rows\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{tm.time | date: formatHourColumn}}\n                            </td>\n                            <td class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n                                <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                    <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n                                         (click)=\"eventSelected(displayEvent.event)\"\n                                         [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px', left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n                                         <ng-template [ngTemplateOutlet]=\"dayviewNormalEventTemplate\"\n                                             [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                         </ng-template>\n                                    </div>\n                                </div>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                           *ngIf=\"1!==currentViewIndex\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[1].rows\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{tm.time | date: formatHourColumn}}\n                            </td>\n                            <td class=\"calendar-cell\">\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                </ion-scroll>\n            </ion-slide>\n            <ion-slide>\n                <div class=\"dayview-allday-table\">\n                    <div class=\"dayview-allday-label\">{{allDayLabel}}</div>\n                    <ion-scroll scrollY=\"true\" zoom=\"false\" class=\"dayview-allday-content-wrapper\">\n                        <table class=\"table table-bordered dayview-allday-content-table\">\n                            <tbody>\n                            <tr>\n                                <td class=\"calendar-cell\" [ngClass]=\"{'calendar-event-wrap':views[2].allDayEvents.length>0}\"\n                                    [ngStyle]=\"{height: 25*views[2].allDayEvents.length+'px'}\"\n                                    *ngIf=\"2===currentViewIndex\">\n                                    <div *ngFor=\"let displayEvent of views[2].allDayEvents; let eventIndex=index\"\n                                         class=\"calendar-event\" tappable\n                                         (click)=\"eventSelected(displayEvent.event)\"\n                                         [ngStyle]=\"{top: 25*eventIndex+'px',width: '100%',height:'25px'}\">\n                                        <ng-template [ngTemplateOutlet]=\"dayviewAllDayEventTemplate\"\n                                            [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                        </ng-template>\n                                    </div>\n                                </td>\n                                <td class=\"calendar-cell\" *ngIf=\"2!==currentViewIndex\">\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n                <ion-scroll scrollY=\"true\" class=\"dayview-normal-event-container\">\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                           *ngIf=\"2===currentViewIndex\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[2].rows\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{tm.time | date: formatHourColumn}}\n                            </td>\n                            <td class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n                                <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                    <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n                                         (click)=\"eventSelected(displayEvent.event)\"\n                                         [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px', left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n                                         <ng-template [ngTemplateOutlet]=\"dayviewNormalEventTemplate\"\n                                             [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                         </ng-template>\n                                    </div>\n                                </div>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                           *ngIf=\"2!==currentViewIndex\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[2].rows\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{tm.time | date: formatHourColumn}}\n                            </td>\n                            <td class=\"calendar-cell\">\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                </ion-scroll>\n            </ion-slide>\n        </ion-slides>\n    ",
+                styles: ["\n        .table-fixed {\n          table-layout: fixed;\n        }\n\n        .table {\n          width: 100%;\n          max-width: 100%;\n          background-color: transparent;\n        }\n\n        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,\n        .table > tbody > tr > td, .table > tfoot > tr > td {\n          padding: 8px;\n          line-height: 20px;\n          vertical-align: top;\n        }\n\n        .table > thead > tr > th {\n          vertical-align: bottom;\n          border-bottom: 2px solid #ddd;\n        }\n\n        .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {\n          border-top: 0\n        }\n\n        .table > tbody + tbody {\n          border-top: 2px solid #ddd;\n        }\n\n        .table-bordered {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,\n        .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {\n          border-bottom-width: 2px;\n        }\n\n        .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {\n          background-color: #f9f9f9\n        }\n\n        .calendar-hour-column {\n          width: 50px;\n          white-space: nowrap;\n        }\n\n        .calendar-event-wrap {\n          position: relative;\n          width: 100%;\n          height: 100%;\n        }\n\n        .calendar-event {\n          position: absolute;\n          padding: 2px;\n          cursor: pointer;\n          z-index: 10000;\n        }\n\n        .calendar-cell {\n          padding: 0 !important;\n          height: 37px;\n        }\n\n        .dayview-allday-label {\n          float: left;\n          height: 100%;\n          line-height: 50px;\n          text-align: center;\n          width: 50px;\n        }\n\n        .dayview-allday-content-wrapper {\n          margin-left: 50px;\n          overflow: hidden;\n          height: 51px;\n        }\n\n        .dayview-allday-content-table {\n          min-height: 50px;\n        }\n\n        .dayview-allday-content-table td {\n          border-left: 1px solid #ddd;\n          border-right: 1px solid #ddd;\n        }\n\n        .dayview-allday-table {\n          height: 50px;\n          position: relative;\n          border-bottom: 1px solid #ddd;\n          font-size: 14px;\n        }\n\n        .dayview-normal-event-container {\n          margin-top: 50px;\n          overflow: hidden;\n          left: 0;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          position: absolute;\n          font-size: 14px;\n        }\n\n        .dayview .slide-zoom {\n          height: 100%;\n        }\n\n        .dayview-allday-content-wrapper scroll-content {\n          width: 100%;\n        }\n\n        ::-webkit-scrollbar,\n        *::-webkit-scrollbar {\n          display: none;\n        }\n\n        .table > tbody > tr > td.calendar-hour-column {\n          padding-left: 0;\n          padding-right: 0;\n          vertical-align: middle;\n        }\n\n        @media (max-width: 750px) {\n          .dayview-allday-label, .calendar-hour-column {\n            width: 31px;\n            font-size: 12px;\n          }\n\n          .dayview-allday-label {\n            padding-top: 4px;\n          }\n\n          .table > tbody > tr > td.calendar-hour-column {\n            padding-left: 0;\n            padding-right: 0;\n            vertical-align: middle;\n            line-height: 12px;\n          }\n\n          .dayview-allday-label {\n            line-height: 20px;\n          }\n\n          .dayview-allday-content-wrapper {\n            margin-left: 31px;\n          }\n        }\n    "],
+                encapsulation: ViewEncapsulation.None
+            },] },
+];
+DayViewComponent.ctorParameters = function () { return [
+    { type: CalendarService, },
+]; };
+DayViewComponent.propDecorators = {
+    'slider': [{ type: ViewChild, args: ['daySlider',] },],
+    'class': [{ type: HostBinding, args: ['class.dayview',] },],
+    'dayviewAllDayEventTemplate': [{ type: Input },],
+    'dayviewNormalEventTemplate': [{ type: Input },],
+    'formatHourColumn': [{ type: Input },],
+    'formatDayTitle': [{ type: Input },],
+    'allDayLabel': [{ type: Input },],
+    'hourParts': [{ type: Input },],
+    'eventSource': [{ type: Input },],
+    'markDisabled': [{ type: Input },],
+    'locale': [{ type: Input },],
+    'onRangeChanged': [{ type: Output },],
+    'onEventSelected': [{ type: Output },],
+    'onTimeSelected': [{ type: Output },],
+    'onTitleChanged': [{ type: Output },],
+};
 //# sourceMappingURL=dayview.js.map

dayview.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"DayViewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dayview","template":"\n        <ion-slides #daySlider [loop]=\"true\" (ionSlideDidChange)=\"onSlideChanged()\">\n            <ion-slide>\n                <div class=\"dayview-allday-table\">\n                    <div class=\"dayview-allday-label\">{{allDayLabel}}</div>\n                    <ion-scroll scrollY=\"true\" zoom=\"false\" class=\"dayview-allday-content-wrapper\">\n                        <table class=\"table table-bordered dayview-allday-content-table\">\n                            <tbody>\n                            <tr>\n                                <td class=\"calendar-cell\" [ngClass]=\"{'calendar-event-wrap':views[0].allDayEvents.length>0}\"\n                                    [ngStyle]=\"{height: 25*views[0].allDayEvents.length+'px'}\"\n                                    *ngIf=\"0===currentViewIndex\">\n                                    <div *ngFor=\"let displayEvent of views[0].allDayEvents; let eventIndex=index\"\n                                         class=\"calendar-event\" tappable\n                                         (click)=\"eventSelected(displayEvent.event)\"\n                                         [ngStyle]=\"{top: 25*eventIndex+'px',width: '100%',height:'25px'}\">\n                                        <template [ngTemplateOutlet]=\"dayviewAllDayEventTemplate\"\n                                            [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                        </template>\n                                    </div>\n                                </td>\n                                <td class=\"calendar-cell\" *ngIf=\"0!==currentViewIndex\">\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n                <ion-scroll scrollY=\"true\" class=\"dayview-normal-event-container\">\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                           *ngIf=\"0===currentViewIndex\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[0].rows\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{tm.time | date: formatHourColumn}}\n                            </td>\n                            <td class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n                                <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                    <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n                                         (click)=\"eventSelected(displayEvent.event)\"\n                                         [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px', left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n                                         <template [ngTemplateOutlet]=\"dayviewNormalEventTemplate\"\n                                             [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                         </template>\n                                    </div>\n                                </div>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                           *ngIf=\"0!==currentViewIndex\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[0].rows\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{tm.time | date: formatHourColumn}}\n                            </td>\n                            <td class=\"calendar-cell\">\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                </ion-scroll>\n            </ion-slide>\n            <ion-slide>\n                <div class=\"dayview-allday-table\">\n                    <div class=\"dayview-allday-label\">{{allDayLabel}}</div>\n                    <ion-scroll scrollY=\"true\" zoom=\"false\" class=\"dayview-allday-content-wrapper\">\n                        <table class=\"table table-bordered dayview-allday-content-table\">\n                            <tbody>\n                            <tr>\n                                <td class=\"calendar-cell\" [ngClass]=\"{'calendar-event-wrap':views[1].allDayEvents.length>0}\"\n                                    [ngStyle]=\"{height: 25*views[1].allDayEvents.length+'px'}\"\n                                    *ngIf=\"1===currentViewIndex\">\n                                    <div *ngFor=\"let displayEvent of views[1].allDayEvents; let eventIndex=index\"\n                                         class=\"calendar-event\" tappable\n                                         (click)=\"eventSelected(displayEvent.event)\"\n                                         [ngStyle]=\"{top: 25*eventIndex+'px',width: '100%',height:'25px'}\">\n                                        <template [ngTemplateOutlet]=\"dayviewAllDayEventTemplate\"\n                                            [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                        </template>\n                                    </div>\n                                </td>\n                                <td class=\"calendar-cell\" *ngIf=\"1!==currentViewIndex\">\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n                <ion-scroll scrollY=\"true\" class=\"dayview-normal-event-container\">\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                           *ngIf=\"1===currentViewIndex\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[1].rows\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{tm.time | date: formatHourColumn}}\n                            </td>\n                            <td class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n                                <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                    <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n                                         (click)=\"eventSelected(displayEvent.event)\"\n                                         [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px', left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n                                         <template [ngTemplateOutlet]=\"dayviewNormalEventTemplate\"\n                                             [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                         </template>\n                                    </div>\n                                </div>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                           *ngIf=\"1!==currentViewIndex\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[1].rows\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{tm.time | date: formatHourColumn}}\n                            </td>\n                            <td class=\"calendar-cell\">\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                </ion-scroll>\n            </ion-slide>\n            <ion-slide>\n                <div class=\"dayview-allday-table\">\n                    <div class=\"dayview-allday-label\">{{allDayLabel}}</div>\n                    <ion-scroll scrollY=\"true\" zoom=\"false\" class=\"dayview-allday-content-wrapper\">\n                        <table class=\"table table-bordered dayview-allday-content-table\">\n                            <tbody>\n                            <tr>\n                                <td class=\"calendar-cell\" [ngClass]=\"{'calendar-event-wrap':views[2].allDayEvents.length>0}\"\n                                    [ngStyle]=\"{height: 25*views[2].allDayEvents.length+'px'}\"\n                                    *ngIf=\"2===currentViewIndex\">\n                                    <div *ngFor=\"let displayEvent of views[2].allDayEvents; let eventIndex=index\"\n                                         class=\"calendar-event\" tappable\n                                         (click)=\"eventSelected(displayEvent.event)\"\n                                         [ngStyle]=\"{top: 25*eventIndex+'px',width: '100%',height:'25px'}\">\n                                        <template [ngTemplateOutlet]=\"dayviewAllDayEventTemplate\"\n                                            [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                        </template>\n                                    </div>\n                                </td>\n                                <td class=\"calendar-cell\" *ngIf=\"2!==currentViewIndex\">\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n                <ion-scroll scrollY=\"true\" class=\"dayview-normal-event-container\">\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                           *ngIf=\"2===currentViewIndex\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[2].rows\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{tm.time | date: formatHourColumn}}\n                            </td>\n                            <td class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n                                <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                    <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n                                         (click)=\"eventSelected(displayEvent.event)\"\n                                         [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px', left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n                                         <template [ngTemplateOutlet]=\"dayviewNormalEventTemplate\"\n                                             [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                         </template>\n                                    </div>\n                                </div>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                           *ngIf=\"2!==currentViewIndex\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[2].rows\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{tm.time | date: formatHourColumn}}\n                            </td>\n                            <td class=\"calendar-cell\">\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                </ion-scroll>\n            </ion-slide>\n        </ion-slides>\n    ","styles":["\n        .table-fixed {\n          table-layout: fixed;\n        }\n\n        .table {\n          width: 100%;\n          max-width: 100%;\n          background-color: transparent;\n        }\n\n        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,\n        .table > tbody > tr > td, .table > tfoot > tr > td {\n          padding: 8px;\n          line-height: 20px;\n          vertical-align: top;\n        }\n\n        .table > thead > tr > th {\n          vertical-align: bottom;\n          border-bottom: 2px solid #ddd;\n        }\n\n        .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {\n          border-top: 0\n        }\n\n        .table > tbody + tbody {\n          border-top: 2px solid #ddd;\n        }\n\n        .table-bordered {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,\n        .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {\n          border-bottom-width: 2px;\n        }\n\n        .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {\n          background-color: #f9f9f9\n        }\n\n        .calendar-hour-column {\n          width: 50px;\n          white-space: nowrap;\n        }\n\n        .calendar-event-wrap {\n          position: relative;\n          width: 100%;\n          height: 100%;\n        }\n\n        .calendar-event {\n          position: absolute;\n          padding: 2px;\n          cursor: pointer;\n          z-index: 10000;\n        }\n\n        .calendar-cell {\n          padding: 0 !important;\n          height: 37px;\n        }\n\n        .dayview-allday-label {\n          float: left;\n          height: 100%;\n          line-height: 50px;\n          text-align: center;\n          width: 50px;\n        }\n\n        .dayview-allday-content-wrapper {\n          margin-left: 50px;\n          overflow: hidden;\n          height: 51px;\n        }\n\n        .dayview-allday-content-table {\n          min-height: 50px;\n        }\n\n        .dayview-allday-content-table td {\n          border-left: 1px solid #ddd;\n          border-right: 1px solid #ddd;\n        }\n\n        .dayview-allday-table {\n          height: 50px;\n          position: relative;\n          border-bottom: 1px solid #ddd;\n          font-size: 14px;\n        }\n\n        .dayview-normal-event-container {\n          margin-top: 50px;\n          overflow: hidden;\n          left: 0;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          position: absolute;\n          font-size: 14px;\n        }\n\n        .dayview .slide-zoom {\n          height: 100%;\n        }\n\n        .dayview-allday-content-wrapper scroll-content {\n          width: 100%;\n        }\n\n        ::-webkit-scrollbar,\n        *::-webkit-scrollbar {\n          display: none;\n        }\n\n        .table > tbody > tr > td.calendar-hour-column {\n          padding-left: 0;\n          padding-right: 0;\n          vertical-align: middle;\n        }\n\n        @media (max-width: 750px) {\n          .dayview-allday-label, .calendar-hour-column {\n            width: 31px;\n            font-size: 12px;\n          }\n\n          .dayview-allday-label {\n            padding-top: 4px;\n          }\n\n          .table > tbody > tr > td.calendar-hour-column {\n            padding-left: 0;\n            padding-right: 0;\n            vertical-align: middle;\n            line-height: 12px;\n          }\n\n          .dayview-allday-label {\n            line-height: 20px;\n          }\n\n          .dayview-allday-content-wrapper {\n            margin-left: 31px;\n          }\n        }\n    "],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"slider":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["daySlider"]}]}],"class":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.dayview"]}]}],"dayviewAllDayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dayviewNormalEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatHourColumn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatDayTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"allDayLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hourParts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"eventSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"markDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"locale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onRangeChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onEventSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onTimeSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onTitleChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./calendar.service","name":"CalendarService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onSlideChanged":[{"__symbolic":"method"}],"move":[{"__symbolic":"method"}],"getViewData":[{"__symbolic":"method"}],"getRange":[{"__symbolic":"method"}],"onDataLoaded":[{"__symbolic":"method"}],"refreshView":[{"__symbolic":"method"}],"getTitle":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"placeEvents":[{"__symbolic":"method"}],"placeAllDayEvents":[{"__symbolic":"method"}],"overlap":[{"__symbolic":"method"}],"calculatePosition":[{"__symbolic":"method"}],"eventSelected":[{"__symbolic":"method"}]},"statics":{"compareEventByStartOffset":{"__symbolic":"function","parameters":["eventA","eventB"],"value":{"__symbolic":"binop","operator":"-","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"eventA"},"member":"startOffset"},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"eventB"},"member":"startOffset"}}}}}}}
+[{"__symbolic":"module","version":3,"metadata":{"DayViewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dayview","template":"\n        <ion-slides #daySlider [loop]=\"true\" (ionSlideDidChange)=\"onSlideChanged()\">\n            <ion-slide>\n                <div class=\"dayview-allday-table\">\n                    <div class=\"dayview-allday-label\">{{allDayLabel}}</div>\n                    <ion-scroll scrollY=\"true\" zoom=\"false\" class=\"dayview-allday-content-wrapper\">\n                        <table class=\"table table-bordered dayview-allday-content-table\">\n                            <tbody>\n                            <tr>\n                                <td class=\"calendar-cell\" [ngClass]=\"{'calendar-event-wrap':views[0].allDayEvents.length>0}\"\n                                    [ngStyle]=\"{height: 25*views[0].allDayEvents.length+'px'}\"\n                                    *ngIf=\"0===currentViewIndex\">\n                                    <div *ngFor=\"let displayEvent of views[0].allDayEvents; let eventIndex=index\"\n                                         class=\"calendar-event\" tappable\n                                         (click)=\"eventSelected(displayEvent.event)\"\n                                         [ngStyle]=\"{top: 25*eventIndex+'px',width: '100%',height:'25px'}\">\n                                        <ng-template [ngTemplateOutlet]=\"dayviewAllDayEventTemplate\"\n                                            [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                        </ng-template>\n                                    </div>\n                                </td>\n                                <td class=\"calendar-cell\" *ngIf=\"0!==currentViewIndex\">\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n                <ion-scroll scrollY=\"true\" class=\"dayview-normal-event-container\">\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                           *ngIf=\"0===currentViewIndex\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[0].rows\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{tm.time | date: formatHourColumn}}\n                            </td>\n                            <td class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n                                <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                    <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n                                         (click)=\"eventSelected(displayEvent.event)\"\n                                         [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px', left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n                                         <ng-template [ngTemplateOutlet]=\"dayviewNormalEventTemplate\"\n                                             [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                         </ng-template>\n                                    </div>\n                                </div>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                           *ngIf=\"0!==currentViewIndex\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[0].rows\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{tm.time | date: formatHourColumn}}\n                            </td>\n                            <td class=\"calendar-cell\">\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                </ion-scroll>\n            </ion-slide>\n            <ion-slide>\n                <div class=\"dayview-allday-table\">\n                    <div class=\"dayview-allday-label\">{{allDayLabel}}</div>\n                    <ion-scroll scrollY=\"true\" zoom=\"false\" class=\"dayview-allday-content-wrapper\">\n                        <table class=\"table table-bordered dayview-allday-content-table\">\n                            <tbody>\n                            <tr>\n                                <td class=\"calendar-cell\" [ngClass]=\"{'calendar-event-wrap':views[1].allDayEvents.length>0}\"\n                                    [ngStyle]=\"{height: 25*views[1].allDayEvents.length+'px'}\"\n                                    *ngIf=\"1===currentViewIndex\">\n                                    <div *ngFor=\"let displayEvent of views[1].allDayEvents; let eventIndex=index\"\n                                         class=\"calendar-event\" tappable\n                                         (click)=\"eventSelected(displayEvent.event)\"\n                                         [ngStyle]=\"{top: 25*eventIndex+'px',width: '100%',height:'25px'}\">\n                                        <ng-template [ngTemplateOutlet]=\"dayviewAllDayEventTemplate\"\n                                            [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                        </ng-template>\n                                    </div>\n                                </td>\n                                <td class=\"calendar-cell\" *ngIf=\"1!==currentViewIndex\">\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n                <ion-scroll scrollY=\"true\" class=\"dayview-normal-event-container\">\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                           *ngIf=\"1===currentViewIndex\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[1].rows\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{tm.time | date: formatHourColumn}}\n                            </td>\n                            <td class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n                                <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                    <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n                                         (click)=\"eventSelected(displayEvent.event)\"\n                                         [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px', left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n                                         <ng-template [ngTemplateOutlet]=\"dayviewNormalEventTemplate\"\n                                             [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                         </ng-template>\n                                    </div>\n                                </div>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                           *ngIf=\"1!==currentViewIndex\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[1].rows\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{tm.time | date: formatHourColumn}}\n                            </td>\n                            <td class=\"calendar-cell\">\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                </ion-scroll>\n            </ion-slide>\n            <ion-slide>\n                <div class=\"dayview-allday-table\">\n                    <div class=\"dayview-allday-label\">{{allDayLabel}}</div>\n                    <ion-scroll scrollY=\"true\" zoom=\"false\" class=\"dayview-allday-content-wrapper\">\n                        <table class=\"table table-bordered dayview-allday-content-table\">\n                            <tbody>\n                            <tr>\n                                <td class=\"calendar-cell\" [ngClass]=\"{'calendar-event-wrap':views[2].allDayEvents.length>0}\"\n                                    [ngStyle]=\"{height: 25*views[2].allDayEvents.length+'px'}\"\n                                    *ngIf=\"2===currentViewIndex\">\n                                    <div *ngFor=\"let displayEvent of views[2].allDayEvents; let eventIndex=index\"\n                                         class=\"calendar-event\" tappable\n                                         (click)=\"eventSelected(displayEvent.event)\"\n                                         [ngStyle]=\"{top: 25*eventIndex+'px',width: '100%',height:'25px'}\">\n                                        <ng-template [ngTemplateOutlet]=\"dayviewAllDayEventTemplate\"\n                                            [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                        </ng-template>\n                                    </div>\n                                </td>\n                                <td class=\"calendar-cell\" *ngIf=\"2!==currentViewIndex\">\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n                <ion-scroll scrollY=\"true\" class=\"dayview-normal-event-container\">\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                           *ngIf=\"2===currentViewIndex\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[2].rows\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{tm.time | date: formatHourColumn}}\n                            </td>\n                            <td class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n                                <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                    <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n                                         (click)=\"eventSelected(displayEvent.event)\"\n                                         [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px', left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n                                         <ng-template [ngTemplateOutlet]=\"dayviewNormalEventTemplate\"\n                                             [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                         </ng-template>\n                                    </div>\n                                </div>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                           *ngIf=\"2!==currentViewIndex\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[2].rows\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{tm.time | date: formatHourColumn}}\n                            </td>\n                            <td class=\"calendar-cell\">\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                </ion-scroll>\n            </ion-slide>\n        </ion-slides>\n    ","styles":["\n        .table-fixed {\n          table-layout: fixed;\n        }\n\n        .table {\n          width: 100%;\n          max-width: 100%;\n          background-color: transparent;\n        }\n\n        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,\n        .table > tbody > tr > td, .table > tfoot > tr > td {\n          padding: 8px;\n          line-height: 20px;\n          vertical-align: top;\n        }\n\n        .table > thead > tr > th {\n          vertical-align: bottom;\n          border-bottom: 2px solid #ddd;\n        }\n\n        .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {\n          border-top: 0\n        }\n\n        .table > tbody + tbody {\n          border-top: 2px solid #ddd;\n        }\n\n        .table-bordered {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,\n        .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {\n          border-bottom-width: 2px;\n        }\n\n        .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {\n          background-color: #f9f9f9\n        }\n\n        .calendar-hour-column {\n          width: 50px;\n          white-space: nowrap;\n        }\n\n        .calendar-event-wrap {\n          position: relative;\n          width: 100%;\n          height: 100%;\n        }\n\n        .calendar-event {\n          position: absolute;\n          padding: 2px;\n          cursor: pointer;\n          z-index: 10000;\n        }\n\n        .calendar-cell {\n          padding: 0 !important;\n          height: 37px;\n        }\n\n        .dayview-allday-label {\n          float: left;\n          height: 100%;\n          line-height: 50px;\n          text-align: center;\n          width: 50px;\n        }\n\n        .dayview-allday-content-wrapper {\n          margin-left: 50px;\n          overflow: hidden;\n          height: 51px;\n        }\n\n        .dayview-allday-content-table {\n          min-height: 50px;\n        }\n\n        .dayview-allday-content-table td {\n          border-left: 1px solid #ddd;\n          border-right: 1px solid #ddd;\n        }\n\n        .dayview-allday-table {\n          height: 50px;\n          position: relative;\n          border-bottom: 1px solid #ddd;\n          font-size: 14px;\n        }\n\n        .dayview-normal-event-container {\n          margin-top: 50px;\n          overflow: hidden;\n          left: 0;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          position: absolute;\n          font-size: 14px;\n        }\n\n        .dayview .slide-zoom {\n          height: 100%;\n        }\n\n        .dayview-allday-content-wrapper scroll-content {\n          width: 100%;\n        }\n\n        ::-webkit-scrollbar,\n        *::-webkit-scrollbar {\n          display: none;\n        }\n\n        .table > tbody > tr > td.calendar-hour-column {\n          padding-left: 0;\n          padding-right: 0;\n          vertical-align: middle;\n        }\n\n        @media (max-width: 750px) {\n          .dayview-allday-label, .calendar-hour-column {\n            width: 31px;\n            font-size: 12px;\n          }\n\n          .dayview-allday-label {\n            padding-top: 4px;\n          }\n\n          .table > tbody > tr > td.calendar-hour-column {\n            padding-left: 0;\n            padding-right: 0;\n            vertical-align: middle;\n            line-height: 12px;\n          }\n\n          .dayview-allday-label {\n            line-height: 20px;\n          }\n\n          .dayview-allday-content-wrapper {\n            margin-left: 31px;\n          }\n        }\n    "],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"slider":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["daySlider"]}]}],"class":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.dayview"]}]}],"dayviewAllDayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dayviewNormalEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatHourColumn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatDayTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"allDayLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hourParts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"eventSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"markDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"locale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onRangeChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onEventSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onTimeSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onTitleChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./calendar.service","name":"CalendarService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onSlideChanged":[{"__symbolic":"method"}],"move":[{"__symbolic":"method"}],"getViewData":[{"__symbolic":"method"}],"getRange":[{"__symbolic":"method"}],"onDataLoaded":[{"__symbolic":"method"}],"refreshView":[{"__symbolic":"method"}],"getTitle":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"placeEvents":[{"__symbolic":"method"}],"placeAllDayEvents":[{"__symbolic":"method"}],"overlap":[{"__symbolic":"method"}],"calculatePosition":[{"__symbolic":"method"}],"eventSelected":[{"__symbolic":"method"}]},"statics":{"compareEventByStartOffset":{"__symbolic":"function","parameters":["eventA","eventB"],"value":{"__symbolic":"binop","operator":"-","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"eventA"},"member":"startOffset"},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"eventB"},"member":"startOffset"}}}}}}},{"__symbolic":"module","version":1,"metadata":{"DayViewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dayview","template":"\n        <ion-slides #daySlider [loop]=\"true\" (ionSlideDidChange)=\"onSlideChanged()\">\n            <ion-slide>\n                <div class=\"dayview-allday-table\">\n                    <div class=\"dayview-allday-label\">{{allDayLabel}}</div>\n                    <ion-scroll scrollY=\"true\" zoom=\"false\" class=\"dayview-allday-content-wrapper\">\n                        <table class=\"table table-bordered dayview-allday-content-table\">\n                            <tbody>\n                            <tr>\n                                <td class=\"calendar-cell\" [ngClass]=\"{'calendar-event-wrap':views[0].allDayEvents.length>0}\"\n                                    [ngStyle]=\"{height: 25*views[0].allDayEvents.length+'px'}\"\n                                    *ngIf=\"0===currentViewIndex\">\n                                    <div *ngFor=\"let displayEvent of views[0].allDayEvents; let eventIndex=index\"\n                                         class=\"calendar-event\" tappable\n                                         (click)=\"eventSelected(displayEvent.event)\"\n                                         [ngStyle]=\"{top: 25*eventIndex+'px',width: '100%',height:'25px'}\">\n                                        <ng-template [ngTemplateOutlet]=\"dayviewAllDayEventTemplate\"\n                                            [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                        </ng-template>\n                                    </div>\n                                </td>\n                                <td class=\"calendar-cell\" *ngIf=\"0!==currentViewIndex\">\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n                <ion-scroll scrollY=\"true\" class=\"dayview-normal-event-container\">\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                           *ngIf=\"0===currentViewIndex\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[0].rows\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{tm.time | date: formatHourColumn}}\n                            </td>\n                            <td class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n                                <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                    <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n                                         (click)=\"eventSelected(displayEvent.event)\"\n                                         [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px', left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n                                         <ng-template [ngTemplateOutlet]=\"dayviewNormalEventTemplate\"\n                                             [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                         </ng-template>\n                                    </div>\n                                </div>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                           *ngIf=\"0!==currentViewIndex\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[0].rows\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{tm.time | date: formatHourColumn}}\n                            </td>\n                            <td class=\"calendar-cell\">\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                </ion-scroll>\n            </ion-slide>\n            <ion-slide>\n                <div class=\"dayview-allday-table\">\n                    <div class=\"dayview-allday-label\">{{allDayLabel}}</div>\n                    <ion-scroll scrollY=\"true\" zoom=\"false\" class=\"dayview-allday-content-wrapper\">\n                        <table class=\"table table-bordered dayview-allday-content-table\">\n                            <tbody>\n                            <tr>\n                                <td class=\"calendar-cell\" [ngClass]=\"{'calendar-event-wrap':views[1].allDayEvents.length>0}\"\n                                    [ngStyle]=\"{height: 25*views[1].allDayEvents.length+'px'}\"\n                                    *ngIf=\"1===currentViewIndex\">\n                                    <div *ngFor=\"let displayEvent of views[1].allDayEvents; let eventIndex=index\"\n                                         class=\"calendar-event\" tappable\n                                         (click)=\"eventSelected(displayEvent.event)\"\n                                         [ngStyle]=\"{top: 25*eventIndex+'px',width: '100%',height:'25px'}\">\n                                        <ng-template [ngTemplateOutlet]=\"dayviewAllDayEventTemplate\"\n                                            [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                        </ng-template>\n                                    </div>\n                                </td>\n                                <td class=\"calendar-cell\" *ngIf=\"1!==currentViewIndex\">\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n                <ion-scroll scrollY=\"true\" class=\"dayview-normal-event-container\">\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                           *ngIf=\"1===currentViewIndex\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[1].rows\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{tm.time | date: formatHourColumn}}\n                            </td>\n                            <td class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n                                <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                    <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n                                         (click)=\"eventSelected(displayEvent.event)\"\n                                         [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px', left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n                                         <ng-template [ngTemplateOutlet]=\"dayviewNormalEventTemplate\"\n                                             [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                         </ng-template>\n                                    </div>\n                                </div>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                           *ngIf=\"1!==currentViewIndex\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[1].rows\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{tm.time | date: formatHourColumn}}\n                            </td>\n                            <td class=\"calendar-cell\">\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                </ion-scroll>\n            </ion-slide>\n            <ion-slide>\n                <div class=\"dayview-allday-table\">\n                    <div class=\"dayview-allday-label\">{{allDayLabel}}</div>\n                    <ion-scroll scrollY=\"true\" zoom=\"false\" class=\"dayview-allday-content-wrapper\">\n                        <table class=\"table table-bordered dayview-allday-content-table\">\n                            <tbody>\n                            <tr>\n                                <td class=\"calendar-cell\" [ngClass]=\"{'calendar-event-wrap':views[2].allDayEvents.length>0}\"\n                                    [ngStyle]=\"{height: 25*views[2].allDayEvents.length+'px'}\"\n                                    *ngIf=\"2===currentViewIndex\">\n                                    <div *ngFor=\"let displayEvent of views[2].allDayEvents; let eventIndex=index\"\n                                         class=\"calendar-event\" tappable\n                                         (click)=\"eventSelected(displayEvent.event)\"\n                                         [ngStyle]=\"{top: 25*eventIndex+'px',width: '100%',height:'25px'}\">\n                                        <ng-template [ngTemplateOutlet]=\"dayviewAllDayEventTemplate\"\n                                            [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                        </ng-template>\n                                    </div>\n                                </td>\n                                <td class=\"calendar-cell\" *ngIf=\"2!==currentViewIndex\">\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n                <ion-scroll scrollY=\"true\" class=\"dayview-normal-event-container\">\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                           *ngIf=\"2===currentViewIndex\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[2].rows\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{tm.time | date: formatHourColumn}}\n                            </td>\n                            <td class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n                                <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                    <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n                                         (click)=\"eventSelected(displayEvent.event)\"\n                                         [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px', left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n                                         <ng-template [ngTemplateOutlet]=\"dayviewNormalEventTemplate\"\n                                             [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                         </ng-template>\n                                    </div>\n                                </div>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                           *ngIf=\"2!==currentViewIndex\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[2].rows\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{tm.time | date: formatHourColumn}}\n                            </td>\n                            <td class=\"calendar-cell\">\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                </ion-scroll>\n            </ion-slide>\n        </ion-slides>\n    ","styles":["\n        .table-fixed {\n          table-layout: fixed;\n        }\n\n        .table {\n          width: 100%;\n          max-width: 100%;\n          background-color: transparent;\n        }\n\n        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,\n        .table > tbody > tr > td, .table > tfoot > tr > td {\n          padding: 8px;\n          line-height: 20px;\n          vertical-align: top;\n        }\n\n        .table > thead > tr > th {\n          vertical-align: bottom;\n          border-bottom: 2px solid #ddd;\n        }\n\n        .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {\n          border-top: 0\n        }\n\n        .table > tbody + tbody {\n          border-top: 2px solid #ddd;\n        }\n\n        .table-bordered {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,\n        .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {\n          border-bottom-width: 2px;\n        }\n\n        .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {\n          background-color: #f9f9f9\n        }\n\n        .calendar-hour-column {\n          width: 50px;\n          white-space: nowrap;\n        }\n\n        .calendar-event-wrap {\n          position: relative;\n          width: 100%;\n          height: 100%;\n        }\n\n        .calendar-event {\n          position: absolute;\n          padding: 2px;\n          cursor: pointer;\n          z-index: 10000;\n        }\n\n        .calendar-cell {\n          padding: 0 !important;\n          height: 37px;\n        }\n\n        .dayview-allday-label {\n          float: left;\n          height: 100%;\n          line-height: 50px;\n          text-align: center;\n          width: 50px;\n        }\n\n        .dayview-allday-content-wrapper {\n          margin-left: 50px;\n          overflow: hidden;\n          height: 51px;\n        }\n\n        .dayview-allday-content-table {\n          min-height: 50px;\n        }\n\n        .dayview-allday-content-table td {\n          border-left: 1px solid #ddd;\n          border-right: 1px solid #ddd;\n        }\n\n        .dayview-allday-table {\n          height: 50px;\n          position: relative;\n          border-bottom: 1px solid #ddd;\n          font-size: 14px;\n        }\n\n        .dayview-normal-event-container {\n          margin-top: 50px;\n          overflow: hidden;\n          left: 0;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          position: absolute;\n          font-size: 14px;\n        }\n\n        .dayview .slide-zoom {\n          height: 100%;\n        }\n\n        .dayview-allday-content-wrapper scroll-content {\n          width: 100%;\n        }\n\n        ::-webkit-scrollbar,\n        *::-webkit-scrollbar {\n          display: none;\n        }\n\n        .table > tbody > tr > td.calendar-hour-column {\n          padding-left: 0;\n          padding-right: 0;\n          vertical-align: middle;\n        }\n\n        @media (max-width: 750px) {\n          .dayview-allday-label, .calendar-hour-column {\n            width: 31px;\n            font-size: 12px;\n          }\n\n          .dayview-allday-label {\n            padding-top: 4px;\n          }\n\n          .table > tbody > tr > td.calendar-hour-column {\n            padding-left: 0;\n            padding-right: 0;\n            vertical-align: middle;\n            line-height: 12px;\n          }\n\n          .dayview-allday-label {\n            line-height: 20px;\n          }\n\n          .dayview-allday-content-wrapper {\n            margin-left: 31px;\n          }\n        }\n    "],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"slider":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["daySlider"]}]}],"class":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.dayview"]}]}],"dayviewAllDayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dayviewNormalEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatHourColumn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatDayTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"allDayLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hourParts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"eventSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"markDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"locale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onRangeChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onEventSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onTimeSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onTitleChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./calendar.service","name":"CalendarService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onSlideChanged":[{"__symbolic":"method"}],"move":[{"__symbolic":"method"}],"getViewData":[{"__symbolic":"method"}],"getRange":[{"__symbolic":"method"}],"onDataLoaded":[{"__symbolic":"method"}],"refreshView":[{"__symbolic":"method"}],"getTitle":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"placeEvents":[{"__symbolic":"method"}],"placeAllDayEvents":[{"__symbolic":"method"}],"overlap":[{"__symbolic":"method"}],"calculatePosition":[{"__symbolic":"method"}],"eventSelected":[{"__symbolic":"method"}]},"statics":{"compareEventByStartOffset":{"__symbolic":"function","parameters":["eventA","eventB"],"value":{"__symbolic":"binop","operator":"-","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"eventA"},"member":"startOffset"},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"eventB"},"member":"startOffset"}}}}}}}]

index.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./calendar.module","export":["NgCalendarModule"]}]}
+[{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./calendar.module","export":["NgCalendarModule"]}]},{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./calendar.module","export":["NgCalendarModule"]}]}]

monthview.js

 import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
 import { DatePipe } from '@angular/common';
 import { CalendarService } from './calendar.service';
-export var MonthViewComponent = (function () {
+var MonthViewComponent = (function () {
     function MonthViewComponent(calendarService) {
@@ -354,34 +354,35 @@ this.calendarService = calendarService;
     };
-    MonthViewComponent.decorators = [
-        { type: Component, args: [{
-                    selector: 'monthview',
-                    template: "\n        <div>\n            <ion-slides #monthSlider [loop]=\"true\" (ionSlideDidChange)=\"onSlideChanged()\">\n                <ion-slide>\n                    <table *ngIf=\"0===currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr>\n                            <th *ngFor=\"let dayHeader of views[0].dayHeaders\">\n                                <small>{{dayHeader}}</small>\n                            </th>\n                        </tr>\n                        </thead>\n                        <tbody>\n                        <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\n                            <td *ngFor=\"let col of [0,1,2,3,4,5,6]\" tappable (click)=\"select(views[0].dates[row*7+col])\"\n                                [ngClass]=\"getHighlightClass(views[0].dates[row*7+col])\">\n                                <template [ngTemplateOutlet]=\"monthviewDisplayEventTemplate\"\n                                [ngOutletContext]=\"{view: views[0], row: row, col: col}\">\n                                </template>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table *ngIf=\"0!==currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr class=\"text-center\">\n                            <th *ngFor=\"let dayHeader of views[0].dayHeaders\">\n                                <small>{{dayHeader}}</small>\n                            </th>\n                        </tr>\n                        </thead>\n                        <tbody>\n                        <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\n                            <td *ngFor=\"let col of [0,1,2,3,4,5,6]\">\n                                <template [ngTemplateOutlet]=\"monthviewInactiveDisplayEventTemplate\"\n                                [ngOutletContext]=\"{view: views[0], row: row, col: col}\">\n                                </template>\n                            </td>\n                        <tr>\n                        </tbody>\n                    </table>\n                </ion-slide>\n                <ion-slide>\n                    <table *ngIf=\"1===currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr>\n                            <th *ngFor=\"let dayHeader of views[1].dayHeaders\">\n                                <small>{{dayHeader}}</small>\n                            </th>\n                        </tr>\n                        </thead>\n                        <tbody>\n                        <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\n                            <td *ngFor=\"let col of [0,1,2,3,4,5,6]\" tappable (click)=\"select(views[1].dates[row*7+col])\"\n                                [ngClass]=\"getHighlightClass(views[1].dates[row*7+col])\">\n                                <template [ngTemplateOutlet]=\"monthviewDisplayEventTemplate\"\n                                [ngOutletContext]=\"{view: views[1], row: row, col: col}\">\n                                </template>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table *ngIf=\"1!==currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr class=\"text-center\">\n                            <th *ngFor=\"let dayHeader of views[1].dayHeaders\">\n                                <small>{{dayHeader}}</small>\n                            </th>\n                        </tr>\n                        </thead>\n                        <tbody>\n                        <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\n                            <td *ngFor=\"let col of [0,1,2,3,4,5,6]\">\n                                <template [ngTemplateOutlet]=\"monthviewInactiveDisplayEventTemplate\"\n                                [ngOutletContext]=\"{view: views[1], row: row, col: col}\">\n                                </template>\n                            </td>\n                        <tr>\n                        </tbody>\n                    </table>\n                </ion-slide>\n                <ion-slide>\n                    <table *ngIf=\"2===currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr>\n                            <th *ngFor=\"let dayHeader of views[2].dayHeaders\">\n                                <small>{{dayHeader}}</small>\n                            </th>\n                        </tr>\n                        </thead>\n                        <tbody>\n                        <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\n                            <td *ngFor=\"let col of [0,1,2,3,4,5,6]\" tappable (click)=\"select(views[2].dates[row*7+col])\"\n                                [ngClass]=\"getHighlightClass(views[2].dates[row*7+col])\">\n                                <template [ngTemplateOutlet]=\"monthviewDisplayEventTemplate\"\n                                [ngOutletContext]=\"{view: views[2], row: row, col: col}\">\n                                </template>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table *ngIf=\"2!==currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr class=\"text-center\">\n                            <th *ngFor=\"let dayHeader of views[2].dayHeaders\">\n                                <small>{{dayHeader}}</small>\n                            </th>\n                        </tr>\n                        </thead>\n                        <tbody>\n                        <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\n                            <td *ngFor=\"let col of [0,1,2,3,4,5,6]\">\n                                <template [ngTemplateOutlet]=\"monthviewInactiveDisplayEventTemplate\"\n                                [ngOutletContext]=\"{view: views[2], row: row, col: col}\">\n                                </template>\n                            </td>\n                        <tr>\n                        </tbody>\n                    </table>\n                </ion-slide>\n            </ion-slides>\n            <template [ngTemplateOutlet]=\"monthviewEventDetailTemplate\"\n            [ngOutletContext]=\"{showEventDetail:showEventDetail, selectedDate: selectedDate, noEventsLabel: noEventsLabel}\">\n            </template>\n        </div>\n    ",
-                    styles: ["\n        .text-muted {\n          color: #999;\n        }\n\n        .table-fixed {\n          table-layout: fixed;\n        }\n\n        .table {\n          width: 100%;\n          max-width: 100%;\n          background-color: transparent;\n        }\n\n        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,\n        .table > tbody > tr > td, .table > tfoot > tr > td {\n          padding: 8px;\n          line-height: 20px;\n          vertical-align: top;\n        }\n\n        .table > thead > tr > th {\n          vertical-align: bottom;\n          border-bottom: 2px solid #ddd;\n        }\n\n        .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {\n          border-top: 0\n        }\n\n        .table > tbody + tbody {\n          border-top: 2px solid #ddd;\n        }\n\n        .table-bordered {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,\n        .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {\n          border-bottom-width: 2px;\n        }\n\n        .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {\n          background-color: #f9f9f9\n        }\n\n        .monthview-primary-with-event {\n          background-color: #3a87ad;\n          color: white;\n        }\n\n        .monthview-current {\n          background-color: #f0f0f0;\n        }\n\n        .monthview-selected {\n          background-color: #009900;\n          color: white;\n        }\n\n        .monthview-datetable td.monthview-disabled {\n            color: lightgrey;\n            cursor: default;\n        }\n\n        .monthview-datetable th {\n          text-align: center;\n        }\n\n        .monthview-datetable td {\n          cursor: pointer;\n          text-align: center;\n        }\n\n        .monthview-secondary-with-event {\n          background-color: #d9edf7;\n        }\n\n        ::-webkit-scrollbar,\n        *::-webkit-scrollbar {\n          display: none;\n        }\n    "]
-                },] },
-    ];
-    MonthViewComponent.ctorParameters = [
-        { type: CalendarService, },
-    ];
-    MonthViewComponent.propDecorators = {
-        'slider': [{ type: ViewChild, args: ['monthSlider',] },],
-        'monthviewDisplayEventTemplate': [{ type: Input },],
-        'monthviewInactiveDisplayEventTemplate': [{ type: Input },],
-        'monthviewEventDetailTemplate': [{ type: Input },],
-        'formatDay': [{ type: Input },],
-        'formatDayHeader': [{ type: Input },],
-        'formatMonthTitle': [{ type: Input },],
-        'eventSource': [{ type: Input },],
-        'startingDayMonth': [{ type: Input },],
-        'showEventDetail': [{ type: Input },],
-        'noEventsLabel': [{ type: Input },],
-        'autoSelect': [{ type: Input },],
-        'markDisabled': [{ type: Input },],
-        'locale': [{ type: Input },],
-        'onRangeChanged': [{ type: Output },],
-        'onEventSelected': [{ type: Output },],
-        'onTimeSelected': [{ type: Output },],
-        'onTitleChanged': [{ type: Output },],
-    };
     return MonthViewComponent;
 }());
+export { MonthViewComponent };
+MonthViewComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'monthview',
+                template: "\n        <div>\n            <ion-slides #monthSlider [loop]=\"true\" (ionSlideDidChange)=\"onSlideChanged()\">\n                <ion-slide>\n                    <table *ngIf=\"0===currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr>\n                            <th *ngFor=\"let dayHeader of views[0].dayHeaders\">\n                                <small>{{dayHeader}}</small>\n                            </th>\n                        </tr>\n                        </thead>\n                        <tbody>\n                        <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\n                            <td *ngFor=\"let col of [0,1,2,3,4,5,6]\" tappable (click)=\"select(views[0].dates[row*7+col])\"\n                                [ngClass]=\"getHighlightClass(views[0].dates[row*7+col])\">\n                                <ng-template [ngTemplateOutlet]=\"monthviewDisplayEventTemplate\"\n                                [ngOutletContext]=\"{view: views[0], row: row, col: col}\">\n                                </ng-template>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table *ngIf=\"0!==currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr class=\"text-center\">\n                            <th *ngFor=\"let dayHeader of views[0].dayHeaders\">\n                                <small>{{dayHeader}}</small>\n                            </th>\n                        </tr>\n                        </thead>\n                        <tbody>\n                        <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\n                            <td *ngFor=\"let col of [0,1,2,3,4,5,6]\">\n                                <ng-template [ngTemplateOutlet]=\"monthviewInactiveDisplayEventTemplate\"\n                                [ngOutletContext]=\"{view: views[0], row: row, col: col}\">\n                                </ng-template>\n                            </td>\n                        <tr>\n                        </tbody>\n                    </table>\n                </ion-slide>\n                <ion-slide>\n                    <table *ngIf=\"1===currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr>\n                            <th *ngFor=\"let dayHeader of views[1].dayHeaders\">\n                                <small>{{dayHeader}}</small>\n                            </th>\n                        </tr>\n                        </thead>\n                        <tbody>\n                        <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\n                            <td *ngFor=\"let col of [0,1,2,3,4,5,6]\" tappable (click)=\"select(views[1].dates[row*7+col])\"\n                                [ngClass]=\"getHighlightClass(views[1].dates[row*7+col])\">\n                                <ng-template [ngTemplateOutlet]=\"monthviewDisplayEventTemplate\"\n                                [ngOutletContext]=\"{view: views[1], row: row, col: col}\">\n                                </ng-template>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table *ngIf=\"1!==currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr class=\"text-center\">\n                            <th *ngFor=\"let dayHeader of views[1].dayHeaders\">\n                                <small>{{dayHeader}}</small>\n                            </th>\n                        </tr>\n                        </thead>\n                        <tbody>\n                        <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\n                            <td *ngFor=\"let col of [0,1,2,3,4,5,6]\">\n                                <ng-template [ngTemplateOutlet]=\"monthviewInactiveDisplayEventTemplate\"\n                                [ngOutletContext]=\"{view: views[1], row: row, col: col}\">\n                                </ng-template>\n                            </td>\n                        <tr>\n                        </tbody>\n                    </table>\n                </ion-slide>\n                <ion-slide>\n                    <table *ngIf=\"2===currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr>\n                            <th *ngFor=\"let dayHeader of views[2].dayHeaders\">\n                                <small>{{dayHeader}}</small>\n                            </th>\n                        </tr>\n                        </thead>\n                        <tbody>\n                        <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\n                            <td *ngFor=\"let col of [0,1,2,3,4,5,6]\" tappable (click)=\"select(views[2].dates[row*7+col])\"\n                                [ngClass]=\"getHighlightClass(views[2].dates[row*7+col])\">\n                                <ng-template [ngTemplateOutlet]=\"monthviewDisplayEventTemplate\"\n                                [ngOutletContext]=\"{view: views[2], row: row, col: col}\">\n                                </ng-template>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table *ngIf=\"2!==currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr class=\"text-center\">\n                            <th *ngFor=\"let dayHeader of views[2].dayHeaders\">\n                                <small>{{dayHeader}}</small>\n                            </th>\n                        </tr>\n                        </thead>\n                        <tbody>\n                        <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\n                            <td *ngFor=\"let col of [0,1,2,3,4,5,6]\">\n                                <ng-template [ngTemplateOutlet]=\"monthviewInactiveDisplayEventTemplate\"\n                                [ngOutletContext]=\"{view: views[2], row: row, col: col}\">\n                                </ng-template>\n                            </td>\n                        <tr>\n                        </tbody>\n                    </table>\n                </ion-slide>\n            </ion-slides>\n            <ng-template [ngTemplateOutlet]=\"monthviewEventDetailTemplate\"\n            [ngOutletContext]=\"{showEventDetail:showEventDetail, selectedDate: selectedDate, noEventsLabel: noEventsLabel}\">\n            </ng-template>\n        </div>\n    ",
+                styles: ["\n        .text-muted {\n          color: #999;\n        }\n\n        .table-fixed {\n          table-layout: fixed;\n        }\n\n        .table {\n          width: 100%;\n          max-width: 100%;\n          background-color: transparent;\n        }\n\n        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,\n        .table > tbody > tr > td, .table > tfoot > tr > td {\n          padding: 8px;\n          line-height: 20px;\n          vertical-align: top;\n        }\n\n        .table > thead > tr > th {\n          vertical-align: bottom;\n          border-bottom: 2px solid #ddd;\n        }\n\n        .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {\n          border-top: 0\n        }\n\n        .table > tbody + tbody {\n          border-top: 2px solid #ddd;\n        }\n\n        .table-bordered {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,\n        .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {\n          border-bottom-width: 2px;\n        }\n\n        .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {\n          background-color: #f9f9f9\n        }\n\n        .monthview-primary-with-event {\n          background-color: #3a87ad;\n          color: white;\n        }\n\n        .monthview-current {\n          background-color: #f0f0f0;\n        }\n\n        .monthview-selected {\n          background-color: #009900;\n          color: white;\n        }\n\n        .monthview-datetable td.monthview-disabled {\n            color: lightgrey;\n            cursor: default;\n        }\n\n        .monthview-datetable th {\n          text-align: center;\n        }\n\n        .monthview-datetable td {\n          cursor: pointer;\n          text-align: center;\n        }\n\n        .monthview-secondary-with-event {\n          background-color: #d9edf7;\n        }\n\n        ::-webkit-scrollbar,\n        *::-webkit-scrollbar {\n          display: none;\n        }\n    "]
+            },] },
+];
+MonthViewComponent.ctorParameters = function () { return [
+    { type: CalendarService, },
+]; };
+MonthViewComponent.propDecorators = {
+    'slider': [{ type: ViewChild, args: ['monthSlider',] },],
+    'monthviewDisplayEventTemplate': [{ type: Input },],
+    'monthviewInactiveDisplayEventTemplate': [{ type: Input },],
+    'monthviewEventDetailTemplate': [{ type: Input },],
+    'formatDay': [{ type: Input },],
+    'formatDayHeader': [{ type: Input },],
+    'formatMonthTitle': [{ type: Input },],
+    'eventSource': [{ type: Input },],
+    'startingDayMonth': [{ type: Input },],
+    'showEventDetail': [{ type: Input },],
+    'noEventsLabel': [{ type: Input },],
+    'autoSelect': [{ type: Input },],
+    'markDisabled': [{ type: Input },],
+    'locale': [{ type: Input },],
+    'onRangeChanged': [{ type: Output },],
+    'onEventSelected': [{ type: Output },],
+    'onTimeSelected': [{ type: Output },],
+    'onTitleChanged': [{ type: Output },],
+};
 //# sourceMappingURL=monthview.js.map

monthview.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"MonthViewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"monthview","template":"\n        <div>\n            <ion-slides #monthSlider [loop]=\"true\" (ionSlideDidChange)=\"onSlideChanged()\">\n                <ion-slide>\n                    <table *ngIf=\"0===currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr>\n                            <th *ngFor=\"let dayHeader of views[0].dayHeaders\">\n                                <small>{{dayHeader}}</small>\n                            </th>\n                        </tr>\n                        </thead>\n                        <tbody>\n                        <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\n                            <td *ngFor=\"let col of [0,1,2,3,4,5,6]\" tappable (click)=\"select(views[0].dates[row*7+col])\"\n                                [ngClass]=\"getHighlightClass(views[0].dates[row*7+col])\">\n                                <template [ngTemplateOutlet]=\"monthviewDisplayEventTemplate\"\n                                [ngOutletContext]=\"{view: views[0], row: row, col: col}\">\n                                </template>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table *ngIf=\"0!==currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr class=\"text-center\">\n                            <th *ngFor=\"let dayHeader of views[0].dayHeaders\">\n                                <small>{{dayHeader}}</small>\n                            </th>\n                        </tr>\n                        </thead>\n                        <tbody>\n                        <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\n                            <td *ngFor=\"let col of [0,1,2,3,4,5,6]\">\n                                <template [ngTemplateOutlet]=\"monthviewInactiveDisplayEventTemplate\"\n                                [ngOutletContext]=\"{view: views[0], row: row, col: col}\">\n                                </template>\n                            </td>\n                        <tr>\n                        </tbody>\n                    </table>\n                </ion-slide>\n                <ion-slide>\n                    <table *ngIf=\"1===currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr>\n                            <th *ngFor=\"let dayHeader of views[1].dayHeaders\">\n                                <small>{{dayHeader}}</small>\n                            </th>\n                        </tr>\n                        </thead>\n                        <tbody>\n                        <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\n                            <td *ngFor=\"let col of [0,1,2,3,4,5,6]\" tappable (click)=\"select(views[1].dates[row*7+col])\"\n                                [ngClass]=\"getHighlightClass(views[1].dates[row*7+col])\">\n                                <template [ngTemplateOutlet]=\"monthviewDisplayEventTemplate\"\n                                [ngOutletContext]=\"{view: views[1], row: row, col: col}\">\n                                </template>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table *ngIf=\"1!==currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr class=\"text-center\">\n                            <th *ngFor=\"let dayHeader of views[1].dayHeaders\">\n                                <small>{{dayHeader}}</small>\n                            </th>\n                        </tr>\n                        </thead>\n                        <tbody>\n                        <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\n                            <td *ngFor=\"let col of [0,1,2,3,4,5,6]\">\n                                <template [ngTemplateOutlet]=\"monthviewInactiveDisplayEventTemplate\"\n                                [ngOutletContext]=\"{view: views[1], row: row, col: col}\">\n                                </template>\n                            </td>\n                        <tr>\n                        </tbody>\n                    </table>\n                </ion-slide>\n                <ion-slide>\n                    <table *ngIf=\"2===currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr>\n                            <th *ngFor=\"let dayHeader of views[2].dayHeaders\">\n                                <small>{{dayHeader}}</small>\n                            </th>\n                        </tr>\n                        </thead>\n                        <tbody>\n                        <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\n                            <td *ngFor=\"let col of [0,1,2,3,4,5,6]\" tappable (click)=\"select(views[2].dates[row*7+col])\"\n                                [ngClass]=\"getHighlightClass(views[2].dates[row*7+col])\">\n                                <template [ngTemplateOutlet]=\"monthviewDisplayEventTemplate\"\n                                [ngOutletContext]=\"{view: views[2], row: row, col: col}\">\n                                </template>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table *ngIf=\"2!==currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr class=\"text-center\">\n                            <th *ngFor=\"let dayHeader of views[2].dayHeaders\">\n                                <small>{{dayHeader}}</small>\n                            </th>\n                        </tr>\n                        </thead>\n                        <tbody>\n                        <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\n                            <td *ngFor=\"let col of [0,1,2,3,4,5,6]\">\n                                <template [ngTemplateOutlet]=\"monthviewInactiveDisplayEventTemplate\"\n                                [ngOutletContext]=\"{view: views[2], row: row, col: col}\">\n                                </template>\n                            </td>\n                        <tr>\n                        </tbody>\n                    </table>\n                </ion-slide>\n            </ion-slides>\n            <template [ngTemplateOutlet]=\"monthviewEventDetailTemplate\"\n            [ngOutletContext]=\"{showEventDetail:showEventDetail, selectedDate: selectedDate, noEventsLabel: noEventsLabel}\">\n            </template>\n        </div>\n    ","styles":["\n        .text-muted {\n          color: #999;\n        }\n\n        .table-fixed {\n          table-layout: fixed;\n        }\n\n        .table {\n          width: 100%;\n          max-width: 100%;\n          background-color: transparent;\n        }\n\n        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,\n        .table > tbody > tr > td, .table > tfoot > tr > td {\n          padding: 8px;\n          line-height: 20px;\n          vertical-align: top;\n        }\n\n        .table > thead > tr > th {\n          vertical-align: bottom;\n          border-bottom: 2px solid #ddd;\n        }\n\n        .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {\n          border-top: 0\n        }\n\n        .table > tbody + tbody {\n          border-top: 2px solid #ddd;\n        }\n\n        .table-bordered {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,\n        .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {\n          border-bottom-width: 2px;\n        }\n\n        .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {\n          background-color: #f9f9f9\n        }\n\n        .monthview-primary-with-event {\n          background-color: #3a87ad;\n          color: white;\n        }\n\n        .monthview-current {\n          background-color: #f0f0f0;\n        }\n\n        .monthview-selected {\n          background-color: #009900;\n          color: white;\n        }\n\n        .monthview-datetable td.monthview-disabled {\n            color: lightgrey;\n            cursor: default;\n        }\n\n        .monthview-datetable th {\n          text-align: center;\n        }\n\n        .monthview-datetable td {\n          cursor: pointer;\n          text-align: center;\n        }\n\n        .monthview-secondary-with-event {\n          background-color: #d9edf7;\n        }\n\n        ::-webkit-scrollbar,\n        *::-webkit-scrollbar {\n          display: none;\n        }\n    "]}]}],"members":{"slider":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["monthSlider"]}]}],"monthviewDisplayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"monthviewInactiveDisplayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"monthviewEventDetailTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatDay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatDayHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatMonthTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"eventSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"startingDayMonth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showEventDetail":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"noEventsLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"autoSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"markDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"locale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onRangeChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onEventSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onTimeSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onTitleChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./calendar.service","name":"CalendarService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onSlideChanged":[{"__symbolic":"method"}],"move":[{"__symbolic":"method"}],"createDateObject":[{"__symbolic":"method"}],"getViewData":[{"__symbolic":"method"}],"getHighlightClass":[{"__symbolic":"method"}],"getRange":[{"__symbolic":"method"}],"onDataLoaded":[{"__symbolic":"method"}],"refreshView":[{"__symbolic":"method"}],"getTitle":[{"__symbolic":"method"}],"compareEvent":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"slideView":[{"__symbolic":"method"}],"updateCurrentView":[{"__symbolic":"method"}],"eventSelected":[{"__symbolic":"method"}]}}}}
+[{"__symbolic":"module","version":3,"metadata":{"MonthViewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"monthview","template":"\n        <div>\n            <ion-slides #monthSlider [loop]=\"true\" (ionSlideDidChange)=\"onSlideChanged()\">\n                <ion-slide>\n                    <table *ngIf=\"0===currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr>\n                            <th *ngFor=\"let dayHeader of views[0].dayHeaders\">\n                                <small>{{dayHeader}}</small>\n                            </th>\n                        </tr>\n                        </thead>\n                        <tbody>\n                        <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\n                            <td *ngFor=\"let col of [0,1,2,3,4,5,6]\" tappable (click)=\"select(views[0].dates[row*7+col])\"\n                                [ngClass]=\"getHighlightClass(views[0].dates[row*7+col])\">\n                                <ng-template [ngTemplateOutlet]=\"monthviewDisplayEventTemplate\"\n                                [ngOutletContext]=\"{view: views[0], row: row, col: col}\">\n                                </ng-template>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table *ngIf=\"0!==currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr class=\"text-center\">\n                            <th *ngFor=\"let dayHeader of views[0].dayHeaders\">\n                                <small>{{dayHeader}}</small>\n                            </th>\n                        </tr>\n                        </thead>\n                        <tbody>\n                        <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\n                            <td *ngFor=\"let col of [0,1,2,3,4,5,6]\">\n                                <ng-template [ngTemplateOutlet]=\"monthviewInactiveDisplayEventTemplate\"\n                                [ngOutletContext]=\"{view: views[0], row: row, col: col}\">\n                                </ng-template>\n                            </td>\n                        <tr>\n                        </tbody>\n                    </table>\n                </ion-slide>\n                <ion-slide>\n                    <table *ngIf=\"1===currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr>\n                            <th *ngFor=\"let dayHeader of views[1].dayHeaders\">\n                                <small>{{dayHeader}}</small>\n                            </th>\n                        </tr>\n                        </thead>\n                        <tbody>\n                        <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\n                            <td *ngFor=\"let col of [0,1,2,3,4,5,6]\" tappable (click)=\"select(views[1].dates[row*7+col])\"\n                                [ngClass]=\"getHighlightClass(views[1].dates[row*7+col])\">\n                                <ng-template [ngTemplateOutlet]=\"monthviewDisplayEventTemplate\"\n                                [ngOutletContext]=\"{view: views[1], row: row, col: col}\">\n                                </ng-template>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table *ngIf=\"1!==currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr class=\"text-center\">\n                            <th *ngFor=\"let dayHeader of views[1].dayHeaders\">\n                                <small>{{dayHeader}}</small>\n                            </th>\n                        </tr>\n                        </thead>\n                        <tbody>\n                        <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\n                            <td *ngFor=\"let col of [0,1,2,3,4,5,6]\">\n                                <ng-template [ngTemplateOutlet]=\"monthviewInactiveDisplayEventTemplate\"\n                                [ngOutletContext]=\"{view: views[1], row: row, col: col}\">\n                                </ng-template>\n                            </td>\n                        <tr>\n                        </tbody>\n                    </table>\n                </ion-slide>\n                <ion-slide>\n                    <table *ngIf=\"2===currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr>\n                            <th *ngFor=\"let dayHeader of views[2].dayHeaders\">\n                                <small>{{dayHeader}}</small>\n                            </th>\n                        </tr>\n                        </thead>\n                        <tbody>\n                        <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\n                            <td *ngFor=\"let col of [0,1,2,3,4,5,6]\" tappable (click)=\"select(views[2].dates[row*7+col])\"\n                                [ngClass]=\"getHighlightClass(views[2].dates[row*7+col])\">\n                                <ng-template [ngTemplateOutlet]=\"monthviewDisplayEventTemplate\"\n                                [ngOutletContext]=\"{view: views[2], row: row, col: col}\">\n                                </ng-template>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table *ngIf=\"2!==currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr class=\"text-center\">\n                            <th *ngFor=\"let dayHeader of views[2].dayHeaders\">\n                                <small>{{dayHeader}}</small>\n                            </th>\n                        </tr>\n                        </thead>\n                        <tbody>\n                        <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\n                            <td *ngFor=\"let col of [0,1,2,3,4,5,6]\">\n                                <ng-template [ngTemplateOutlet]=\"monthviewInactiveDisplayEventTemplate\"\n                                [ngOutletContext]=\"{view: views[2], row: row, col: col}\">\n                                </ng-template>\n                            </td>\n                        <tr>\n                        </tbody>\n                    </table>\n                </ion-slide>\n            </ion-slides>\n            <ng-template [ngTemplateOutlet]=\"monthviewEventDetailTemplate\"\n            [ngOutletContext]=\"{showEventDetail:showEventDetail, selectedDate: selectedDate, noEventsLabel: noEventsLabel}\">\n            </ng-template>\n        </div>\n    ","styles":["\n        .text-muted {\n          color: #999;\n        }\n\n        .table-fixed {\n          table-layout: fixed;\n        }\n\n        .table {\n          width: 100%;\n          max-width: 100%;\n          background-color: transparent;\n        }\n\n        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,\n        .table > tbody > tr > td, .table > tfoot > tr > td {\n          padding: 8px;\n          line-height: 20px;\n          vertical-align: top;\n        }\n\n        .table > thead > tr > th {\n          vertical-align: bottom;\n          border-bottom: 2px solid #ddd;\n        }\n\n        .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {\n          border-top: 0\n        }\n\n        .table > tbody + tbody {\n          border-top: 2px solid #ddd;\n        }\n\n        .table-bordered {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,\n        .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {\n          border-bottom-width: 2px;\n        }\n\n        .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {\n          background-color: #f9f9f9\n        }\n\n        .monthview-primary-with-event {\n          background-color: #3a87ad;\n          color: white;\n        }\n\n        .monthview-current {\n          background-color: #f0f0f0;\n        }\n\n        .monthview-selected {\n          background-color: #009900;\n          color: white;\n        }\n\n        .monthview-datetable td.monthview-disabled {\n            color: lightgrey;\n            cursor: default;\n        }\n\n        .monthview-datetable th {\n          text-align: center;\n        }\n\n        .monthview-datetable td {\n          cursor: pointer;\n          text-align: center;\n        }\n\n        .monthview-secondary-with-event {\n          background-color: #d9edf7;\n        }\n\n        ::-webkit-scrollbar,\n        *::-webkit-scrollbar {\n          display: none;\n        }\n    "]}]}],"members":{"slider":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["monthSlider"]}]}],"monthviewDisplayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"monthviewInactiveDisplayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"monthviewEventDetailTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatDay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatDayHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatMonthTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"eventSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"startingDayMonth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showEventDetail":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"noEventsLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"autoSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"markDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"locale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onRangeChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onEventSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onTimeSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onTitleChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./calendar.service","name":"CalendarService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onSlideChanged":[{"__symbolic":"method"}],"move":[{"__symbolic":"method"}],"createDateObject":[{"__symbolic":"method"}],"getViewData":[{"__symbolic":"method"}],"getHighlightClass":[{"__symbolic":"method"}],"getRange":[{"__symbolic":"method"}],"onDataLoaded":[{"__symbolic":"method"}],"refreshView":[{"__symbolic":"method"}],"getTitle":[{"__symbolic":"method"}],"compareEvent":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"slideView":[{"__symbolic":"method"}],"updateCurrentView":[{"__symbolic":"method"}],"eventSelected":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"MonthViewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"monthview","template":"\n        <div>\n            <ion-slides #monthSlider [loop]=\"true\" (ionSlideDidChange)=\"onSlideChanged()\">\n                <ion-slide>\n                    <table *ngIf=\"0===currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr>\n                            <th *ngFor=\"let dayHeader of views[0].dayHeaders\">\n                                <small>{{dayHeader}}</small>\n                            </th>\n                        </tr>\n                        </thead>\n                        <tbody>\n                        <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\n                            <td *ngFor=\"let col of [0,1,2,3,4,5,6]\" tappable (click)=\"select(views[0].dates[row*7+col])\"\n                                [ngClass]=\"getHighlightClass(views[0].dates[row*7+col])\">\n                                <ng-template [ngTemplateOutlet]=\"monthviewDisplayEventTemplate\"\n                                [ngOutletContext]=\"{view: views[0], row: row, col: col}\">\n                                </ng-template>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table *ngIf=\"0!==currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr class=\"text-center\">\n                            <th *ngFor=\"let dayHeader of views[0].dayHeaders\">\n                                <small>{{dayHeader}}</small>\n                            </th>\n                        </tr>\n                        </thead>\n                        <tbody>\n                        <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\n                            <td *ngFor=\"let col of [0,1,2,3,4,5,6]\">\n                                <ng-template [ngTemplateOutlet]=\"monthviewInactiveDisplayEventTemplate\"\n                                [ngOutletContext]=\"{view: views[0], row: row, col: col}\">\n                                </ng-template>\n                            </td>\n                        <tr>\n                        </tbody>\n                    </table>\n                </ion-slide>\n                <ion-slide>\n                    <table *ngIf=\"1===currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr>\n                            <th *ngFor=\"let dayHeader of views[1].dayHeaders\">\n                                <small>{{dayHeader}}</small>\n                            </th>\n                        </tr>\n                        </thead>\n                        <tbody>\n                        <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\n                            <td *ngFor=\"let col of [0,1,2,3,4,5,6]\" tappable (click)=\"select(views[1].dates[row*7+col])\"\n                                [ngClass]=\"getHighlightClass(views[1].dates[row*7+col])\">\n                                <ng-template [ngTemplateOutlet]=\"monthviewDisplayEventTemplate\"\n                                [ngOutletContext]=\"{view: views[1], row: row, col: col}\">\n                                </ng-template>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table *ngIf=\"1!==currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr class=\"text-center\">\n                            <th *ngFor=\"let dayHeader of views[1].dayHeaders\">\n                                <small>{{dayHeader}}</small>\n                            </th>\n                        </tr>\n                        </thead>\n                        <tbody>\n                        <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\n                            <td *ngFor=\"let col of [0,1,2,3,4,5,6]\">\n                                <ng-template [ngTemplateOutlet]=\"monthviewInactiveDisplayEventTemplate\"\n                                [ngOutletContext]=\"{view: views[1], row: row, col: col}\">\n                                </ng-template>\n                            </td>\n                        <tr>\n                        </tbody>\n                    </table>\n                </ion-slide>\n                <ion-slide>\n                    <table *ngIf=\"2===currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr>\n                            <th *ngFor=\"let dayHeader of views[2].dayHeaders\">\n                                <small>{{dayHeader}}</small>\n                            </th>\n                        </tr>\n                        </thead>\n                        <tbody>\n                        <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\n                            <td *ngFor=\"let col of [0,1,2,3,4,5,6]\" tappable (click)=\"select(views[2].dates[row*7+col])\"\n                                [ngClass]=\"getHighlightClass(views[2].dates[row*7+col])\">\n                                <ng-template [ngTemplateOutlet]=\"monthviewDisplayEventTemplate\"\n                                [ngOutletContext]=\"{view: views[2], row: row, col: col}\">\n                                </ng-template>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table *ngIf=\"2!==currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr class=\"text-center\">\n                            <th *ngFor=\"let dayHeader of views[2].dayHeaders\">\n                                <small>{{dayHeader}}</small>\n                            </th>\n                        </tr>\n                        </thead>\n                        <tbody>\n                        <tr *ngFor=\"let row of [0,1,2,3,4,5]\">\n                            <td *ngFor=\"let col of [0,1,2,3,4,5,6]\">\n                                <ng-template [ngTemplateOutlet]=\"monthviewInactiveDisplayEventTemplate\"\n                                [ngOutletContext]=\"{view: views[2], row: row, col: col}\">\n                                </ng-template>\n                            </td>\n                        <tr>\n                        </tbody>\n                    </table>\n                </ion-slide>\n            </ion-slides>\n            <ng-template [ngTemplateOutlet]=\"monthviewEventDetailTemplate\"\n            [ngOutletContext]=\"{showEventDetail:showEventDetail, selectedDate: selectedDate, noEventsLabel: noEventsLabel}\">\n            </ng-template>\n        </div>\n    ","styles":["\n        .text-muted {\n          color: #999;\n        }\n\n        .table-fixed {\n          table-layout: fixed;\n        }\n\n        .table {\n          width: 100%;\n          max-width: 100%;\n          background-color: transparent;\n        }\n\n        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,\n        .table > tbody > tr > td, .table > tfoot > tr > td {\n          padding: 8px;\n          line-height: 20px;\n          vertical-align: top;\n        }\n\n        .table > thead > tr > th {\n          vertical-align: bottom;\n          border-bottom: 2px solid #ddd;\n        }\n\n        .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {\n          border-top: 0\n        }\n\n        .table > tbody + tbody {\n          border-top: 2px solid #ddd;\n        }\n\n        .table-bordered {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,\n        .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {\n          border-bottom-width: 2px;\n        }\n\n        .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {\n          background-color: #f9f9f9\n        }\n\n        .monthview-primary-with-event {\n          background-color: #3a87ad;\n          color: white;\n        }\n\n        .monthview-current {\n          background-color: #f0f0f0;\n        }\n\n        .monthview-selected {\n          background-color: #009900;\n          color: white;\n        }\n\n        .monthview-datetable td.monthview-disabled {\n            color: lightgrey;\n            cursor: default;\n        }\n\n        .monthview-datetable th {\n          text-align: center;\n        }\n\n        .monthview-datetable td {\n          cursor: pointer;\n          text-align: center;\n        }\n\n        .monthview-secondary-with-event {\n          background-color: #d9edf7;\n        }\n\n        ::-webkit-scrollbar,\n        *::-webkit-scrollbar {\n          display: none;\n        }\n    "]}]}],"members":{"slider":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["monthSlider"]}]}],"monthviewDisplayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"monthviewInactiveDisplayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"monthviewEventDetailTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatDay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatDayHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatMonthTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"eventSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"startingDayMonth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showEventDetail":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"noEventsLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"autoSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"markDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"locale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onRangeChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onEventSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onTimeSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onTitleChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./calendar.service","name":"CalendarService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onSlideChanged":[{"__symbolic":"method"}],"move":[{"__symbolic":"method"}],"createDateObject":[{"__symbolic":"method"}],"getViewData":[{"__symbolic":"method"}],"getHighlightClass":[{"__symbolic":"method"}],"getRange":[{"__symbolic":"method"}],"onDataLoaded":[{"__symbolic":"method"}],"refreshView":[{"__symbolic":"method"}],"getTitle":[{"__symbolic":"method"}],"compareEvent":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"slideView":[{"__symbolic":"method"}],"updateCurrentView":[{"__symbolic":"method"}],"eventSelected":[{"__symbolic":"method"}]}}}}]

package.json

 {
     "name": "ionic2-calendar",
-    "version": "0.2.5",
+    "version": "0.3.0",
     "description": "Ionic2 calendar component",
@@ -18,8 +18,7 @@ "keywords": [
     "scripts": {
-        "build": "rm -rf dist && tsc && npm run copy_package",
+        "build": "rm -rf dist && tsc && cp package.json dist/package.json",
         "build-prod": "rm -rf aot && node_modules/.bin/ngc -p tsconfig-aot.json && node_modules/.bin/ngc src && mv src/*ngfactory.ts aot && rm -r aot/waste",
         "copy_static_files": "cp -r package.json README.md LICENSE tsconfig.json typings.json typings dist/",
         "copy_static_files_prod": "cp -r package.json README.md LICENSE tsconfig.json typings.json typings aot/",
-        "dev": "tsc --watch",
-        "postinstall": "typings install"
+        "dev": "tsc --watch"
     },
@@ -29,19 +28,17 @@ "main": "./index.js",
     "devDependencies": {
-        "tslint-ionic-rules": "0.0.5",
-        "typescript": "2.0.3",
-        "typings": "1.3.1",
-        "@angular/common": "2.2.1",
-        "@angular/compiler": "2.2.1",
-        "@angular/compiler-cli": "2.2.1",
-        "@angular/core": "2.2.1",
-        "@angular/forms": "2.2.1",
-        "@angular/http": "2.2.1",
-        "@angular/platform-browser": "2.2.1",
-        "@angular/platform-browser-dynamic": "2.2.1",
-        "@angular/platform-server": "2.2.1",
-        "ionic-angular": "2.1.0",
-        "rxjs": "5.0.0-beta.12",
-        "zone.js": "0.6.26",
+        "tslint-ionic-rules": "0.0.8",
+        "typescript": "~2.2.1",
+        "@angular/common": "4.0.2",
+        "@angular/compiler": "4.0.2",
+        "@angular/compiler-cli": "4.0.2",
+        "@angular/core": "4.0.2",
+        "@angular/forms": "4.0.2",
+        "@angular/http": "4.0.2",
+        "@angular/platform-browser": "4.0.2",
+        "@angular/platform-browser-dynamic": "4.0.2",
+        "ionic-angular": "3.1.1",
+        "rxjs": "5.1.1",
+        "zone.js": "^0.8.5",
         "intl": "^1.2.5"
     }
 }

tsconfig.json

@@ -12,3 +12,7 @@ {
     "sourceMap": true,
-    "target": "es5"
+    "target": "es5",
+    "lib": [
+        "dom",
+        "es2015"
+    ]
   },
@@ -22,4 +26,3 @@ "files": [
     "src/weekview.ts",
-    "src/dayview.ts",
-    "typings/globals/es6-shim/index.d.ts"
+    "src/dayview.ts"
   ],
@@ -26,0 +29,0 @@ "exclude": [

weekview.js

 import { DatePipe } from '@angular/common';
 import { Component, HostBinding, Input, Output, EventEmitter, ViewChild, ViewEncapsulation } from '@angular/core';
 import { CalendarService } from './calendar.service';
-export var WeekViewComponent = (function () {
+var WeekViewComponent = (function () {
     function WeekViewComponent(calendarService) {
@@ -407,34 +407,35 @@ this.calendarService = calendarService;
     };
-    WeekViewComponent.decorators = [
-        { type: Component, args: [{
-                    selector: 'weekview',
-                    template: "\n        <ion-slides #weekSlider [loop]=\"true\" (ionSlideDidChange)=\"onSlideChanged()\">\n            <ion-slide>\n                <table class=\"table table-bordered table-fixed weekview-header\">\n                    <thead>\n                    <tr>\n                        <th class=\"calendar-hour-column\"></th>\n                        <th class=\"weekview-header text-center\" *ngFor=\"let dayHeader of views[0].dayHeaders\">{{dayHeader}}\n                        </th>\n                    </tr>\n                    </thead>\n                </table>\n                <div *ngIf=\"0===currentViewIndex\">\n                    <div class=\"weekview-allday-table\">\n                        <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                            <table class=\"table table-fixed weekview-allday-content-table\">\n                                <tbody>\n                                <tr>\n                                    <td *ngFor=\"let day of views[0].dates\" class=\"calendar-cell\">\n                                        <div [ngClass]=\"{'calendar-event-wrap': day.events}\" *ngIf=\"day.events\"\n                                             [ngStyle]=\"{height: 25*day.events.length+'px'}\">\n                                            <div *ngFor=\"let displayEvent of day.events\" class=\"calendar-event\" tappable\n                                                 (click)=\"eventSelected(displayEvent.event)\"\n                                                 [ngStyle]=\"{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}\">\n                                                <template [ngTemplateOutlet]=\"weekviewAllDayEventTemplate\"\n                                                    [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                                </template>\n                                            </div>\n                                        </div>\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                        <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                            <tbody>\n                            <tr *ngFor=\"let row of views[0].rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{row[0].time | date: formatHourColumn}}\n                                </td>\n                                <td *ngFor=\"let tm of row\" class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n                                    <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                        <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n                                             (click)=\"eventSelected(displayEvent.event)\"\n                                             [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n                                             <template [ngTemplateOutlet]=\"weekviewNormalEventTemplate\"\n                                                 [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                             </template>\n                                        </div>\n                                    </div>\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n                <div *ngIf=\"0!==currentViewIndex\">\n                    <div class=\"weekview-allday-table\">\n                        <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                            <table class=\"table table-fixed weekview-allday-content-table\">\n                                <tbody>\n                                <tr>\n                                    <td *ngFor=\"let day of views[0].dates\" class=\"calendar-cell\">\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                        <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                            <tbody>\n                            <tr *ngFor=\"let row of views[0].rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{row[0].time | date: formatHourColumn}}\n                                </td>\n                                <td *ngFor=\"let tm of row\" class=\"calendar-cell\">\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n            </ion-slide>\n            <ion-slide>\n                <table class=\"table table-bordered table-fixed weekview-header\">\n                    <thead>\n                    <tr>\n                        <th class=\"calendar-hour-column\"></th>\n                        <th class=\"weekview-header text-center\" *ngFor=\"let dayHeader of views[1].dayHeaders\">{{dayHeader}}\n                        </th>\n                    </tr>\n                    </thead>\n                </table>\n                <div *ngIf=\"1===currentViewIndex\">\n                    <div class=\"weekview-allday-table\">\n                        <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                            <table class=\"table table-fixed weekview-allday-content-table\">\n                                <tbody>\n                                <tr>\n                                    <td *ngFor=\"let day of views[1].dates\" class=\"calendar-cell\">\n                                        <div [ngClass]=\"{'calendar-event-wrap': day.events}\" *ngIf=\"day.events\"\n                                             [ngStyle]=\"{height: 25*day.events.length+'px'}\">\n                                            <div *ngFor=\"let displayEvent of day.events\" class=\"calendar-event\" tappable\n                                                 (click)=\"eventSelected(displayEvent.event)\"\n                                                 [ngStyle]=\"{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}\">\n                                                <template [ngTemplateOutlet]=\"weekviewAllDayEventTemplate\"\n                                                    [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                                </template>\n                                            </div>\n                                        </div>\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                        <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                            <tbody>\n                            <tr *ngFor=\"let row of views[1].rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{row[0].time | date: formatHourColumn}}\n                                </td>\n                                <td *ngFor=\"let tm of row\" class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n                                    <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                        <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n                                             (click)=\"eventSelected(displayEvent.event)\"\n                                             [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n                                             <template [ngTemplateOutlet]=\"weekviewNormalEventTemplate\"\n                                                 [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                             </template>\n                                        </div>\n                                    </div>\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n                <div *ngIf=\"1!==currentViewIndex\">\n                    <div class=\"weekview-allday-table\">\n                        <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                            <table class=\"table table-fixed weekview-allday-content-table\">\n                                <tbody>\n                                <tr>\n                                    <td *ngFor=\"let day of views[1].dates\" class=\"calendar-cell\">\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                        <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                            <tbody>\n                            <tr *ngFor=\"let row of views[1].rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{row[0].time | date: formatHourColumn}}\n                                </td>\n                                <td *ngFor=\"let tm of row\" class=\"calendar-cell\">\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n            </ion-slide>\n            <ion-slide>\n                <table class=\"table table-bordered table-fixed weekview-header\">\n                    <thead>\n                    <tr>\n                        <th class=\"calendar-hour-column\"></th>\n                        <th class=\"weekview-header text-center\" *ngFor=\"let dayHeader of views[2].dayHeaders\">{{dayHeader}}\n                        </th>\n                    </tr>\n                    </thead>\n                </table>\n                <div *ngIf=\"2===currentViewIndex\">\n                    <div class=\"weekview-allday-table\">\n                        <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                            <table class=\"table table-fixed weekview-allday-content-table\">\n                                <tbody>\n                                <tr>\n                                    <td *ngFor=\"let day of views[2].dates\" class=\"calendar-cell\">\n                                        <div [ngClass]=\"{'calendar-event-wrap': day.events}\" *ngIf=\"day.events\"\n                                             [ngStyle]=\"{height: 25*day.events.length+'px'}\">\n                                            <div *ngFor=\"let displayEvent of day.events\" class=\"calendar-event\" tappable\n                                                 (click)=\"eventSelected(displayEvent.event)\"\n                                                 [ngStyle]=\"{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}\">\n                                                <template [ngTemplateOutlet]=\"weekviewAllDayEventTemplate\"\n                                                    [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                                </template>\n                                            </div>\n                                        </div>\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                        <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                            <tbody>\n                            <tr *ngFor=\"let row of views[2].rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{row[0].time | date: formatHourColumn}}\n                                </td>\n                                <td *ngFor=\"let tm of row\" class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n                                    <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                        <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n                                             (click)=\"eventSelected(displayEvent.event)\"\n                                             [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n                                             <template [ngTemplateOutlet]=\"weekviewNormalEventTemplate\"\n                                                 [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                             </template>\n                                        </div>\n                                    </div>\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n                <div *ngIf=\"2!==currentViewIndex\">\n                    <div class=\"weekview-allday-table\">\n                        <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                            <table class=\"table table-fixed weekview-allday-content-table\">\n                                <tbody>\n                                <tr>\n                                    <td *ngFor=\"let day of views[2].dates\" class=\"calendar-cell\">\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                        <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                            <tbody>\n                            <tr *ngFor=\"let row of views[2].rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{row[0].time | date: formatHourColumn}}\n                                </td>\n                                <td *ngFor=\"let tm of row\" class=\"calendar-cell\">\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n            </ion-slide>\n        </ion-slides>\n    ",
-                    styles: ["\n        .table-fixed {\n          table-layout: fixed;\n        }\n\n        .table {\n          width: 100%;\n          max-width: 100%;\n          background-color: transparent;\n        }\n\n        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,\n        .table > tbody > tr > td, .table > tfoot > tr > td {\n          padding: 8px;\n          line-height: 20px;\n          vertical-align: top;\n        }\n\n        .table > thead > tr > th {\n          vertical-align: bottom;\n          border-bottom: 2px solid #ddd;\n        }\n\n        .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {\n          border-top: 0\n        }\n\n        .table > tbody + tbody {\n          border-top: 2px solid #ddd;\n        }\n\n        .table-bordered {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,\n        .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {\n          border-bottom-width: 2px;\n        }\n\n        .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {\n          background-color: #f9f9f9\n        }\n\n        .calendar-hour-column {\n          width: 50px;\n          white-space: nowrap;\n        }\n\n        .calendar-event-wrap {\n          position: relative;\n          width: 100%;\n          height: 100%;\n        }\n\n        .calendar-event {\n          position: absolute;\n          padding: 2px;\n          cursor: pointer;\n          z-index: 10000;\n        }\n\n        .calendar-cell {\n          padding: 0 !important;\n          height: 37px;\n        }\n\n        .weekview-allday-label {\n          float: left;\n          height: 100%;\n          line-height: 50px;\n          text-align: center;\n          width: 50px;\n        }\n\n        .weekview-allday-content-wrapper {\n          margin-left: 50px;\n          overflow: hidden;\n          height: 51px;\n        }\n\n        .weekview-allday-content-table {\n          min-height: 50px;\n        }\n\n        .weekview-allday-content-table td {\n          border-left: 1px solid #ddd;\n          border-right: 1px solid #ddd;\n        }\n\n        .weekview-header th {\n          overflow: hidden;\n          white-space: nowrap;\n          font-size: 14px;\n        }\n\n        .weekview-allday-table {\n          height: 50px;\n          position: relative;\n          border-bottom: 1px solid #ddd;\n          font-size: 14px;\n        }\n\n        .weekview-normal-event-container {\n          margin-top: 87px;\n          overflow: hidden;\n          left: 0;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          position: absolute;\n          font-size: 14px;\n        }\n\n        .weekview .slide-zoom {\n          height: 100%;\n        }\n\n        .weekview-allday-content-wrapper scroll-content {\n          width: 100%;\n        }\n\n        ::-webkit-scrollbar,\n        *::-webkit-scrollbar {\n          display: none;\n        }\n\n        .table > tbody > tr > td.calendar-hour-column {\n          padding-left: 0;\n          padding-right: 0;\n          vertical-align: middle;\n        }\n\n        @media (max-width: 750px) {\n          .weekview-allday-label, .calendar-hour-column {\n            width: 31px;\n            font-size: 12px;\n          }\n\n          .weekview-allday-label {\n            padding-top: 4px;\n          }\n\n          .table > tbody > tr > td.calendar-hour-column {\n            padding-left: 0;\n            padding-right: 0;\n            vertical-align: middle;\n            line-height: 12px;\n          }\n\n          .table > thead > tr > th.weekview-header {\n            padding-left: 0;\n            padding-right: 0;\n            font-size: 12px;\n          }\n\n          .weekview-allday-label {\n            line-height: 20px;\n          }\n\n          .weekview-allday-content-wrapper {\n            margin-left: 31px;\n          }\n        }\n    "],
-                    encapsulation: ViewEncapsulation.None
-                },] },
-    ];
-    WeekViewComponent.ctorParameters = [
-        { type: CalendarService, },
-    ];
-    WeekViewComponent.propDecorators = {
-        'slider': [{ type: ViewChild, args: ['weekSlider',] },],
-        'class': [{ type: HostBinding, args: ['class.weekview',] },],
-        'weekviewAllDayEventTemplate': [{ type: Input },],
-        'weekviewNormalEventTemplate': [{ type: Input },],
-        'formatWeekTitle': [{ type: Input },],
-        'formatWeekViewDayHeader': [{ type: Input },],
-        'formatHourColumn': [{ type: Input },],
-        'startingDayWeek': [{ type: Input },],
-        'allDayLabel': [{ type: Input },],
-        'hourParts': [{ type: Input },],
-        'eventSource': [{ type: Input },],
-        'markDisabled': [{ type: Input },],
-        'locale': [{ type: Input },],
-        'onRangeChanged': [{ type: Output },],
-        'onEventSelected': [{ type: Output },],
-        'onTimeSelected': [{ type: Output },],
-        'onTitleChanged': [{ type: Output },],
-    };
     return WeekViewComponent;
 }());
+export { WeekViewComponent };
+WeekViewComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'weekview',
+                template: "\n        <ion-slides #weekSlider [loop]=\"true\" (ionSlideDidChange)=\"onSlideChanged()\">\n            <ion-slide>\n                <table class=\"table table-bordered table-fixed weekview-header\">\n                    <thead>\n                    <tr>\n                        <th class=\"calendar-hour-column\"></th>\n                        <th class=\"weekview-header text-center\" *ngFor=\"let dayHeader of views[0].dayHeaders\">{{dayHeader}}\n                        </th>\n                    </tr>\n                    </thead>\n                </table>\n                <div *ngIf=\"0===currentViewIndex\">\n                    <div class=\"weekview-allday-table\">\n                        <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                            <table class=\"table table-fixed weekview-allday-content-table\">\n                                <tbody>\n                                <tr>\n                                    <td *ngFor=\"let day of views[0].dates\" class=\"calendar-cell\">\n                                        <div [ngClass]=\"{'calendar-event-wrap': day.events}\" *ngIf=\"day.events\"\n                                             [ngStyle]=\"{height: 25*day.events.length+'px'}\">\n                                            <div *ngFor=\"let displayEvent of day.events\" class=\"calendar-event\" tappable\n                                                 (click)=\"eventSelected(displayEvent.event)\"\n                                                 [ngStyle]=\"{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}\">\n                                                <ng-template [ngTemplateOutlet]=\"weekviewAllDayEventTemplate\"\n                                                    [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                                </ng-template>\n                                            </div>\n                                        </div>\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                        <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                            <tbody>\n                            <tr *ngFor=\"let row of views[0].rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{row[0].time | date: formatHourColumn}}\n                                </td>\n                                <td *ngFor=\"let tm of row\" class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n                                    <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                        <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n                                             (click)=\"eventSelected(displayEvent.event)\"\n                                             [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n                                             <ng-template [ngTemplateOutlet]=\"weekviewNormalEventTemplate\"\n                                                 [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                             </ng-template>\n                                        </div>\n                                    </div>\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n                <div *ngIf=\"0!==currentViewIndex\">\n                    <div class=\"weekview-allday-table\">\n                        <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                            <table class=\"table table-fixed weekview-allday-content-table\">\n                                <tbody>\n                                <tr>\n                                    <td *ngFor=\"let day of views[0].dates\" class=\"calendar-cell\">\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                        <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                            <tbody>\n                            <tr *ngFor=\"let row of views[0].rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{row[0].time | date: formatHourColumn}}\n                                </td>\n                                <td *ngFor=\"let tm of row\" class=\"calendar-cell\">\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n            </ion-slide>\n            <ion-slide>\n                <table class=\"table table-bordered table-fixed weekview-header\">\n                    <thead>\n                    <tr>\n                        <th class=\"calendar-hour-column\"></th>\n                        <th class=\"weekview-header text-center\" *ngFor=\"let dayHeader of views[1].dayHeaders\">{{dayHeader}}\n                        </th>\n                    </tr>\n                    </thead>\n                </table>\n                <div *ngIf=\"1===currentViewIndex\">\n                    <div class=\"weekview-allday-table\">\n                        <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                            <table class=\"table table-fixed weekview-allday-content-table\">\n                                <tbody>\n                                <tr>\n                                    <td *ngFor=\"let day of views[1].dates\" class=\"calendar-cell\">\n                                        <div [ngClass]=\"{'calendar-event-wrap': day.events}\" *ngIf=\"day.events\"\n                                             [ngStyle]=\"{height: 25*day.events.length+'px'}\">\n                                            <div *ngFor=\"let displayEvent of day.events\" class=\"calendar-event\" tappable\n                                                 (click)=\"eventSelected(displayEvent.event)\"\n                                                 [ngStyle]=\"{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}\">\n                                                <ng-template [ngTemplateOutlet]=\"weekviewAllDayEventTemplate\"\n                                                    [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                                </ng-template>\n                                            </div>\n                                        </div>\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                        <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                            <tbody>\n                            <tr *ngFor=\"let row of views[1].rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{row[0].time | date: formatHourColumn}}\n                                </td>\n                                <td *ngFor=\"let tm of row\" class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n                                    <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                        <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n                                             (click)=\"eventSelected(displayEvent.event)\"\n                                             [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n                                             <ng-template [ngTemplateOutlet]=\"weekviewNormalEventTemplate\"\n                                                 [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                             </ng-template>\n                                        </div>\n                                    </div>\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n                <div *ngIf=\"1!==currentViewIndex\">\n                    <div class=\"weekview-allday-table\">\n                        <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                            <table class=\"table table-fixed weekview-allday-content-table\">\n                                <tbody>\n                                <tr>\n                                    <td *ngFor=\"let day of views[1].dates\" class=\"calendar-cell\">\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                        <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                            <tbody>\n                            <tr *ngFor=\"let row of views[1].rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{row[0].time | date: formatHourColumn}}\n                                </td>\n                                <td *ngFor=\"let tm of row\" class=\"calendar-cell\">\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n            </ion-slide>\n            <ion-slide>\n                <table class=\"table table-bordered table-fixed weekview-header\">\n                    <thead>\n                    <tr>\n                        <th class=\"calendar-hour-column\"></th>\n                        <th class=\"weekview-header text-center\" *ngFor=\"let dayHeader of views[2].dayHeaders\">{{dayHeader}}\n                        </th>\n                    </tr>\n                    </thead>\n                </table>\n                <div *ngIf=\"2===currentViewIndex\">\n                    <div class=\"weekview-allday-table\">\n                        <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                            <table class=\"table table-fixed weekview-allday-content-table\">\n                                <tbody>\n                                <tr>\n                                    <td *ngFor=\"let day of views[2].dates\" class=\"calendar-cell\">\n                                        <div [ngClass]=\"{'calendar-event-wrap': day.events}\" *ngIf=\"day.events\"\n                                             [ngStyle]=\"{height: 25*day.events.length+'px'}\">\n                                            <div *ngFor=\"let displayEvent of day.events\" class=\"calendar-event\" tappable\n                                                 (click)=\"eventSelected(displayEvent.event)\"\n                                                 [ngStyle]=\"{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}\">\n                                                <ng-template [ngTemplateOutlet]=\"weekviewAllDayEventTemplate\"\n                                                    [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                                </ng-template>\n                                            </div>\n                                        </div>\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                        <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                            <tbody>\n                            <tr *ngFor=\"let row of views[2].rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{row[0].time | date: formatHourColumn}}\n                                </td>\n                                <td *ngFor=\"let tm of row\" class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n                                    <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                        <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n                                             (click)=\"eventSelected(displayEvent.event)\"\n                                             [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n                                             <ng-template [ngTemplateOutlet]=\"weekviewNormalEventTemplate\"\n                                                 [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                             </ng-template>\n                                        </div>\n                                    </div>\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n                <div *ngIf=\"2!==currentViewIndex\">\n                    <div class=\"weekview-allday-table\">\n                        <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                            <table class=\"table table-fixed weekview-allday-content-table\">\n                                <tbody>\n                                <tr>\n                                    <td *ngFor=\"let day of views[2].dates\" class=\"calendar-cell\">\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                        <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                            <tbody>\n                            <tr *ngFor=\"let row of views[2].rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{row[0].time | date: formatHourColumn}}\n                                </td>\n                                <td *ngFor=\"let tm of row\" class=\"calendar-cell\">\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n            </ion-slide>\n        </ion-slides>\n    ",
+                styles: ["\n        .table-fixed {\n          table-layout: fixed;\n        }\n\n        .table {\n          width: 100%;\n          max-width: 100%;\n          background-color: transparent;\n        }\n\n        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,\n        .table > tbody > tr > td, .table > tfoot > tr > td {\n          padding: 8px;\n          line-height: 20px;\n          vertical-align: top;\n        }\n\n        .table > thead > tr > th {\n          vertical-align: bottom;\n          border-bottom: 2px solid #ddd;\n        }\n\n        .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {\n          border-top: 0\n        }\n\n        .table > tbody + tbody {\n          border-top: 2px solid #ddd;\n        }\n\n        .table-bordered {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,\n        .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {\n          border-bottom-width: 2px;\n        }\n\n        .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {\n          background-color: #f9f9f9\n        }\n\n        .calendar-hour-column {\n          width: 50px;\n          white-space: nowrap;\n        }\n\n        .calendar-event-wrap {\n          position: relative;\n          width: 100%;\n          height: 100%;\n        }\n\n        .calendar-event {\n          position: absolute;\n          padding: 2px;\n          cursor: pointer;\n          z-index: 10000;\n        }\n\n        .calendar-cell {\n          padding: 0 !important;\n          height: 37px;\n        }\n\n        .weekview-allday-label {\n          float: left;\n          height: 100%;\n          line-height: 50px;\n          text-align: center;\n          width: 50px;\n        }\n\n        .weekview-allday-content-wrapper {\n          margin-left: 50px;\n          overflow: hidden;\n          height: 51px;\n        }\n\n        .weekview-allday-content-table {\n          min-height: 50px;\n        }\n\n        .weekview-allday-content-table td {\n          border-left: 1px solid #ddd;\n          border-right: 1px solid #ddd;\n        }\n\n        .weekview-header th {\n          overflow: hidden;\n          white-space: nowrap;\n          font-size: 14px;\n        }\n\n        .weekview-allday-table {\n          height: 50px;\n          position: relative;\n          border-bottom: 1px solid #ddd;\n          font-size: 14px;\n        }\n\n        .weekview-normal-event-container {\n          margin-top: 87px;\n          overflow: hidden;\n          left: 0;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          position: absolute;\n          font-size: 14px;\n        }\n\n        .weekview .slide-zoom {\n          height: 100%;\n        }\n\n        .weekview-allday-content-wrapper scroll-content {\n          width: 100%;\n        }\n\n        ::-webkit-scrollbar,\n        *::-webkit-scrollbar {\n          display: none;\n        }\n\n        .table > tbody > tr > td.calendar-hour-column {\n          padding-left: 0;\n          padding-right: 0;\n          vertical-align: middle;\n        }\n\n        @media (max-width: 750px) {\n          .weekview-allday-label, .calendar-hour-column {\n            width: 31px;\n            font-size: 12px;\n          }\n\n          .weekview-allday-label {\n            padding-top: 4px;\n          }\n\n          .table > tbody > tr > td.calendar-hour-column {\n            padding-left: 0;\n            padding-right: 0;\n            vertical-align: middle;\n            line-height: 12px;\n          }\n\n          .table > thead > tr > th.weekview-header {\n            padding-left: 0;\n            padding-right: 0;\n            font-size: 12px;\n          }\n\n          .weekview-allday-label {\n            line-height: 20px;\n          }\n\n          .weekview-allday-content-wrapper {\n            margin-left: 31px;\n          }\n        }\n    "],
+                encapsulation: ViewEncapsulation.None
+            },] },
+];
+WeekViewComponent.ctorParameters = function () { return [
+    { type: CalendarService, },
+]; };
+WeekViewComponent.propDecorators = {
+    'slider': [{ type: ViewChild, args: ['weekSlider',] },],
+    'class': [{ type: HostBinding, args: ['class.weekview',] },],
+    'weekviewAllDayEventTemplate': [{ type: Input },],
+    'weekviewNormalEventTemplate': [{ type: Input },],
+    'formatWeekTitle': [{ type: Input },],
+    'formatWeekViewDayHeader': [{ type: Input },],
+    'formatHourColumn': [{ type: Input },],
+    'startingDayWeek': [{ type: Input },],
+    'allDayLabel': [{ type: Input },],
+    'hourParts': [{ type: Input },],
+    'eventSource': [{ type: Input },],
+    'markDisabled': [{ type: Input },],
+    'locale': [{ type: Input },],
+    'onRangeChanged': [{ type: Output },],
+    'onEventSelected': [{ type: Output },],
+    'onTimeSelected': [{ type: Output },],
+    'onTitleChanged': [{ type: Output },],
+};
 //# sourceMappingURL=weekview.js.map

weekview.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"WeekViewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"weekview","template":"\n        <ion-slides #weekSlider [loop]=\"true\" (ionSlideDidChange)=\"onSlideChanged()\">\n            <ion-slide>\n                <table class=\"table table-bordered table-fixed weekview-header\">\n                    <thead>\n                    <tr>\n                        <th class=\"calendar-hour-column\"></th>\n                        <th class=\"weekview-header text-center\" *ngFor=\"let dayHeader of views[0].dayHeaders\">{{dayHeader}}\n                        </th>\n                    </tr>\n                    </thead>\n                </table>\n                <div *ngIf=\"0===currentViewIndex\">\n                    <div class=\"weekview-allday-table\">\n                        <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                            <table class=\"table table-fixed weekview-allday-content-table\">\n                                <tbody>\n                                <tr>\n                                    <td *ngFor=\"let day of views[0].dates\" class=\"calendar-cell\">\n                                        <div [ngClass]=\"{'calendar-event-wrap': day.events}\" *ngIf=\"day.events\"\n                                             [ngStyle]=\"{height: 25*day.events.length+'px'}\">\n                                            <div *ngFor=\"let displayEvent of day.events\" class=\"calendar-event\" tappable\n                                                 (click)=\"eventSelected(displayEvent.event)\"\n                                                 [ngStyle]=\"{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}\">\n                                                <template [ngTemplateOutlet]=\"weekviewAllDayEventTemplate\"\n                                                    [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                                </template>\n                                            </div>\n                                        </div>\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                        <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                            <tbody>\n                            <tr *ngFor=\"let row of views[0].rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{row[0].time | date: formatHourColumn}}\n                                </td>\n                                <td *ngFor=\"let tm of row\" class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n                                    <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                        <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n                                             (click)=\"eventSelected(displayEvent.event)\"\n                                             [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n                                             <template [ngTemplateOutlet]=\"weekviewNormalEventTemplate\"\n                                                 [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                             </template>\n                                        </div>\n                                    </div>\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n                <div *ngIf=\"0!==currentViewIndex\">\n                    <div class=\"weekview-allday-table\">\n                        <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                            <table class=\"table table-fixed weekview-allday-content-table\">\n                                <tbody>\n                                <tr>\n                                    <td *ngFor=\"let day of views[0].dates\" class=\"calendar-cell\">\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                        <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                            <tbody>\n                            <tr *ngFor=\"let row of views[0].rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{row[0].time | date: formatHourColumn}}\n                                </td>\n                                <td *ngFor=\"let tm of row\" class=\"calendar-cell\">\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n            </ion-slide>\n            <ion-slide>\n                <table class=\"table table-bordered table-fixed weekview-header\">\n                    <thead>\n                    <tr>\n                        <th class=\"calendar-hour-column\"></th>\n                        <th class=\"weekview-header text-center\" *ngFor=\"let dayHeader of views[1].dayHeaders\">{{dayHeader}}\n                        </th>\n                    </tr>\n                    </thead>\n                </table>\n                <div *ngIf=\"1===currentViewIndex\">\n                    <div class=\"weekview-allday-table\">\n                        <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                            <table class=\"table table-fixed weekview-allday-content-table\">\n                                <tbody>\n                                <tr>\n                                    <td *ngFor=\"let day of views[1].dates\" class=\"calendar-cell\">\n                                        <div [ngClass]=\"{'calendar-event-wrap': day.events}\" *ngIf=\"day.events\"\n                                             [ngStyle]=\"{height: 25*day.events.length+'px'}\">\n                                            <div *ngFor=\"let displayEvent of day.events\" class=\"calendar-event\" tappable\n                                                 (click)=\"eventSelected(displayEvent.event)\"\n                                                 [ngStyle]=\"{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}\">\n                                                <template [ngTemplateOutlet]=\"weekviewAllDayEventTemplate\"\n                                                    [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                                </template>\n                                            </div>\n                                        </div>\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                        <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                            <tbody>\n                            <tr *ngFor=\"let row of views[1].rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{row[0].time | date: formatHourColumn}}\n                                </td>\n                                <td *ngFor=\"let tm of row\" class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n                                    <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                        <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n                                             (click)=\"eventSelected(displayEvent.event)\"\n                                             [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n                                             <template [ngTemplateOutlet]=\"weekviewNormalEventTemplate\"\n                                                 [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                             </template>\n                                        </div>\n                                    </div>\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n                <div *ngIf=\"1!==currentViewIndex\">\n                    <div class=\"weekview-allday-table\">\n                        <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                            <table class=\"table table-fixed weekview-allday-content-table\">\n                                <tbody>\n                                <tr>\n                                    <td *ngFor=\"let day of views[1].dates\" class=\"calendar-cell\">\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                        <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                            <tbody>\n                            <tr *ngFor=\"let row of views[1].rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{row[0].time | date: formatHourColumn}}\n                                </td>\n                                <td *ngFor=\"let tm of row\" class=\"calendar-cell\">\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n            </ion-slide>\n            <ion-slide>\n                <table class=\"table table-bordered table-fixed weekview-header\">\n                    <thead>\n                    <tr>\n                        <th class=\"calendar-hour-column\"></th>\n                        <th class=\"weekview-header text-center\" *ngFor=\"let dayHeader of views[2].dayHeaders\">{{dayHeader}}\n                        </th>\n                    </tr>\n                    </thead>\n                </table>\n                <div *ngIf=\"2===currentViewIndex\">\n                    <div class=\"weekview-allday-table\">\n                        <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                            <table class=\"table table-fixed weekview-allday-content-table\">\n                                <tbody>\n                                <tr>\n                                    <td *ngFor=\"let day of views[2].dates\" class=\"calendar-cell\">\n                                        <div [ngClass]=\"{'calendar-event-wrap': day.events}\" *ngIf=\"day.events\"\n                                             [ngStyle]=\"{height: 25*day.events.length+'px'}\">\n                                            <div *ngFor=\"let displayEvent of day.events\" class=\"calendar-event\" tappable\n                                                 (click)=\"eventSelected(displayEvent.event)\"\n                                                 [ngStyle]=\"{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}\">\n                                                <template [ngTemplateOutlet]=\"weekviewAllDayEventTemplate\"\n                                                    [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                                </template>\n                                            </div>\n                                        </div>\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                        <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                            <tbody>\n                            <tr *ngFor=\"let row of views[2].rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{row[0].time | date: formatHourColumn}}\n                                </td>\n                                <td *ngFor=\"let tm of row\" class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n                                    <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                        <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n                                             (click)=\"eventSelected(displayEvent.event)\"\n                                             [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n                                             <template [ngTemplateOutlet]=\"weekviewNormalEventTemplate\"\n                                                 [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                             </template>\n                                        </div>\n                                    </div>\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n                <div *ngIf=\"2!==currentViewIndex\">\n                    <div class=\"weekview-allday-table\">\n                        <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                            <table class=\"table table-fixed weekview-allday-content-table\">\n                                <tbody>\n                                <tr>\n                                    <td *ngFor=\"let day of views[2].dates\" class=\"calendar-cell\">\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                        <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                            <tbody>\n                            <tr *ngFor=\"let row of views[2].rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{row[0].time | date: formatHourColumn}}\n                                </td>\n                                <td *ngFor=\"let tm of row\" class=\"calendar-cell\">\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n            </ion-slide>\n        </ion-slides>\n    ","styles":["\n        .table-fixed {\n          table-layout: fixed;\n        }\n\n        .table {\n          width: 100%;\n          max-width: 100%;\n          background-color: transparent;\n        }\n\n        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,\n        .table > tbody > tr > td, .table > tfoot > tr > td {\n          padding: 8px;\n          line-height: 20px;\n          vertical-align: top;\n        }\n\n        .table > thead > tr > th {\n          vertical-align: bottom;\n          border-bottom: 2px solid #ddd;\n        }\n\n        .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {\n          border-top: 0\n        }\n\n        .table > tbody + tbody {\n          border-top: 2px solid #ddd;\n        }\n\n        .table-bordered {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,\n        .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {\n          border-bottom-width: 2px;\n        }\n\n        .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {\n          background-color: #f9f9f9\n        }\n\n        .calendar-hour-column {\n          width: 50px;\n          white-space: nowrap;\n        }\n\n        .calendar-event-wrap {\n          position: relative;\n          width: 100%;\n          height: 100%;\n        }\n\n        .calendar-event {\n          position: absolute;\n          padding: 2px;\n          cursor: pointer;\n          z-index: 10000;\n        }\n\n        .calendar-cell {\n          padding: 0 !important;\n          height: 37px;\n        }\n\n        .weekview-allday-label {\n          float: left;\n          height: 100%;\n          line-height: 50px;\n          text-align: center;\n          width: 50px;\n        }\n\n        .weekview-allday-content-wrapper {\n          margin-left: 50px;\n          overflow: hidden;\n          height: 51px;\n        }\n\n        .weekview-allday-content-table {\n          min-height: 50px;\n        }\n\n        .weekview-allday-content-table td {\n          border-left: 1px solid #ddd;\n          border-right: 1px solid #ddd;\n        }\n\n        .weekview-header th {\n          overflow: hidden;\n          white-space: nowrap;\n          font-size: 14px;\n        }\n\n        .weekview-allday-table {\n          height: 50px;\n          position: relative;\n          border-bottom: 1px solid #ddd;\n          font-size: 14px;\n        }\n\n        .weekview-normal-event-container {\n          margin-top: 87px;\n          overflow: hidden;\n          left: 0;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          position: absolute;\n          font-size: 14px;\n        }\n\n        .weekview .slide-zoom {\n          height: 100%;\n        }\n\n        .weekview-allday-content-wrapper scroll-content {\n          width: 100%;\n        }\n\n        ::-webkit-scrollbar,\n        *::-webkit-scrollbar {\n          display: none;\n        }\n\n        .table > tbody > tr > td.calendar-hour-column {\n          padding-left: 0;\n          padding-right: 0;\n          vertical-align: middle;\n        }\n\n        @media (max-width: 750px) {\n          .weekview-allday-label, .calendar-hour-column {\n            width: 31px;\n            font-size: 12px;\n          }\n\n          .weekview-allday-label {\n            padding-top: 4px;\n          }\n\n          .table > tbody > tr > td.calendar-hour-column {\n            padding-left: 0;\n            padding-right: 0;\n            vertical-align: middle;\n            line-height: 12px;\n          }\n\n          .table > thead > tr > th.weekview-header {\n            padding-left: 0;\n            padding-right: 0;\n            font-size: 12px;\n          }\n\n          .weekview-allday-label {\n            line-height: 20px;\n          }\n\n          .weekview-allday-content-wrapper {\n            margin-left: 31px;\n          }\n        }\n    "],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"slider":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["weekSlider"]}]}],"class":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.weekview"]}]}],"weekviewAllDayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekviewNormalEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatWeekTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatWeekViewDayHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatHourColumn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"startingDayWeek":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"allDayLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hourParts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"eventSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"markDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"locale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onRangeChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onEventSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onTimeSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onTitleChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./calendar.service","name":"CalendarService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onSlideChanged":[{"__symbolic":"method"}],"move":[{"__symbolic":"method"}],"getViewData":[{"__symbolic":"method"}],"getRange":[{"__symbolic":"method"}],"onDataLoaded":[{"__symbolic":"method"}],"refreshView":[{"__symbolic":"method"}],"getTitle":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"placeEvents":[{"__symbolic":"method"}],"placeAllDayEvents":[{"__symbolic":"method"}],"overlap":[{"__symbolic":"method"}],"calculatePosition":[{"__symbolic":"method"}],"eventSelected":[{"__symbolic":"method"}]},"statics":{"compareEventByStartOffset":{"__symbolic":"function","parameters":["eventA","eventB"],"value":{"__symbolic":"binop","operator":"-","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"eventA"},"member":"startOffset"},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"eventB"},"member":"startOffset"}}}}}}}
+[{"__symbolic":"module","version":3,"metadata":{"WeekViewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"weekview","template":"\n        <ion-slides #weekSlider [loop]=\"true\" (ionSlideDidChange)=\"onSlideChanged()\">\n            <ion-slide>\n                <table class=\"table table-bordered table-fixed weekview-header\">\n                    <thead>\n                    <tr>\n                        <th class=\"calendar-hour-column\"></th>\n                        <th class=\"weekview-header text-center\" *ngFor=\"let dayHeader of views[0].dayHeaders\">{{dayHeader}}\n                        </th>\n                    </tr>\n                    </thead>\n                </table>\n                <div *ngIf=\"0===currentViewIndex\">\n                    <div class=\"weekview-allday-table\">\n                        <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                            <table class=\"table table-fixed weekview-allday-content-table\">\n                                <tbody>\n                                <tr>\n                                    <td *ngFor=\"let day of views[0].dates\" class=\"calendar-cell\">\n                                        <div [ngClass]=\"{'calendar-event-wrap': day.events}\" *ngIf=\"day.events\"\n                                             [ngStyle]=\"{height: 25*day.events.length+'px'}\">\n                                            <div *ngFor=\"let displayEvent of day.events\" class=\"calendar-event\" tappable\n                                                 (click)=\"eventSelected(displayEvent.event)\"\n                                                 [ngStyle]=\"{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}\">\n                                                <ng-template [ngTemplateOutlet]=\"weekviewAllDayEventTemplate\"\n                                                    [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                                </ng-template>\n                                            </div>\n                                        </div>\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                        <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                            <tbody>\n                            <tr *ngFor=\"let row of views[0].rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{row[0].time | date: formatHourColumn}}\n                                </td>\n                                <td *ngFor=\"let tm of row\" class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n                                    <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                        <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n                                             (click)=\"eventSelected(displayEvent.event)\"\n                                             [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n                                             <ng-template [ngTemplateOutlet]=\"weekviewNormalEventTemplate\"\n                                                 [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                             </ng-template>\n                                        </div>\n                                    </div>\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n                <div *ngIf=\"0!==currentViewIndex\">\n                    <div class=\"weekview-allday-table\">\n                        <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                            <table class=\"table table-fixed weekview-allday-content-table\">\n                                <tbody>\n                                <tr>\n                                    <td *ngFor=\"let day of views[0].dates\" class=\"calendar-cell\">\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                        <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                            <tbody>\n                            <tr *ngFor=\"let row of views[0].rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{row[0].time | date: formatHourColumn}}\n                                </td>\n                                <td *ngFor=\"let tm of row\" class=\"calendar-cell\">\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n            </ion-slide>\n            <ion-slide>\n                <table class=\"table table-bordered table-fixed weekview-header\">\n                    <thead>\n                    <tr>\n                        <th class=\"calendar-hour-column\"></th>\n                        <th class=\"weekview-header text-center\" *ngFor=\"let dayHeader of views[1].dayHeaders\">{{dayHeader}}\n                        </th>\n                    </tr>\n                    </thead>\n                </table>\n                <div *ngIf=\"1===currentViewIndex\">\n                    <div class=\"weekview-allday-table\">\n                        <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                            <table class=\"table table-fixed weekview-allday-content-table\">\n                                <tbody>\n                                <tr>\n                                    <td *ngFor=\"let day of views[1].dates\" class=\"calendar-cell\">\n                                        <div [ngClass]=\"{'calendar-event-wrap': day.events}\" *ngIf=\"day.events\"\n                                             [ngStyle]=\"{height: 25*day.events.length+'px'}\">\n                                            <div *ngFor=\"let displayEvent of day.events\" class=\"calendar-event\" tappable\n                                                 (click)=\"eventSelected(displayEvent.event)\"\n                                                 [ngStyle]=\"{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}\">\n                                                <ng-template [ngTemplateOutlet]=\"weekviewAllDayEventTemplate\"\n                                                    [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                                </ng-template>\n                                            </div>\n                                        </div>\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                        <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                            <tbody>\n                            <tr *ngFor=\"let row of views[1].rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{row[0].time | date: formatHourColumn}}\n                                </td>\n                                <td *ngFor=\"let tm of row\" class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n                                    <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                        <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n                                             (click)=\"eventSelected(displayEvent.event)\"\n                                             [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n                                             <ng-template [ngTemplateOutlet]=\"weekviewNormalEventTemplate\"\n                                                 [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                             </ng-template>\n                                        </div>\n                                    </div>\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n                <div *ngIf=\"1!==currentViewIndex\">\n                    <div class=\"weekview-allday-table\">\n                        <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                            <table class=\"table table-fixed weekview-allday-content-table\">\n                                <tbody>\n                                <tr>\n                                    <td *ngFor=\"let day of views[1].dates\" class=\"calendar-cell\">\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                        <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                            <tbody>\n                            <tr *ngFor=\"let row of views[1].rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{row[0].time | date: formatHourColumn}}\n                                </td>\n                                <td *ngFor=\"let tm of row\" class=\"calendar-cell\">\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n            </ion-slide>\n            <ion-slide>\n                <table class=\"table table-bordered table-fixed weekview-header\">\n                    <thead>\n                    <tr>\n                        <th class=\"calendar-hour-column\"></th>\n                        <th class=\"weekview-header text-center\" *ngFor=\"let dayHeader of views[2].dayHeaders\">{{dayHeader}}\n                        </th>\n                    </tr>\n                    </thead>\n                </table>\n                <div *ngIf=\"2===currentViewIndex\">\n                    <div class=\"weekview-allday-table\">\n                        <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                            <table class=\"table table-fixed weekview-allday-content-table\">\n                                <tbody>\n                                <tr>\n                                    <td *ngFor=\"let day of views[2].dates\" class=\"calendar-cell\">\n                                        <div [ngClass]=\"{'calendar-event-wrap': day.events}\" *ngIf=\"day.events\"\n                                             [ngStyle]=\"{height: 25*day.events.length+'px'}\">\n                                            <div *ngFor=\"let displayEvent of day.events\" class=\"calendar-event\" tappable\n                                                 (click)=\"eventSelected(displayEvent.event)\"\n                                                 [ngStyle]=\"{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}\">\n                                                <ng-template [ngTemplateOutlet]=\"weekviewAllDayEventTemplate\"\n                                                    [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                                </ng-template>\n                                            </div>\n                                        </div>\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                        <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                            <tbody>\n                            <tr *ngFor=\"let row of views[2].rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{row[0].time | date: formatHourColumn}}\n                                </td>\n                                <td *ngFor=\"let tm of row\" class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n                                    <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                        <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n                                             (click)=\"eventSelected(displayEvent.event)\"\n                                             [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n                                             <ng-template [ngTemplateOutlet]=\"weekviewNormalEventTemplate\"\n                                                 [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                             </ng-template>\n                                        </div>\n                                    </div>\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n                <div *ngIf=\"2!==currentViewIndex\">\n                    <div class=\"weekview-allday-table\">\n                        <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                            <table class=\"table table-fixed weekview-allday-content-table\">\n                                <tbody>\n                                <tr>\n                                    <td *ngFor=\"let day of views[2].dates\" class=\"calendar-cell\">\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                        <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                            <tbody>\n                            <tr *ngFor=\"let row of views[2].rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{row[0].time | date: formatHourColumn}}\n                                </td>\n                                <td *ngFor=\"let tm of row\" class=\"calendar-cell\">\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n            </ion-slide>\n        </ion-slides>\n    ","styles":["\n        .table-fixed {\n          table-layout: fixed;\n        }\n\n        .table {\n          width: 100%;\n          max-width: 100%;\n          background-color: transparent;\n        }\n\n        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,\n        .table > tbody > tr > td, .table > tfoot > tr > td {\n          padding: 8px;\n          line-height: 20px;\n          vertical-align: top;\n        }\n\n        .table > thead > tr > th {\n          vertical-align: bottom;\n          border-bottom: 2px solid #ddd;\n        }\n\n        .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {\n          border-top: 0\n        }\n\n        .table > tbody + tbody {\n          border-top: 2px solid #ddd;\n        }\n\n        .table-bordered {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,\n        .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {\n          border-bottom-width: 2px;\n        }\n\n        .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {\n          background-color: #f9f9f9\n        }\n\n        .calendar-hour-column {\n          width: 50px;\n          white-space: nowrap;\n        }\n\n        .calendar-event-wrap {\n          position: relative;\n          width: 100%;\n          height: 100%;\n        }\n\n        .calendar-event {\n          position: absolute;\n          padding: 2px;\n          cursor: pointer;\n          z-index: 10000;\n        }\n\n        .calendar-cell {\n          padding: 0 !important;\n          height: 37px;\n        }\n\n        .weekview-allday-label {\n          float: left;\n          height: 100%;\n          line-height: 50px;\n          text-align: center;\n          width: 50px;\n        }\n\n        .weekview-allday-content-wrapper {\n          margin-left: 50px;\n          overflow: hidden;\n          height: 51px;\n        }\n\n        .weekview-allday-content-table {\n          min-height: 50px;\n        }\n\n        .weekview-allday-content-table td {\n          border-left: 1px solid #ddd;\n          border-right: 1px solid #ddd;\n        }\n\n        .weekview-header th {\n          overflow: hidden;\n          white-space: nowrap;\n          font-size: 14px;\n        }\n\n        .weekview-allday-table {\n          height: 50px;\n          position: relative;\n          border-bottom: 1px solid #ddd;\n          font-size: 14px;\n        }\n\n        .weekview-normal-event-container {\n          margin-top: 87px;\n          overflow: hidden;\n          left: 0;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          position: absolute;\n          font-size: 14px;\n        }\n\n        .weekview .slide-zoom {\n          height: 100%;\n        }\n\n        .weekview-allday-content-wrapper scroll-content {\n          width: 100%;\n        }\n\n        ::-webkit-scrollbar,\n        *::-webkit-scrollbar {\n          display: none;\n        }\n\n        .table > tbody > tr > td.calendar-hour-column {\n          padding-left: 0;\n          padding-right: 0;\n          vertical-align: middle;\n        }\n\n        @media (max-width: 750px) {\n          .weekview-allday-label, .calendar-hour-column {\n            width: 31px;\n            font-size: 12px;\n          }\n\n          .weekview-allday-label {\n            padding-top: 4px;\n          }\n\n          .table > tbody > tr > td.calendar-hour-column {\n            padding-left: 0;\n            padding-right: 0;\n            vertical-align: middle;\n            line-height: 12px;\n          }\n\n          .table > thead > tr > th.weekview-header {\n            padding-left: 0;\n            padding-right: 0;\n            font-size: 12px;\n          }\n\n          .weekview-allday-label {\n            line-height: 20px;\n          }\n\n          .weekview-allday-content-wrapper {\n            margin-left: 31px;\n          }\n        }\n    "],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"slider":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["weekSlider"]}]}],"class":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.weekview"]}]}],"weekviewAllDayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekviewNormalEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatWeekTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatWeekViewDayHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatHourColumn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"startingDayWeek":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"allDayLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hourParts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"eventSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"markDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"locale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onRangeChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onEventSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onTimeSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onTitleChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./calendar.service","name":"CalendarService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onSlideChanged":[{"__symbolic":"method"}],"move":[{"__symbolic":"method"}],"getViewData":[{"__symbolic":"method"}],"getRange":[{"__symbolic":"method"}],"onDataLoaded":[{"__symbolic":"method"}],"refreshView":[{"__symbolic":"method"}],"getTitle":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"placeEvents":[{"__symbolic":"method"}],"placeAllDayEvents":[{"__symbolic":"method"}],"overlap":[{"__symbolic":"method"}],"calculatePosition":[{"__symbolic":"method"}],"eventSelected":[{"__symbolic":"method"}]},"statics":{"compareEventByStartOffset":{"__symbolic":"function","parameters":["eventA","eventB"],"value":{"__symbolic":"binop","operator":"-","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"eventA"},"member":"startOffset"},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"eventB"},"member":"startOffset"}}}}}}},{"__symbolic":"module","version":1,"metadata":{"WeekViewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"weekview","template":"\n        <ion-slides #weekSlider [loop]=\"true\" (ionSlideDidChange)=\"onSlideChanged()\">\n            <ion-slide>\n                <table class=\"table table-bordered table-fixed weekview-header\">\n                    <thead>\n                    <tr>\n                        <th class=\"calendar-hour-column\"></th>\n                        <th class=\"weekview-header text-center\" *ngFor=\"let dayHeader of views[0].dayHeaders\">{{dayHeader}}\n                        </th>\n                    </tr>\n                    </thead>\n                </table>\n                <div *ngIf=\"0===currentViewIndex\">\n                    <div class=\"weekview-allday-table\">\n                        <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                            <table class=\"table table-fixed weekview-allday-content-table\">\n                                <tbody>\n                                <tr>\n                                    <td *ngFor=\"let day of views[0].dates\" class=\"calendar-cell\">\n                                        <div [ngClass]=\"{'calendar-event-wrap': day.events}\" *ngIf=\"day.events\"\n                                             [ngStyle]=\"{height: 25*day.events.length+'px'}\">\n                                            <div *ngFor=\"let displayEvent of day.events\" class=\"calendar-event\" tappable\n                                                 (click)=\"eventSelected(displayEvent.event)\"\n                                                 [ngStyle]=\"{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}\">\n                                                <ng-template [ngTemplateOutlet]=\"weekviewAllDayEventTemplate\"\n                                                    [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                                </ng-template>\n                                            </div>\n                                        </div>\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                        <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                            <tbody>\n                            <tr *ngFor=\"let row of views[0].rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{row[0].time | date: formatHourColumn}}\n                                </td>\n                                <td *ngFor=\"let tm of row\" class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n                                    <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                        <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n                                             (click)=\"eventSelected(displayEvent.event)\"\n                                             [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n                                             <ng-template [ngTemplateOutlet]=\"weekviewNormalEventTemplate\"\n                                                 [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                             </ng-template>\n                                        </div>\n                                    </div>\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n                <div *ngIf=\"0!==currentViewIndex\">\n                    <div class=\"weekview-allday-table\">\n                        <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                            <table class=\"table table-fixed weekview-allday-content-table\">\n                                <tbody>\n                                <tr>\n                                    <td *ngFor=\"let day of views[0].dates\" class=\"calendar-cell\">\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                        <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                            <tbody>\n                            <tr *ngFor=\"let row of views[0].rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{row[0].time | date: formatHourColumn}}\n                                </td>\n                                <td *ngFor=\"let tm of row\" class=\"calendar-cell\">\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n            </ion-slide>\n            <ion-slide>\n                <table class=\"table table-bordered table-fixed weekview-header\">\n                    <thead>\n                    <tr>\n                        <th class=\"calendar-hour-column\"></th>\n                        <th class=\"weekview-header text-center\" *ngFor=\"let dayHeader of views[1].dayHeaders\">{{dayHeader}}\n                        </th>\n                    </tr>\n                    </thead>\n                </table>\n                <div *ngIf=\"1===currentViewIndex\">\n                    <div class=\"weekview-allday-table\">\n                        <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                            <table class=\"table table-fixed weekview-allday-content-table\">\n                                <tbody>\n                                <tr>\n                                    <td *ngFor=\"let day of views[1].dates\" class=\"calendar-cell\">\n                                        <div [ngClass]=\"{'calendar-event-wrap': day.events}\" *ngIf=\"day.events\"\n                                             [ngStyle]=\"{height: 25*day.events.length+'px'}\">\n                                            <div *ngFor=\"let displayEvent of day.events\" class=\"calendar-event\" tappable\n                                                 (click)=\"eventSelected(displayEvent.event)\"\n                                                 [ngStyle]=\"{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}\">\n                                                <ng-template [ngTemplateOutlet]=\"weekviewAllDayEventTemplate\"\n                                                    [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                                </ng-template>\n                                            </div>\n                                        </div>\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                        <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                            <tbody>\n                            <tr *ngFor=\"let row of views[1].rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{row[0].time | date: formatHourColumn}}\n                                </td>\n                                <td *ngFor=\"let tm of row\" class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n                                    <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                        <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n                                             (click)=\"eventSelected(displayEvent.event)\"\n                                             [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n                                             <ng-template [ngTemplateOutlet]=\"weekviewNormalEventTemplate\"\n                                                 [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                             </ng-template>\n                                        </div>\n                                    </div>\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n                <div *ngIf=\"1!==currentViewIndex\">\n                    <div class=\"weekview-allday-table\">\n                        <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                            <table class=\"table table-fixed weekview-allday-content-table\">\n                                <tbody>\n                                <tr>\n                                    <td *ngFor=\"let day of views[1].dates\" class=\"calendar-cell\">\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                        <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                            <tbody>\n                            <tr *ngFor=\"let row of views[1].rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{row[0].time | date: formatHourColumn}}\n                                </td>\n                                <td *ngFor=\"let tm of row\" class=\"calendar-cell\">\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n            </ion-slide>\n            <ion-slide>\n                <table class=\"table table-bordered table-fixed weekview-header\">\n                    <thead>\n                    <tr>\n                        <th class=\"calendar-hour-column\"></th>\n                        <th class=\"weekview-header text-center\" *ngFor=\"let dayHeader of views[2].dayHeaders\">{{dayHeader}}\n                        </th>\n                    </tr>\n                    </thead>\n                </table>\n                <div *ngIf=\"2===currentViewIndex\">\n                    <div class=\"weekview-allday-table\">\n                        <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                            <table class=\"table table-fixed weekview-allday-content-table\">\n                                <tbody>\n                                <tr>\n                                    <td *ngFor=\"let day of views[2].dates\" class=\"calendar-cell\">\n                                        <div [ngClass]=\"{'calendar-event-wrap': day.events}\" *ngIf=\"day.events\"\n                                             [ngStyle]=\"{height: 25*day.events.length+'px'}\">\n                                            <div *ngFor=\"let displayEvent of day.events\" class=\"calendar-event\" tappable\n                                                 (click)=\"eventSelected(displayEvent.event)\"\n                                                 [ngStyle]=\"{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}\">\n                                                <ng-template [ngTemplateOutlet]=\"weekviewAllDayEventTemplate\"\n                                                    [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                                </ng-template>\n                                            </div>\n                                        </div>\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                        <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                            <tbody>\n                            <tr *ngFor=\"let row of views[2].rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{row[0].time | date: formatHourColumn}}\n                                </td>\n                                <td *ngFor=\"let tm of row\" class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n                                    <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                        <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n                                             (click)=\"eventSelected(displayEvent.event)\"\n                                             [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n                                             <ng-template [ngTemplateOutlet]=\"weekviewNormalEventTemplate\"\n                                                 [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                             </ng-template>\n                                        </div>\n                                    </div>\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n                <div *ngIf=\"2!==currentViewIndex\">\n                    <div class=\"weekview-allday-table\">\n                        <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                            <table class=\"table table-fixed weekview-allday-content-table\">\n                                <tbody>\n                                <tr>\n                                    <td *ngFor=\"let day of views[2].dates\" class=\"calendar-cell\">\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                        <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                            <tbody>\n                            <tr *ngFor=\"let row of views[2].rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{row[0].time | date: formatHourColumn}}\n                                </td>\n                                <td *ngFor=\"let tm of row\" class=\"calendar-cell\">\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n            </ion-slide>\n        </ion-slides>\n    ","styles":["\n        .table-fixed {\n          table-layout: fixed;\n        }\n\n        .table {\n          width: 100%;\n          max-width: 100%;\n          background-color: transparent;\n        }\n\n        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,\n        .table > tbody > tr > td, .table > tfoot > tr > td {\n          padding: 8px;\n          line-height: 20px;\n          vertical-align: top;\n        }\n\n        .table > thead > tr > th {\n          vertical-align: bottom;\n          border-bottom: 2px solid #ddd;\n        }\n\n        .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {\n          border-top: 0\n        }\n\n        .table > tbody + tbody {\n          border-top: 2px solid #ddd;\n        }\n\n        .table-bordered {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,\n        .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {\n          border-bottom-width: 2px;\n        }\n\n        .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {\n          background-color: #f9f9f9\n        }\n\n        .calendar-hour-column {\n          width: 50px;\n          white-space: nowrap;\n        }\n\n        .calendar-event-wrap {\n          position: relative;\n          width: 100%;\n          height: 100%;\n        }\n\n        .calendar-event {\n          position: absolute;\n          padding: 2px;\n          cursor: pointer;\n          z-index: 10000;\n        }\n\n        .calendar-cell {\n          padding: 0 !important;\n          height: 37px;\n        }\n\n        .weekview-allday-label {\n          float: left;\n          height: 100%;\n          line-height: 50px;\n          text-align: center;\n          width: 50px;\n        }\n\n        .weekview-allday-content-wrapper {\n          margin-left: 50px;\n          overflow: hidden;\n          height: 51px;\n        }\n\n        .weekview-allday-content-table {\n          min-height: 50px;\n        }\n\n        .weekview-allday-content-table td {\n          border-left: 1px solid #ddd;\n          border-right: 1px solid #ddd;\n        }\n\n        .weekview-header th {\n          overflow: hidden;\n          white-space: nowrap;\n          font-size: 14px;\n        }\n\n        .weekview-allday-table {\n          height: 50px;\n          position: relative;\n          border-bottom: 1px solid #ddd;\n          font-size: 14px;\n        }\n\n        .weekview-normal-event-container {\n          margin-top: 87px;\n          overflow: hidden;\n          left: 0;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          position: absolute;\n          font-size: 14px;\n        }\n\n        .weekview .slide-zoom {\n          height: 100%;\n        }\n\n        .weekview-allday-content-wrapper scroll-content {\n          width: 100%;\n        }\n\n        ::-webkit-scrollbar,\n        *::-webkit-scrollbar {\n          display: none;\n        }\n\n        .table > tbody > tr > td.calendar-hour-column {\n          padding-left: 0;\n          padding-right: 0;\n          vertical-align: middle;\n        }\n\n        @media (max-width: 750px) {\n          .weekview-allday-label, .calendar-hour-column {\n            width: 31px;\n            font-size: 12px;\n          }\n\n          .weekview-allday-label {\n            padding-top: 4px;\n          }\n\n          .table > tbody > tr > td.calendar-hour-column {\n            padding-left: 0;\n            padding-right: 0;\n            vertical-align: middle;\n            line-height: 12px;\n          }\n\n          .table > thead > tr > th.weekview-header {\n            padding-left: 0;\n            padding-right: 0;\n            font-size: 12px;\n          }\n\n          .weekview-allday-label {\n            line-height: 20px;\n          }\n\n          .weekview-allday-content-wrapper {\n            margin-left: 31px;\n          }\n        }\n    "],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"slider":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["weekSlider"]}]}],"class":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.weekview"]}]}],"weekviewAllDayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekviewNormalEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatWeekTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatWeekViewDayHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatHourColumn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"startingDayWeek":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"allDayLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hourParts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"eventSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"markDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"locale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onRangeChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onEventSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onTimeSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onTitleChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./calendar.service","name":"CalendarService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onSlideChanged":[{"__symbolic":"method"}],"move":[{"__symbolic":"method"}],"getViewData":[{"__symbolic":"method"}],"getRange":[{"__symbolic":"method"}],"onDataLoaded":[{"__symbolic":"method"}],"refreshView":[{"__symbolic":"method"}],"getTitle":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"placeEvents":[{"__symbolic":"method"}],"placeAllDayEvents":[{"__symbolic":"method"}],"overlap":[{"__symbolic":"method"}],"calculatePosition":[{"__symbolic":"method"}],"eventSelected":[{"__symbolic":"method"}]},"statics":{"compareEventByStartOffset":{"__symbolic":"function","parameters":["eventA","eventB"],"value":{"__symbolic":"binop","operator":"-","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"eventA"},"member":"startOffset"},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"eventB"},"member":"startOffset"}}}}}}}]

New alerts

Long strings

Supply chain risk

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

Found 1 instance in 1 package

Fixed alerts

Install scripts

Supply chain risk

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

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

Dev dependency count

14

decreased by-12.5%

Number of high supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

823083

decreased by-18.66%

Number of package files

37

decreased by-9.76%

Lines of code

9105

decreased by-30.5%

No dependency changes