ionic2-calendar - npm Package Compare versions

Comparing version 0.5.9 to 0.6.0

calendar.d.ts

 import { EventEmitter, OnInit, TemplateRef } from '@angular/core';
 import { CalendarService } from './calendar.service';
+import * as i0 from "@angular/core";
 export interface IEvent {
@@ -152,3 +153,4 @@ allDay: boolean;
     private appLocale;
-    currentDate: Date;
+    get currentDate(): Date;
+    set currentDate(val: Date);
     eventSource: IEvent[];
@@ -218,2 +220,4 @@ calendarMode: CalendarMode;
     slidePrev(): void;
+    static ɵfac: i0.ɵɵFactoryDef<CalendarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<CalendarComponent, "calendar", never, { "currentDate": "currentDate"; "eventSource": "eventSource"; "calendarMode": "calendarMode"; "formatDay": "formatDay"; "formatDayHeader": "formatDayHeader"; "formatDayTitle": "formatDayTitle"; "formatWeekTitle": "formatWeekTitle"; "formatMonthTitle": "formatMonthTitle"; "formatWeekViewDayHeader": "formatWeekViewDayHeader"; "formatHourColumn": "formatHourColumn"; "showEventDetail": "showEventDetail"; "startingDayMonth": "startingDayMonth"; "startingDayWeek": "startingDayWeek"; "allDayLabel": "allDayLabel"; "noEventsLabel": "noEventsLabel"; "queryMode": "queryMode"; "step": "step"; "timeInterval": "timeInterval"; "autoSelect": "autoSelect"; "markDisabled": "markDisabled"; "monthviewDisplayEventTemplate": "monthviewDisplayEventTemplate"; "monthviewInactiveDisplayEventTemplate": "monthviewInactiveDisplayEventTemplate"; "monthviewEventDetailTemplate": "monthviewEventDetailTemplate"; "weekviewHeaderTemplate": "weekviewHeaderTemplate"; "weekviewAllDayEventTemplate": "weekviewAllDayEventTemplate"; "weekviewNormalEventTemplate": "weekviewNormalEventTemplate"; "dayviewAllDayEventTemplate": "dayviewAllDayEventTemplate"; "dayviewNormalEventTemplate": "dayviewNormalEventTemplate"; "weekviewAllDayEventSectionTemplate": "weekviewAllDayEventSectionTemplate"; "weekviewNormalEventSectionTemplate": "weekviewNormalEventSectionTemplate"; "dayviewAllDayEventSectionTemplate": "dayviewAllDayEventSectionTemplate"; "dayviewNormalEventSectionTemplate": "dayviewNormalEventSectionTemplate"; "weekviewInactiveAllDayEventSectionTemplate": "weekviewInactiveAllDayEventSectionTemplate"; "weekviewInactiveNormalEventSectionTemplate": "weekviewInactiveNormalEventSectionTemplate"; "dayviewInactiveAllDayEventSectionTemplate": "dayviewInactiveAllDayEventSectionTemplate"; "dayviewInactiveNormalEventSectionTemplate": "dayviewInactiveNormalEventSectionTemplate"; "dateFormatter": "dateFormatter"; "dir": "dir"; "scrollToHour": "scrollToHour"; "preserveScrollPosition": "preserveScrollPosition"; "lockSwipeToPrev": "lockSwipeToPrev"; "lockSwipes": "lockSwipes"; "locale": "locale"; "startHour": "startHour"; "endHour": "endHour"; "sliderOptions": "sliderOptions"; }, { "onCurrentDateChanged": "onCurrentDateChanged"; "onRangeChanged": "onRangeChanged"; "onEventSelected": "onEventSelected"; "onTimeSelected": "onTimeSelected"; "onTitleChanged": "onTitleChanged"; }, never, never>;
 }

calendar.js

@@ -1,4 +0,238 @@
-import * as tslib_1 from "tslib";
-import { Component, EventEmitter, Input, Output, TemplateRef, Inject, LOCALE_ID } from '@angular/core';
+import { Component, EventEmitter, Input, Output, Inject, LOCALE_ID } from '@angular/core';
 import { CalendarService } from './calendar.service';
+import * as i0 from "@angular/core";
+import * as i1 from "./calendar.service";
+function CalendarComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const view_r23 = ctx.view;
+    const row_r24 = ctx.row;
+    const col_r25 = ctx.col;
+    i0.ɵɵtextInterpolate1(" ", view_r23.dates[row_r24 * 7 + col_r25].label, " ");
+} }
+function CalendarComponent_ng_template_2_ion_list_0_ion_item_1_span_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 21);
+    i0.ɵɵtext(1);
+    i0.ɵɵpipe(2, "date");
+    i0.ɵɵpipe(3, "date");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const event_r32 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate2("", i0.ɵɵpipeBind2(2, 2, event_r32.startTime, "HH:mm"), " - ", i0.ɵɵpipeBind2(3, 5, event_r32.endTime, "HH:mm"), " ");
+} }
+function CalendarComponent_ng_template_2_ion_list_0_ion_item_1_span_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 21);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r34 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate(ctx_r34.allDayLabel);
+} }
+function CalendarComponent_ng_template_2_ion_list_0_ion_item_1_Template(rf, ctx) { if (rf & 1) {
+    const _r37 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ion-item", 18);
+    i0.ɵɵlistener("click", function CalendarComponent_ng_template_2_ion_list_0_ion_item_1_Template_ion_item_click_0_listener() { i0.ɵɵrestoreView(_r37); const event_r32 = ctx.$implicit; const ctx_r36 = i0.ɵɵnextContext(3); return ctx_r36.eventSelected(event_r32); });
+    i0.ɵɵtemplate(1, CalendarComponent_ng_template_2_ion_list_0_ion_item_1_span_1_Template, 4, 8, "span", 19);
+    i0.ɵɵtemplate(2, CalendarComponent_ng_template_2_ion_list_0_ion_item_1_span_2_Template, 2, 1, "span", 19);
+    i0.ɵɵelementStart(3, "span", 20);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const event_r32 = ctx.$implicit;
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", !event_r32.allDay);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", event_r32.allDay);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" | ", event_r32.title, "");
+} }
+function CalendarComponent_ng_template_2_ion_list_0_ion_item_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "ion-item");
+    i0.ɵɵelementStart(1, "div", 22);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const noEventsLabel_r28 = i0.ɵɵnextContext(2).noEventsLabel;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(noEventsLabel_r28);
+} }
+function CalendarComponent_ng_template_2_ion_list_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "ion-list", 15);
+    i0.ɵɵtemplate(1, CalendarComponent_ng_template_2_ion_list_0_ion_item_1_Template, 5, 3, "ion-item", 16);
+    i0.ɵɵtemplate(2, CalendarComponent_ng_template_2_ion_list_0_ion_item_2_Template, 3, 1, "ion-item", 17);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const selectedDate_r27 = i0.ɵɵnextContext().selectedDate;
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngForOf", selectedDate_r27 == null ? null : selectedDate_r27.events);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", (selectedDate_r27 == null ? null : selectedDate_r27.events.length) == 0);
+} }
+function CalendarComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, CalendarComponent_ng_template_2_ion_list_0_Template, 3, 2, "ion-list", 14);
+} if (rf & 2) {
+    const showEventDetail_r26 = ctx.showEventDetail;
+    i0.ɵɵproperty("ngIf", showEventDetail_r26);
+} }
+function CalendarComponent_ng_template_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const viewDate_r40 = ctx.viewDate;
+    i0.ɵɵtextInterpolate1(" ", viewDate_r40.dayHeader, " ");
+} }
+function CalendarComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 23);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const displayEvent_r41 = ctx.displayEvent;
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate(displayEvent_r41.event.title);
+} }
+function CalendarComponent_ng_template_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 23);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const displayEvent_r42 = ctx.displayEvent;
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate(displayEvent_r42.event.title);
+} }
+function CalendarComponent_ng_template_10_div_0_div_1_ng_template_1_Template(rf, ctx) { }
+const _c0 = function (a0, a1) { return { top: a0, width: a1, height: "25px" }; };
+const _c1 = function (a0) { return { displayEvent: a0 }; };
+function CalendarComponent_ng_template_10_div_0_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r50 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 27);
+    i0.ɵɵlistener("click", function CalendarComponent_ng_template_10_div_0_div_1_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r50); const displayEvent_r47 = ctx.$implicit; const ctx_r49 = i0.ɵɵnextContext(3); return ctx_r49.eventSelected(displayEvent_r47.event); });
+    i0.ɵɵtemplate(1, CalendarComponent_ng_template_10_div_0_div_1_ng_template_1_Template, 0, 0, "ng-template", 28);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const displayEvent_r47 = ctx.$implicit;
+    const eventTemplate_r44 = i0.ɵɵnextContext(2).eventTemplate;
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction2(3, _c0, 25 * displayEvent_r47.position + "px", 100 * (displayEvent_r47.endIndex - displayEvent_r47.startIndex) + "%"));
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngTemplateOutlet", eventTemplate_r44)("ngTemplateOutletContext", i0.ɵɵpureFunction1(6, _c1, displayEvent_r47));
+} }
+const _c2 = function (a0) { return { "calendar-event-wrap": a0 }; };
+const _c3 = function (a0) { return { height: a0 }; };
+function CalendarComponent_ng_template_10_div_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 25);
+    i0.ɵɵtemplate(1, CalendarComponent_ng_template_10_div_0_div_1_Template, 2, 8, "div", 26);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const day_r43 = i0.ɵɵnextContext().day;
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c2, day_r43.events))("ngStyle", i0.ɵɵpureFunction1(5, _c3, 25 * day_r43.events.length + "px"));
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngForOf", day_r43.events);
+} }
+function CalendarComponent_ng_template_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, CalendarComponent_ng_template_10_div_0_Template, 2, 7, "div", 24);
+} if (rf & 2) {
+    const day_r43 = ctx.day;
+    i0.ɵɵproperty("ngIf", day_r43.events);
+} }
+function CalendarComponent_ng_template_12_div_0_ng_template_1_Template(rf, ctx) { }
+const _c4 = function (a0) { return { top: a0, width: "100%", height: "25px" }; };
+function CalendarComponent_ng_template_12_div_0_Template(rf, ctx) { if (rf & 1) {
+    const _r60 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 27);
+    i0.ɵɵlistener("click", function CalendarComponent_ng_template_12_div_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r60); const displayEvent_r56 = ctx.$implicit; const ctx_r59 = i0.ɵɵnextContext(2); return ctx_r59.eventSelected(displayEvent_r56.event); });
+    i0.ɵɵtemplate(1, CalendarComponent_ng_template_12_div_0_ng_template_1_Template, 0, 0, "ng-template", 28);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const displayEvent_r56 = ctx.$implicit;
+    const eventIndex_r57 = ctx.index;
+    const eventTemplate_r54 = i0.ɵɵnextContext().eventTemplate;
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(3, _c4, 25 * eventIndex_r57 + "px"));
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngTemplateOutlet", eventTemplate_r54)("ngTemplateOutletContext", i0.ɵɵpureFunction1(5, _c1, displayEvent_r56));
+} }
+function CalendarComponent_ng_template_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, CalendarComponent_ng_template_12_div_0_Template, 2, 7, "div", 26);
+} if (rf & 2) {
+    const allDayEvents_r53 = ctx.allDayEvents;
+    i0.ɵɵproperty("ngForOf", allDayEvents_r53);
+} }
+function CalendarComponent_ng_template_14_div_0_div_1_ng_template_1_Template(rf, ctx) { }
+const _c5 = function (a0, a1, a2, a3) { return { top: a0, left: a1, width: a2, height: a3 }; };
+function CalendarComponent_ng_template_14_div_0_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r70 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 27);
+    i0.ɵɵlistener("click", function CalendarComponent_ng_template_14_div_0_div_1_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r70); const displayEvent_r67 = ctx.$implicit; const ctx_r69 = i0.ɵɵnextContext(3); return ctx_r69.eventSelected(displayEvent_r67.event); });
+    i0.ɵɵtemplate(1, CalendarComponent_ng_template_14_div_0_div_1_ng_template_1_Template, 0, 0, "ng-template", 28);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const displayEvent_r67 = ctx.$implicit;
+    const ctx_r71 = i0.ɵɵnextContext(2);
+    const hourParts_r63 = ctx_r71.hourParts;
+    const eventTemplate_r64 = ctx_r71.eventTemplate;
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction4(3, _c5, 37 * displayEvent_r67.startOffset / hourParts_r63 + "px", 100 / displayEvent_r67.overlapNumber * displayEvent_r67.position + "%", 100 / displayEvent_r67.overlapNumber + "%", 37 * (displayEvent_r67.endIndex - displayEvent_r67.startIndex - (displayEvent_r67.endOffset + displayEvent_r67.startOffset) / hourParts_r63) + "px"));
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngTemplateOutlet", eventTemplate_r64)("ngTemplateOutletContext", i0.ɵɵpureFunction1(8, _c1, displayEvent_r67));
+} }
+function CalendarComponent_ng_template_14_div_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 30);
+    i0.ɵɵtemplate(1, CalendarComponent_ng_template_14_div_0_div_1_Template, 2, 10, "div", 26);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const tm_r62 = i0.ɵɵnextContext().tm;
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c2, tm_r62.events));
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngForOf", tm_r62.events);
+} }
+function CalendarComponent_ng_template_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, CalendarComponent_ng_template_14_div_0_Template, 2, 4, "div", 29);
+} if (rf & 2) {
+    const tm_r62 = ctx.tm;
+    i0.ɵɵproperty("ngIf", tm_r62.events);
+} }
+function CalendarComponent_ng_template_16_Template(rf, ctx) { }
+function CalendarComponent_ng_template_18_Template(rf, ctx) { }
+function CalendarComponent_monthview_21_Template(rf, ctx) { if (rf & 1) {
+    const _r74 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "monthview", 31);
+    i0.ɵɵlistener("onRangeChanged", function CalendarComponent_monthview_21_Template_monthview_onRangeChanged_0_listener($event) { i0.ɵɵrestoreView(_r74); const ctx_r73 = i0.ɵɵnextContext(); return ctx_r73.rangeChanged($event); })("onEventSelected", function CalendarComponent_monthview_21_Template_monthview_onEventSelected_0_listener($event) { i0.ɵɵrestoreView(_r74); const ctx_r75 = i0.ɵɵnextContext(); return ctx_r75.eventSelected($event); })("onTimeSelected", function CalendarComponent_monthview_21_Template_monthview_onTimeSelected_0_listener($event) { i0.ɵɵrestoreView(_r74); const ctx_r76 = i0.ɵɵnextContext(); return ctx_r76.timeSelected($event); })("onTitleChanged", function CalendarComponent_monthview_21_Template_monthview_onTitleChanged_0_listener($event) { i0.ɵɵrestoreView(_r74); const ctx_r77 = i0.ɵɵnextContext(); return ctx_r77.titleChanged($event); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r20 = i0.ɵɵnextContext();
+    const _r0 = i0.ɵɵreference(1);
+    const _r2 = i0.ɵɵreference(3);
+    i0.ɵɵproperty("formatDay", ctx_r20.formatDay)("formatDayHeader", ctx_r20.formatDayHeader)("formatMonthTitle", ctx_r20.formatMonthTitle)("startingDayMonth", ctx_r20.startingDayMonth)("showEventDetail", ctx_r20.showEventDetail)("noEventsLabel", ctx_r20.noEventsLabel)("autoSelect", ctx_r20.autoSelect)("eventSource", ctx_r20.eventSource)("markDisabled", ctx_r20.markDisabled)("monthviewDisplayEventTemplate", ctx_r20.monthviewDisplayEventTemplate || _r0)("monthviewInactiveDisplayEventTemplate", ctx_r20.monthviewInactiveDisplayEventTemplate || _r0)("monthviewEventDetailTemplate", ctx_r20.monthviewEventDetailTemplate || _r2)("locale", ctx_r20.locale)("dateFormatter", ctx_r20.dateFormatter)("dir", ctx_r20.dir)("lockSwipeToPrev", ctx_r20.lockSwipeToPrev)("lockSwipes", ctx_r20.lockSwipes)("sliderOptions", ctx_r20.sliderOptions);
+} }
+function CalendarComponent_weekview_22_Template(rf, ctx) { if (rf & 1) {
+    const _r79 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "weekview", 32);
+    i0.ɵɵlistener("onRangeChanged", function CalendarComponent_weekview_22_Template_weekview_onRangeChanged_0_listener($event) { i0.ɵɵrestoreView(_r79); const ctx_r78 = i0.ɵɵnextContext(); return ctx_r78.rangeChanged($event); })("onEventSelected", function CalendarComponent_weekview_22_Template_weekview_onEventSelected_0_listener($event) { i0.ɵɵrestoreView(_r79); const ctx_r80 = i0.ɵɵnextContext(); return ctx_r80.eventSelected($event); })("onTimeSelected", function CalendarComponent_weekview_22_Template_weekview_onTimeSelected_0_listener($event) { i0.ɵɵrestoreView(_r79); const ctx_r81 = i0.ɵɵnextContext(); return ctx_r81.timeSelected($event); })("onTitleChanged", function CalendarComponent_weekview_22_Template_weekview_onTitleChanged_0_listener($event) { i0.ɵɵrestoreView(_r79); const ctx_r82 = i0.ɵɵnextContext(); return ctx_r82.titleChanged($event); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r21 = i0.ɵɵnextContext();
+    const _r4 = i0.ɵɵreference(5);
+    const _r6 = i0.ɵɵreference(7);
+    const _r8 = i0.ɵɵreference(9);
+    const _r10 = i0.ɵɵreference(11);
+    const _r14 = i0.ɵɵreference(15);
+    const _r16 = i0.ɵɵreference(17);
+    const _r18 = i0.ɵɵreference(19);
+    i0.ɵɵproperty("formatWeekTitle", ctx_r21.formatWeekTitle)("formatWeekViewDayHeader", ctx_r21.formatWeekViewDayHeader)("formatHourColumn", ctx_r21.formatHourColumn)("startingDayWeek", ctx_r21.startingDayWeek)("allDayLabel", ctx_r21.allDayLabel)("hourParts", ctx_r21.hourParts)("autoSelect", ctx_r21.autoSelect)("hourSegments", ctx_r21.hourSegments)("eventSource", ctx_r21.eventSource)("markDisabled", ctx_r21.markDisabled)("weekviewHeaderTemplate", ctx_r21.weekviewHeaderTemplate || _r4)("weekviewAllDayEventTemplate", ctx_r21.weekviewAllDayEventTemplate || _r6)("weekviewNormalEventTemplate", ctx_r21.weekviewNormalEventTemplate || _r8)("weekviewAllDayEventSectionTemplate", ctx_r21.weekviewAllDayEventSectionTemplate || _r10)("weekviewNormalEventSectionTemplate", ctx_r21.weekviewNormalEventSectionTemplate || _r14)("weekviewInactiveAllDayEventSectionTemplate", ctx_r21.weekviewInactiveAllDayEventSectionTemplate || _r16)("weekviewInactiveNormalEventSectionTemplate", ctx_r21.weekviewInactiveNormalEventSectionTemplate || _r18)("locale", ctx_r21.locale)("dateFormatter", ctx_r21.dateFormatter)("dir", ctx_r21.dir)("scrollToHour", ctx_r21.scrollToHour)("preserveScrollPosition", ctx_r21.preserveScrollPosition)("lockSwipeToPrev", ctx_r21.lockSwipeToPrev)("lockSwipes", ctx_r21.lockSwipes)("startHour", ctx_r21.startHour)("endHour", ctx_r21.endHour)("sliderOptions", ctx_r21.sliderOptions);
+} }
+function CalendarComponent_dayview_23_Template(rf, ctx) { if (rf & 1) {
+    const _r84 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "dayview", 33);
+    i0.ɵɵlistener("onRangeChanged", function CalendarComponent_dayview_23_Template_dayview_onRangeChanged_0_listener($event) { i0.ɵɵrestoreView(_r84); const ctx_r83 = i0.ɵɵnextContext(); return ctx_r83.rangeChanged($event); })("onEventSelected", function CalendarComponent_dayview_23_Template_dayview_onEventSelected_0_listener($event) { i0.ɵɵrestoreView(_r84); const ctx_r85 = i0.ɵɵnextContext(); return ctx_r85.eventSelected($event); })("onTimeSelected", function CalendarComponent_dayview_23_Template_dayview_onTimeSelected_0_listener($event) { i0.ɵɵrestoreView(_r84); const ctx_r86 = i0.ɵɵnextContext(); return ctx_r86.timeSelected($event); })("onTitleChanged", function CalendarComponent_dayview_23_Template_dayview_onTitleChanged_0_listener($event) { i0.ɵɵrestoreView(_r84); const ctx_r87 = i0.ɵɵnextContext(); return ctx_r87.titleChanged($event); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r22 = i0.ɵɵnextContext();
+    const _r6 = i0.ɵɵreference(7);
+    const _r8 = i0.ɵɵreference(9);
+    const _r12 = i0.ɵɵreference(13);
+    const _r14 = i0.ɵɵreference(15);
+    const _r16 = i0.ɵɵreference(17);
+    const _r18 = i0.ɵɵreference(19);
+    i0.ɵɵproperty("formatDayTitle", ctx_r22.formatDayTitle)("formatHourColumn", ctx_r22.formatHourColumn)("allDayLabel", ctx_r22.allDayLabel)("hourParts", ctx_r22.hourParts)("hourSegments", ctx_r22.hourSegments)("eventSource", ctx_r22.eventSource)("markDisabled", ctx_r22.markDisabled)("dayviewAllDayEventTemplate", ctx_r22.dayviewAllDayEventTemplate || _r6)("dayviewNormalEventTemplate", ctx_r22.dayviewNormalEventTemplate || _r8)("dayviewAllDayEventSectionTemplate", ctx_r22.dayviewAllDayEventSectionTemplate || _r12)("dayviewNormalEventSectionTemplate", ctx_r22.dayviewNormalEventSectionTemplate || _r14)("dayviewInactiveAllDayEventSectionTemplate", ctx_r22.dayviewInactiveAllDayEventSectionTemplate || _r16)("dayviewInactiveNormalEventSectionTemplate", ctx_r22.dayviewInactiveNormalEventSectionTemplate || _r18)("locale", ctx_r22.locale)("dateFormatter", ctx_r22.dateFormatter)("dir", ctx_r22.dir)("scrollToHour", ctx_r22.scrollToHour)("preserveScrollPosition", ctx_r22.preserveScrollPosition)("lockSwipeToPrev", ctx_r22.lockSwipeToPrev)("lockSwipes", ctx_r22.lockSwipes)("startHour", ctx_r22.startHour)("endHour", ctx_r22.endHour)("sliderOptions", ctx_r22.sliderOptions);
+} }
 export var Step;
@@ -10,4 +244,4 @@ (function (Step) {
 })(Step || (Step = {}));
-var CalendarComponent = /** @class */ (function () {
-    function CalendarComponent(calendarService, appLocale) {
+export class CalendarComponent {
+    constructor(calendarService, appLocale) {
         this.calendarService = calendarService;
@@ -50,19 +284,14 @@ this.appLocale = appLocale;
     }
-    Object.defineProperty(CalendarComponent.prototype, "currentDate", {
-        get: function () {
-            return this._currentDate;
-        },
-        set: function (val) {
-            if (!val) {
-                val = new Date();
-            }
-            this._currentDate = val;
-            this.calendarService.setCurrentDate(val, true);
-            this.onCurrentDateChanged.emit(this._currentDate);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    CalendarComponent.prototype.ngOnInit = function () {
-        var _this = this;
+    get currentDate() {
+        return this._currentDate;
+    }
+    set currentDate(val) {
+        if (!val) {
+            val = new Date();
+        }
+        this._currentDate = val;
+        this.calendarService.setCurrentDate(val, true);
+        this.onCurrentDateChanged.emit(this._currentDate);
+    }
+    ngOnInit() {
         if (this.autoSelect) {
@@ -87,8 +316,8 @@ if (this.autoSelect.toString() === 'false') {
         this.calendarService.queryMode = this.queryMode;
-        this.currentDateChangedFromChildrenSubscription = this.calendarService.currentDateChangedFromChildren$.subscribe(function (currentDate) {
-            _this._currentDate = currentDate;
-            _this.onCurrentDateChanged.emit(currentDate);
+        this.currentDateChangedFromChildrenSubscription = this.calendarService.currentDateChangedFromChildren$.subscribe(currentDate => {
+            this._currentDate = currentDate;
+            this.onCurrentDateChanged.emit(currentDate);
         });
-    };
-    CalendarComponent.prototype.ngOnDestroy = function () {
+    }
+    ngOnDestroy() {
         if (this.currentDateChangedFromChildrenSubscription) {
@@ -98,241 +327,360 @@ this.currentDateChangedFromChildrenSubscription.unsubscribe();
         }
-    };
-    CalendarComponent.prototype.rangeChanged = function (range) {
+    }
+    rangeChanged(range) {
         this.onRangeChanged.emit(range);
-    };
-    CalendarComponent.prototype.eventSelected = function (event) {
+    }
+    eventSelected(event) {
         this.onEventSelected.emit(event);
-    };
-    CalendarComponent.prototype.timeSelected = function (timeSelected) {
+    }
+    timeSelected(timeSelected) {
         this.onTimeSelected.emit(timeSelected);
-    };
-    CalendarComponent.prototype.titleChanged = function (title) {
+    }
+    titleChanged(title) {
         this.onTitleChanged.emit(title);
-    };
-    CalendarComponent.prototype.loadEvents = function () {
+    }
+    loadEvents() {
         this.calendarService.loadEvents();
-    };
-    CalendarComponent.prototype.slideNext = function () {
+    }
+    slideNext() {
         this.calendarService.slide(1);
-    };
-    CalendarComponent.prototype.slidePrev = function () {
+    }
+    slidePrev() {
         this.calendarService.slide(-1);
-    };
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Date),
-        tslib_1.__metadata("design:paramtypes", [Date])
-    ], CalendarComponent.prototype, "currentDate", null);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Array)
-    ], CalendarComponent.prototype, "eventSource", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], CalendarComponent.prototype, "calendarMode", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], CalendarComponent.prototype, "formatDay", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], CalendarComponent.prototype, "formatDayHeader", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], CalendarComponent.prototype, "formatDayTitle", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], CalendarComponent.prototype, "formatWeekTitle", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], CalendarComponent.prototype, "formatMonthTitle", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], CalendarComponent.prototype, "formatWeekViewDayHeader", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], CalendarComponent.prototype, "formatHourColumn", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], CalendarComponent.prototype, "showEventDetail", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Number)
-    ], CalendarComponent.prototype, "startingDayMonth", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Number)
-    ], CalendarComponent.prototype, "startingDayWeek", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], CalendarComponent.prototype, "allDayLabel", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], CalendarComponent.prototype, "noEventsLabel", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], CalendarComponent.prototype, "queryMode", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Number)
-    ], CalendarComponent.prototype, "step", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Number)
-    ], CalendarComponent.prototype, "timeInterval", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], CalendarComponent.prototype, "autoSelect", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Function)
-    ], CalendarComponent.prototype, "markDisabled", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", TemplateRef)
-    ], CalendarComponent.prototype, "monthviewDisplayEventTemplate", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", TemplateRef)
-    ], CalendarComponent.prototype, "monthviewInactiveDisplayEventTemplate", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", TemplateRef)
-    ], CalendarComponent.prototype, "monthviewEventDetailTemplate", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", TemplateRef)
-    ], CalendarComponent.prototype, "weekviewHeaderTemplate", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", TemplateRef)
-    ], CalendarComponent.prototype, "weekviewAllDayEventTemplate", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", TemplateRef)
-    ], CalendarComponent.prototype, "weekviewNormalEventTemplate", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", TemplateRef)
-    ], CalendarComponent.prototype, "dayviewAllDayEventTemplate", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", TemplateRef)
-    ], CalendarComponent.prototype, "dayviewNormalEventTemplate", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", TemplateRef)
-    ], CalendarComponent.prototype, "weekviewAllDayEventSectionTemplate", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", TemplateRef)
-    ], CalendarComponent.prototype, "weekviewNormalEventSectionTemplate", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", TemplateRef)
-    ], CalendarComponent.prototype, "dayviewAllDayEventSectionTemplate", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", TemplateRef)
-    ], CalendarComponent.prototype, "dayviewNormalEventSectionTemplate", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", TemplateRef)
-    ], CalendarComponent.prototype, "weekviewInactiveAllDayEventSectionTemplate", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", TemplateRef)
-    ], CalendarComponent.prototype, "weekviewInactiveNormalEventSectionTemplate", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", TemplateRef)
-    ], CalendarComponent.prototype, "dayviewInactiveAllDayEventSectionTemplate", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", TemplateRef)
-    ], CalendarComponent.prototype, "dayviewInactiveNormalEventSectionTemplate", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Object)
-    ], CalendarComponent.prototype, "dateFormatter", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], CalendarComponent.prototype, "dir", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Number)
-    ], CalendarComponent.prototype, "scrollToHour", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], CalendarComponent.prototype, "preserveScrollPosition", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], CalendarComponent.prototype, "lockSwipeToPrev", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], CalendarComponent.prototype, "lockSwipes", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], CalendarComponent.prototype, "locale", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Number)
-    ], CalendarComponent.prototype, "startHour", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Number)
-    ], CalendarComponent.prototype, "endHour", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Object)
-    ], CalendarComponent.prototype, "sliderOptions", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", Object)
-    ], CalendarComponent.prototype, "onCurrentDateChanged", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", Object)
-    ], CalendarComponent.prototype, "onRangeChanged", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", Object)
-    ], CalendarComponent.prototype, "onEventSelected", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", Object)
-    ], CalendarComponent.prototype, "onTimeSelected", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", Object)
-    ], CalendarComponent.prototype, "onTitleChanged", void 0);
-    CalendarComponent = tslib_1.__decorate([
-        Component({
-            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 #defaultWeekviewHeaderTemplate let-viewDate=\"viewDate\">\n            {{ viewDate.dayHeader }}\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        <ng-template #defaultWeekViewAllDayEventSectionTemplate let-day=\"day\" let-eventTemplate=\"eventTemplate\">\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]=\"eventTemplate\"\n                                 [ngTemplateOutletContext]=\"{displayEvent:displayEvent}\">\n                    </ng-template>\n                </div>\n            </div>\n        </ng-template>\n        <ng-template #defaultDayViewAllDayEventSectionTemplate let-allDayEvents=\"allDayEvents\" let-eventTemplate=\"eventTemplate\">\n            <div *ngFor=\"let displayEvent of 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]=\"eventTemplate\"\n                             [ngTemplateOutletContext]=\"{displayEvent:displayEvent}\">\n                </ng-template>\n            </div>\n        </ng-template>\n        <ng-template #defaultNormalEventSectionTemplate let-tm=\"tm\" let-hourParts=\"hourParts\" let-eventTemplate=\"eventTemplate\">\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]=\"eventTemplate\"\n                                 [ngTemplateOutletContext]=\"{displayEvent:displayEvent}\">\n                    </ng-template>\n                </div>\n            </div>\n        </ng-template>\n        <ng-template #defaultInactiveAllDayEventSectionTemplate>\n        </ng-template>\n        <ng-template #defaultInactiveNormalEventSectionTemplate>\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                [dateFormatter]=\"dateFormatter\"\n                [dir]=\"dir\"\n                [lockSwipeToPrev]=\"lockSwipeToPrev\"\n                [lockSwipes]=\"lockSwipes\"\n                [sliderOptions]=\"sliderOptions\"\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                [autoSelect]=\"autoSelect\"\n                [hourSegments]=\"hourSegments\"\n                [eventSource]=\"eventSource\"\n                [markDisabled]=\"markDisabled\"\n                [weekviewHeaderTemplate]=\"weekviewHeaderTemplate||defaultWeekviewHeaderTemplate\"\n                [weekviewAllDayEventTemplate]=\"weekviewAllDayEventTemplate||defaultAllDayEventTemplate\"\n                [weekviewNormalEventTemplate]=\"weekviewNormalEventTemplate||defaultNormalEventTemplate\"\n                [weekviewAllDayEventSectionTemplate]=\"weekviewAllDayEventSectionTemplate||defaultWeekViewAllDayEventSectionTemplate\"\n                [weekviewNormalEventSectionTemplate]=\"weekviewNormalEventSectionTemplate||defaultNormalEventSectionTemplate\"\n                [weekviewInactiveAllDayEventSectionTemplate]=\"weekviewInactiveAllDayEventSectionTemplate||defaultInactiveAllDayEventSectionTemplate\"\n                [weekviewInactiveNormalEventSectionTemplate]=\"weekviewInactiveNormalEventSectionTemplate||defaultInactiveNormalEventSectionTemplate\"\n                [locale]=\"locale\"\n                [dateFormatter]=\"dateFormatter\"\n                [dir]=\"dir\"\n                [scrollToHour]=\"scrollToHour\"\n                [preserveScrollPosition]=\"preserveScrollPosition\"\n                [lockSwipeToPrev]=\"lockSwipeToPrev\"\n                [lockSwipes]=\"lockSwipes\"\n                [startHour]=\"startHour\"\n                [endHour]=\"endHour\"\n                [sliderOptions]=\"sliderOptions\"\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                [hourSegments]=\"hourSegments\"\n                [eventSource]=\"eventSource\"\n                [markDisabled]=\"markDisabled\"\n                [dayviewAllDayEventTemplate]=\"dayviewAllDayEventTemplate||defaultAllDayEventTemplate\"\n                [dayviewNormalEventTemplate]=\"dayviewNormalEventTemplate||defaultNormalEventTemplate\"\n                [dayviewAllDayEventSectionTemplate]=\"dayviewAllDayEventSectionTemplate||defaultDayViewAllDayEventSectionTemplate\"\n                [dayviewNormalEventSectionTemplate]=\"dayviewNormalEventSectionTemplate||defaultNormalEventSectionTemplate\"\n                [dayviewInactiveAllDayEventSectionTemplate]=\"dayviewInactiveAllDayEventSectionTemplate||defaultInactiveAllDayEventSectionTemplate\"\n                [dayviewInactiveNormalEventSectionTemplate]=\"dayviewInactiveNormalEventSectionTemplate||defaultInactiveNormalEventSectionTemplate\"\n                [locale]=\"locale\"\n                [dateFormatter]=\"dateFormatter\"\n                [dir]=\"dir\"\n                [scrollToHour]=\"scrollToHour\"\n                [preserveScrollPosition]=\"preserveScrollPosition\"\n                [lockSwipeToPrev]=\"lockSwipeToPrev\"\n                [lockSwipes]=\"lockSwipes\"\n                [startHour]=\"startHour\"\n                [endHour]=\"endHour\"\n                [sliderOptions]=\"sliderOptions\"\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          text-align: initial;\n        }\n\n        @media (max-width: 750px) {\n          .calendar-event-inner {\n            font-size: 12px;\n          }\n        }\n    "],
-            providers: [CalendarService]
-        }),
-        tslib_1.__param(1, Inject(LOCALE_ID)),
-        tslib_1.__metadata("design:paramtypes", [CalendarService, String])
-    ], CalendarComponent);
-    return CalendarComponent;
-}());
-export { CalendarComponent };
+    }
+}
+CalendarComponent.ɵfac = function CalendarComponent_Factory(t) { return new (t || CalendarComponent)(i0.ɵɵdirectiveInject(i1.CalendarService), i0.ɵɵdirectiveInject(LOCALE_ID)); };
+CalendarComponent.ɵcmp = i0.ɵɵdefineComponent({ type: CalendarComponent, selectors: [["calendar"]], inputs: { currentDate: "currentDate", eventSource: "eventSource", calendarMode: "calendarMode", formatDay: "formatDay", formatDayHeader: "formatDayHeader", formatDayTitle: "formatDayTitle", formatWeekTitle: "formatWeekTitle", formatMonthTitle: "formatMonthTitle", formatWeekViewDayHeader: "formatWeekViewDayHeader", formatHourColumn: "formatHourColumn", showEventDetail: "showEventDetail", startingDayMonth: "startingDayMonth", startingDayWeek: "startingDayWeek", allDayLabel: "allDayLabel", noEventsLabel: "noEventsLabel", queryMode: "queryMode", step: "step", timeInterval: "timeInterval", autoSelect: "autoSelect", markDisabled: "markDisabled", monthviewDisplayEventTemplate: "monthviewDisplayEventTemplate", monthviewInactiveDisplayEventTemplate: "monthviewInactiveDisplayEventTemplate", monthviewEventDetailTemplate: "monthviewEventDetailTemplate", weekviewHeaderTemplate: "weekviewHeaderTemplate", weekviewAllDayEventTemplate: "weekviewAllDayEventTemplate", weekviewNormalEventTemplate: "weekviewNormalEventTemplate", dayviewAllDayEventTemplate: "dayviewAllDayEventTemplate", dayviewNormalEventTemplate: "dayviewNormalEventTemplate", weekviewAllDayEventSectionTemplate: "weekviewAllDayEventSectionTemplate", weekviewNormalEventSectionTemplate: "weekviewNormalEventSectionTemplate", dayviewAllDayEventSectionTemplate: "dayviewAllDayEventSectionTemplate", dayviewNormalEventSectionTemplate: "dayviewNormalEventSectionTemplate", weekviewInactiveAllDayEventSectionTemplate: "weekviewInactiveAllDayEventSectionTemplate", weekviewInactiveNormalEventSectionTemplate: "weekviewInactiveNormalEventSectionTemplate", dayviewInactiveAllDayEventSectionTemplate: "dayviewInactiveAllDayEventSectionTemplate", dayviewInactiveNormalEventSectionTemplate: "dayviewInactiveNormalEventSectionTemplate", dateFormatter: "dateFormatter", dir: "dir", scrollToHour: "scrollToHour", preserveScrollPosition: "preserveScrollPosition", lockSwipeToPrev: "lockSwipeToPrev", lockSwipes: "lockSwipes", locale: "locale", startHour: "startHour", endHour: "endHour", sliderOptions: "sliderOptions" }, outputs: { onCurrentDateChanged: "onCurrentDateChanged", onRangeChanged: "onRangeChanged", onEventSelected: "onEventSelected", onTimeSelected: "onTimeSelected", onTitleChanged: "onTitleChanged" }, features: [i0.ɵɵProvidersFeature([CalendarService])], decls: 24, vars: 7, consts: [["monthviewDefaultDisplayEventTemplate", ""], ["monthviewDefaultEventDetailTemplate", ""], ["defaultWeekviewHeaderTemplate", ""], ["defaultAllDayEventTemplate", ""], ["defaultNormalEventTemplate", ""], ["defaultWeekViewAllDayEventSectionTemplate", ""], ["defaultDayViewAllDayEventSectionTemplate", ""], ["defaultNormalEventSectionTemplate", ""], ["defaultInactiveAllDayEventSectionTemplate", ""], ["defaultInactiveNormalEventSectionTemplate", ""], [3, "ngSwitch"], [3, "formatDay", "formatDayHeader", "formatMonthTitle", "startingDayMonth", "showEventDetail", "noEventsLabel", "autoSelect", "eventSource", "markDisabled", "monthviewDisplayEventTemplate", "monthviewInactiveDisplayEventTemplate", "monthviewEventDetailTemplate", "locale", "dateFormatter", "dir", "lockSwipeToPrev", "lockSwipes", "sliderOptions", "onRangeChanged", "onEventSelected", "onTimeSelected", "onTitleChanged", 4, "ngSwitchCase"], [3, "formatWeekTitle", "formatWeekViewDayHeader", "formatHourColumn", "startingDayWeek", "allDayLabel", "hourParts", "autoSelect", "hourSegments", "eventSource", "markDisabled", "weekviewHeaderTemplate", "weekviewAllDayEventTemplate", "weekviewNormalEventTemplate", "weekviewAllDayEventSectionTemplate", "weekviewNormalEventSectionTemplate", "weekviewInactiveAllDayEventSectionTemplate", "weekviewInactiveNormalEventSectionTemplate", "locale", "dateFormatter", "dir", "scrollToHour", "preserveScrollPosition", "lockSwipeToPrev", "lockSwipes", "startHour", "endHour", "sliderOptions", "onRangeChanged", "onEventSelected", "onTimeSelected", "onTitleChanged", 4, "ngSwitchCase"], [3, "formatDayTitle", "formatHourColumn", "allDayLabel", "hourParts", "hourSegments", "eventSource", "markDisabled", "dayviewAllDayEventTemplate", "dayviewNormalEventTemplate", "dayviewAllDayEventSectionTemplate", "dayviewNormalEventSectionTemplate", "dayviewInactiveAllDayEventSectionTemplate", "dayviewInactiveNormalEventSectionTemplate", "locale", "dateFormatter", "dir", "scrollToHour", "preserveScrollPosition", "lockSwipeToPrev", "lockSwipes", "startHour", "endHour", "sliderOptions", "onRangeChanged", "onEventSelected", "onTimeSelected", "onTitleChanged", 4, "ngSwitchCase"], ["class", "event-detail-container", "has-bouncing", "false", "overflow-scroll", "false", 4, "ngIf"], ["has-bouncing", "false", "overflow-scroll", "false", 1, "event-detail-container"], [3, "click", 4, "ngFor", "ngForOf"], [4, "ngIf"], [3, "click"], ["class", "monthview-eventdetail-timecolumn", 4, "ngIf"], [1, "event-detail"], [1, "monthview-eventdetail-timecolumn"], [1, "no-events-label"], [1, "calendar-event-inner"], [3, "ngClass", "ngStyle", 4, "ngIf"], [3, "ngClass", "ngStyle"], ["class", "calendar-event", "tappable", "", 3, "ngStyle", "click", 4, "ngFor", "ngForOf"], ["tappable", "", 1, "calendar-event", 3, "ngStyle", "click"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "ngClass", 4, "ngIf"], [3, "ngClass"], [3, "formatDay", "formatDayHeader", "formatMonthTitle", "startingDayMonth", "showEventDetail", "noEventsLabel", "autoSelect", "eventSource", "markDisabled", "monthviewDisplayEventTemplate", "monthviewInactiveDisplayEventTemplate", "monthviewEventDetailTemplate", "locale", "dateFormatter", "dir", "lockSwipeToPrev", "lockSwipes", "sliderOptions", "onRangeChanged", "onEventSelected", "onTimeSelected", "onTitleChanged"], [3, "formatWeekTitle", "formatWeekViewDayHeader", "formatHourColumn", "startingDayWeek", "allDayLabel", "hourParts", "autoSelect", "hourSegments", "eventSource", "markDisabled", "weekviewHeaderTemplate", "weekviewAllDayEventTemplate", "weekviewNormalEventTemplate", "weekviewAllDayEventSectionTemplate", "weekviewNormalEventSectionTemplate", "weekviewInactiveAllDayEventSectionTemplate", "weekviewInactiveNormalEventSectionTemplate", "locale", "dateFormatter", "dir", "scrollToHour", "preserveScrollPosition", "lockSwipeToPrev", "lockSwipes", "startHour", "endHour", "sliderOptions", "onRangeChanged", "onEventSelected", "onTimeSelected", "onTitleChanged"], [3, "formatDayTitle", "formatHourColumn", "allDayLabel", "hourParts", "hourSegments", "eventSource", "markDisabled", "dayviewAllDayEventTemplate", "dayviewNormalEventTemplate", "dayviewAllDayEventSectionTemplate", "dayviewNormalEventSectionTemplate", "dayviewInactiveAllDayEventSectionTemplate", "dayviewInactiveNormalEventSectionTemplate", "locale", "dateFormatter", "dir", "scrollToHour", "preserveScrollPosition", "lockSwipeToPrev", "lockSwipes", "startHour", "endHour", "sliderOptions", "onRangeChanged", "onEventSelected", "onTimeSelected", "onTitleChanged"]], template: function CalendarComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵtemplate(0, CalendarComponent_ng_template_0_Template, 1, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+        i0.ɵɵtemplate(2, CalendarComponent_ng_template_2_Template, 1, 1, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
+        i0.ɵɵtemplate(4, CalendarComponent_ng_template_4_Template, 1, 1, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
+        i0.ɵɵtemplate(6, CalendarComponent_ng_template_6_Template, 2, 1, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
+        i0.ɵɵtemplate(8, CalendarComponent_ng_template_8_Template, 2, 1, "ng-template", null, 4, i0.ɵɵtemplateRefExtractor);
+        i0.ɵɵtemplate(10, CalendarComponent_ng_template_10_Template, 1, 1, "ng-template", null, 5, i0.ɵɵtemplateRefExtractor);
+        i0.ɵɵtemplate(12, CalendarComponent_ng_template_12_Template, 1, 1, "ng-template", null, 6, i0.ɵɵtemplateRefExtractor);
+        i0.ɵɵtemplate(14, CalendarComponent_ng_template_14_Template, 1, 1, "ng-template", null, 7, i0.ɵɵtemplateRefExtractor);
+        i0.ɵɵtemplate(16, CalendarComponent_ng_template_16_Template, 0, 0, "ng-template", null, 8, i0.ɵɵtemplateRefExtractor);
+        i0.ɵɵtemplate(18, CalendarComponent_ng_template_18_Template, 0, 0, "ng-template", null, 9, i0.ɵɵtemplateRefExtractor);
+        i0.ɵɵelementStart(20, "div", 10);
+        i0.ɵɵtemplate(21, CalendarComponent_monthview_21_Template, 1, 18, "monthview", 11);
+        i0.ɵɵtemplate(22, CalendarComponent_weekview_22_Template, 1, 27, "weekview", 12);
+        i0.ɵɵtemplate(23, CalendarComponent_dayview_23_Template, 1, 23, "dayview", 13);
+        i0.ɵɵelementEnd();
+    } if (rf & 2) {
+        i0.ɵɵadvance(20);
+        i0.ɵɵclassMapInterpolate1("", ctx.calendarMode, "view-container");
+        i0.ɵɵproperty("ngSwitch", ctx.calendarMode);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngSwitchCase", "month");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngSwitchCase", "week");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngSwitchCase", "day");
+    } }, styles: ["[_nghost-%COMP%]    > div[_ngcontent-%COMP%] { height: 100%; }\n\n        .event-detail-container[_ngcontent-%COMP%] {\n          border-top: 2px darkgrey solid;\n        }\n\n        .no-events-label[_ngcontent-%COMP%] {\n          font-weight: bold;\n          color: darkgrey;\n          text-align: center;\n        }\n\n        .event-detail[_ngcontent-%COMP%] {\n          cursor: pointer;\n          white-space: nowrap;\n          text-overflow: ellipsis;\n        }\n\n        .monthview-eventdetail-timecolumn[_ngcontent-%COMP%] {\n          width: 110px;\n          overflow: hidden;\n        }\n\n        .calendar-event-inner[_ngcontent-%COMP%] {\n          overflow: hidden;\n          background-color: #3a87ad;\n          color: white;\n          height: 100%;\n          width: 100%;\n          padding: 2px;\n          line-height: 15px;\n          text-align: initial;\n        }\n\n        @media (max-width: 750px) {\n          .calendar-event-inner[_ngcontent-%COMP%] {\n            font-size: 12px;\n          }\n        }"] });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(CalendarComponent, [{
+        type: Component,
+        args: [{
+                selector: 'calendar',
+                template: `
+        <ng-template #monthviewDefaultDisplayEventTemplate let-view="view" let-row="row" let-col="col">
+            {{view.dates[row*7+col].label}}
+        </ng-template>
+        <ng-template #monthviewDefaultEventDetailTemplate let-showEventDetail="showEventDetail" let-selectedDate="selectedDate" let-noEventsLabel="noEventsLabel">
+            <ion-list class="event-detail-container" has-bouncing="false" *ngIf="showEventDetail" overflow-scroll="false">
+                <ion-item *ngFor="let event of selectedDate?.events" (click)="eventSelected(event)">
+                        <span *ngIf="!event.allDay" class="monthview-eventdetail-timecolumn">{{event.startTime|date: 'HH:mm'}}
+                            -
+                            {{event.endTime|date: 'HH:mm'}}
+                        </span>
+                    <span *ngIf="event.allDay" class="monthview-eventdetail-timecolumn">{{allDayLabel}}</span>
+                    <span class="event-detail">  |  {{event.title}}</span>
+                </ion-item>
+                <ion-item *ngIf="selectedDate?.events.length==0">
+                    <div class="no-events-label">{{noEventsLabel}}</div>
+                </ion-item>
+            </ion-list>
+        </ng-template>
+        <ng-template #defaultWeekviewHeaderTemplate let-viewDate="viewDate">
+            {{ viewDate.dayHeader }}
+        </ng-template>
+        <ng-template #defaultAllDayEventTemplate let-displayEvent="displayEvent">
+            <div class="calendar-event-inner">{{displayEvent.event.title}}</div>
+        </ng-template>
+        <ng-template #defaultNormalEventTemplate let-displayEvent="displayEvent">
+            <div class="calendar-event-inner">{{displayEvent.event.title}}</div>
+        </ng-template>
+        <ng-template #defaultWeekViewAllDayEventSectionTemplate let-day="day" let-eventTemplate="eventTemplate">
+            <div [ngClass]="{'calendar-event-wrap': day.events}" *ngIf="day.events"
+                 [ngStyle]="{height: 25*day.events.length+'px'}">
+                <div *ngFor="let displayEvent of day.events" class="calendar-event" tappable
+                     (click)="eventSelected(displayEvent.event)"
+                     [ngStyle]="{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}">
+                    <ng-template [ngTemplateOutlet]="eventTemplate"
+                                 [ngTemplateOutletContext]="{displayEvent:displayEvent}">
+                    </ng-template>
+                </div>
+            </div>
+        </ng-template>
+        <ng-template #defaultDayViewAllDayEventSectionTemplate let-allDayEvents="allDayEvents" let-eventTemplate="eventTemplate">
+            <div *ngFor="let displayEvent of allDayEvents; let eventIndex=index"
+                 class="calendar-event" tappable
+                 (click)="eventSelected(displayEvent.event)"
+                 [ngStyle]="{top: 25*eventIndex+'px',width: '100%',height:'25px'}">
+                <ng-template [ngTemplateOutlet]="eventTemplate"
+                             [ngTemplateOutletContext]="{displayEvent:displayEvent}">
+                </ng-template>
+            </div>
+        </ng-template>
+        <ng-template #defaultNormalEventSectionTemplate let-tm="tm" let-hourParts="hourParts" let-eventTemplate="eventTemplate">
+            <div [ngClass]="{'calendar-event-wrap': tm.events}" *ngIf="tm.events">
+                <div *ngFor="let displayEvent of tm.events" class="calendar-event" tappable
+                     (click)="eventSelected(displayEvent.event)"
+                     [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'}">
+                    <ng-template [ngTemplateOutlet]="eventTemplate"
+                                 [ngTemplateOutletContext]="{displayEvent:displayEvent}">
+                    </ng-template>
+                </div>
+            </div>
+        </ng-template>
+        <ng-template #defaultInactiveAllDayEventSectionTemplate>
+        </ng-template>
+        <ng-template #defaultInactiveNormalEventSectionTemplate>
+        </ng-template>
+
+        <div [ngSwitch]="calendarMode" class="{{calendarMode}}view-container">
+            <monthview *ngSwitchCase="'month'"
+                [formatDay]="formatDay"
+                [formatDayHeader]="formatDayHeader"
+                [formatMonthTitle]="formatMonthTitle"
+                [startingDayMonth]="startingDayMonth"
+                [showEventDetail]="showEventDetail"
+                [noEventsLabel]="noEventsLabel"
+                [autoSelect]="autoSelect"
+                [eventSource]="eventSource"
+                [markDisabled]="markDisabled"
+                [monthviewDisplayEventTemplate]="monthviewDisplayEventTemplate||monthviewDefaultDisplayEventTemplate"
+                [monthviewInactiveDisplayEventTemplate]="monthviewInactiveDisplayEventTemplate||monthviewDefaultDisplayEventTemplate"
+                [monthviewEventDetailTemplate]="monthviewEventDetailTemplate||monthviewDefaultEventDetailTemplate"
+                [locale]="locale"
+                [dateFormatter]="dateFormatter"
+                [dir]="dir"
+                [lockSwipeToPrev]="lockSwipeToPrev"
+                [lockSwipes]="lockSwipes"
+                [sliderOptions]="sliderOptions"
+                (onRangeChanged)="rangeChanged($event)"
+                (onEventSelected)="eventSelected($event)"
+                (onTimeSelected)="timeSelected($event)"
+                (onTitleChanged)="titleChanged($event)">
+            </monthview>
+            <weekview *ngSwitchCase="'week'"
+                [formatWeekTitle]="formatWeekTitle"
+                [formatWeekViewDayHeader]="formatWeekViewDayHeader"
+                [formatHourColumn]="formatHourColumn"
+                [startingDayWeek]="startingDayWeek"
+                [allDayLabel]="allDayLabel"
+                [hourParts]="hourParts"
+                [autoSelect]="autoSelect"
+                [hourSegments]="hourSegments"
+                [eventSource]="eventSource"
+                [markDisabled]="markDisabled"
+                [weekviewHeaderTemplate]="weekviewHeaderTemplate||defaultWeekviewHeaderTemplate"
+                [weekviewAllDayEventTemplate]="weekviewAllDayEventTemplate||defaultAllDayEventTemplate"
+                [weekviewNormalEventTemplate]="weekviewNormalEventTemplate||defaultNormalEventTemplate"
+                [weekviewAllDayEventSectionTemplate]="weekviewAllDayEventSectionTemplate||defaultWeekViewAllDayEventSectionTemplate"
+                [weekviewNormalEventSectionTemplate]="weekviewNormalEventSectionTemplate||defaultNormalEventSectionTemplate"
+                [weekviewInactiveAllDayEventSectionTemplate]="weekviewInactiveAllDayEventSectionTemplate||defaultInactiveAllDayEventSectionTemplate"
+                [weekviewInactiveNormalEventSectionTemplate]="weekviewInactiveNormalEventSectionTemplate||defaultInactiveNormalEventSectionTemplate"
+                [locale]="locale"
+                [dateFormatter]="dateFormatter"
+                [dir]="dir"
+                [scrollToHour]="scrollToHour"
+                [preserveScrollPosition]="preserveScrollPosition"
+                [lockSwipeToPrev]="lockSwipeToPrev"
+                [lockSwipes]="lockSwipes"
+                [startHour]="startHour"
+                [endHour]="endHour"
+                [sliderOptions]="sliderOptions"
+                (onRangeChanged)="rangeChanged($event)"
+                (onEventSelected)="eventSelected($event)"
+                (onTimeSelected)="timeSelected($event)"
+                (onTitleChanged)="titleChanged($event)">
+            </weekview>
+            <dayview *ngSwitchCase="'day'"
+                [formatDayTitle]="formatDayTitle"
+                [formatHourColumn]="formatHourColumn"
+                [allDayLabel]="allDayLabel"
+                [hourParts]="hourParts"
+                [hourSegments]="hourSegments"
+                [eventSource]="eventSource"
+                [markDisabled]="markDisabled"
+                [dayviewAllDayEventTemplate]="dayviewAllDayEventTemplate||defaultAllDayEventTemplate"
+                [dayviewNormalEventTemplate]="dayviewNormalEventTemplate||defaultNormalEventTemplate"
+                [dayviewAllDayEventSectionTemplate]="dayviewAllDayEventSectionTemplate||defaultDayViewAllDayEventSectionTemplate"
+                [dayviewNormalEventSectionTemplate]="dayviewNormalEventSectionTemplate||defaultNormalEventSectionTemplate"
+                [dayviewInactiveAllDayEventSectionTemplate]="dayviewInactiveAllDayEventSectionTemplate||defaultInactiveAllDayEventSectionTemplate"
+                [dayviewInactiveNormalEventSectionTemplate]="dayviewInactiveNormalEventSectionTemplate||defaultInactiveNormalEventSectionTemplate"
+                [locale]="locale"
+                [dateFormatter]="dateFormatter"
+                [dir]="dir"
+                [scrollToHour]="scrollToHour"
+                [preserveScrollPosition]="preserveScrollPosition"
+                [lockSwipeToPrev]="lockSwipeToPrev"
+                [lockSwipes]="lockSwipes"
+                [startHour]="startHour"
+                [endHour]="endHour"
+                [sliderOptions]="sliderOptions"
+                (onRangeChanged)="rangeChanged($event)"
+                (onEventSelected)="eventSelected($event)"
+                (onTimeSelected)="timeSelected($event)"
+                (onTitleChanged)="titleChanged($event)">
+            </dayview>
+        </div>
+    `,
+                styles: [`
+        :host > div { height: 100%; }
+
+        .event-detail-container {
+          border-top: 2px darkgrey solid;
+        }
+
+        .no-events-label {
+          font-weight: bold;
+          color: darkgrey;
+          text-align: center;
+        }
+
+        .event-detail {
+          cursor: pointer;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        .monthview-eventdetail-timecolumn {
+          width: 110px;
+          overflow: hidden;
+        }
+
+        .calendar-event-inner {
+          overflow: hidden;
+          background-color: #3a87ad;
+          color: white;
+          height: 100%;
+          width: 100%;
+          padding: 2px;
+          line-height: 15px;
+          text-align: initial;
+        }
+
+        @media (max-width: 750px) {
+          .calendar-event-inner {
+            font-size: 12px;
+          }
+        }
+    `],
+                providers: [CalendarService]
+            }]
+    }], function () { return [{ type: i1.CalendarService }, { type: undefined, decorators: [{
+                type: Inject,
+                args: [LOCALE_ID]
+            }] }]; }, { 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
+        }], timeInterval: [{
+            type: Input
+        }], autoSelect: [{
+            type: Input
+        }], markDisabled: [{
+            type: Input
+        }], monthviewDisplayEventTemplate: [{
+            type: Input
+        }], monthviewInactiveDisplayEventTemplate: [{
+            type: Input
+        }], monthviewEventDetailTemplate: [{
+            type: Input
+        }], weekviewHeaderTemplate: [{
+            type: Input
+        }], weekviewAllDayEventTemplate: [{
+            type: Input
+        }], weekviewNormalEventTemplate: [{
+            type: Input
+        }], dayviewAllDayEventTemplate: [{
+            type: Input
+        }], dayviewNormalEventTemplate: [{
+            type: Input
+        }], weekviewAllDayEventSectionTemplate: [{
+            type: Input
+        }], weekviewNormalEventSectionTemplate: [{
+            type: Input
+        }], dayviewAllDayEventSectionTemplate: [{
+            type: Input
+        }], dayviewNormalEventSectionTemplate: [{
+            type: Input
+        }], weekviewInactiveAllDayEventSectionTemplate: [{
+            type: Input
+        }], weekviewInactiveNormalEventSectionTemplate: [{
+            type: Input
+        }], dayviewInactiveAllDayEventSectionTemplate: [{
+            type: Input
+        }], dayviewInactiveNormalEventSectionTemplate: [{
+            type: Input
+        }], dateFormatter: [{
+            type: Input
+        }], dir: [{
+            type: Input
+        }], scrollToHour: [{
+            type: Input
+        }], preserveScrollPosition: [{
+            type: Input
+        }], lockSwipeToPrev: [{
+            type: Input
+        }], lockSwipes: [{
+            type: Input
+        }], locale: [{
+            type: Input
+        }], startHour: [{
+            type: Input
+        }], endHour: [{
+            type: Input
+        }], sliderOptions: [{
+            type: Input
+        }], onCurrentDateChanged: [{
+            type: Output
+        }], onRangeChanged: [{
+            type: Output
+        }], onEventSelected: [{
+            type: Output
+        }], onTimeSelected: [{
+            type: Output
+        }], onTitleChanged: [{
+            type: Output
+        }] }); })();

calendar.module.d.ts

@@ -0,2 +1,12 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./monthview";
+import * as i2 from "./weekview";
+import * as i3 from "./dayview";
+import * as i4 from "./calendar";
+import * as i5 from "./init-position-scroll";
+import * as i6 from "@ionic/angular";
+import * as i7 from "@angular/common";
 export declare class NgCalendarModule {
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<NgCalendarModule, [typeof i1.MonthViewComponent, typeof i2.WeekViewComponent, typeof i3.DayViewComponent, typeof i4.CalendarComponent, typeof i5.initPositionScrollComponent], [typeof i6.IonicModule, typeof i7.CommonModule], [typeof i4.CalendarComponent]>;
+    static ɵinj: i0.ɵɵInjectorDef<NgCalendarModule>;
 }

calendar.module.js

@@ -1,2 +0,1 @@
-import * as tslib_1 from "tslib";
 import { NgModule } from '@angular/core';
@@ -10,17 +9,20 @@ import { CommonModule } from '@angular/common';
 import { initPositionScrollComponent } from './init-position-scroll';
-var NgCalendarModule = /** @class */ (function () {
-    function NgCalendarModule() {
-    }
-    NgCalendarModule = tslib_1.__decorate([
-        NgModule({
-            declarations: [
-                MonthViewComponent, WeekViewComponent, DayViewComponent, CalendarComponent, initPositionScrollComponent
-            ],
-            imports: [IonicModule, CommonModule],
-            exports: [CalendarComponent],
-            entryComponents: [CalendarComponent]
-        })
-    ], NgCalendarModule);
-    return NgCalendarModule;
-}());
-export { NgCalendarModule };
+import * as i0 from "@angular/core";
+import * as i1 from "@ionic/angular";
+import * as i2 from "@angular/common";
+export class NgCalendarModule {
+}
+NgCalendarModule.ɵmod = i0.ɵɵdefineNgModule({ type: NgCalendarModule });
+NgCalendarModule.ɵinj = i0.ɵɵdefineInjector({ factory: function NgCalendarModule_Factory(t) { return new (t || NgCalendarModule)(); }, imports: [[IonicModule, CommonModule]] });
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(NgCalendarModule, { declarations: [MonthViewComponent, WeekViewComponent, DayViewComponent, CalendarComponent, initPositionScrollComponent], imports: [IonicModule, CommonModule], exports: [CalendarComponent] }); })();
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(NgCalendarModule, [{
+        type: NgModule,
+        args: [{
+                declarations: [
+                    MonthViewComponent, WeekViewComponent, DayViewComponent, CalendarComponent, initPositionScrollComponent
+                ],
+                imports: [IonicModule, CommonModule],
+                exports: [CalendarComponent]
+            }]
+    }], null, null); })();
+i0.ɵɵsetComponentScope(CalendarComponent, [i1.IonApp, i1.IonAvatar, i1.IonBackButton, i1.IonBackdrop, i1.IonBadge, i1.IonButton, i1.IonButtons, i1.IonCard, i1.IonCardContent, i1.IonCardHeader, i1.IonCardSubtitle, i1.IonCardTitle, i1.IonCheckbox, i1.IonChip, i1.IonCol, i1.IonContent, i1.IonDatetime, i1.IonFab, i1.IonFabButton, i1.IonFabList, i1.IonFooter, i1.IonGrid, i1.IonHeader, i1.IonIcon, i1.IonImg, i1.IonInfiniteScroll, i1.IonInfiniteScrollContent, i1.IonInput, i1.IonItem, i1.IonItemDivider, i1.IonItemGroup, i1.IonItemOption, i1.IonItemOptions, i1.IonItemSliding, i1.IonLabel, i1.IonList, i1.IonListHeader, i1.IonMenu, i1.IonMenuButton, i1.IonMenuToggle, i1.IonNav, i1.IonNavLink, i1.IonNote, i1.IonProgressBar, i1.IonRadio, i1.IonRadioGroup, i1.IonRange, i1.IonRefresher, i1.IonRefresherContent, i1.IonReorder, i1.IonReorderGroup, i1.IonRippleEffect, i1.IonRow, i1.IonSearchbar, i1.IonSegment, i1.IonSegmentButton, i1.IonSelect, i1.IonSelectOption, i1.IonSkeletonText, i1.IonSlide, i1.IonSlides, i1.IonSpinner, i1.IonSplitPane, i1.IonTabBar, i1.IonTabButton, i1.IonText, i1.IonTextarea, i1.IonThumbnail, i1.IonToggle, i1.IonToolbar, i1.IonTitle, i1.IonTabs, i1.BooleanValueAccessor, i1.NumericValueAccessor, i1.RadioValueAccessor, i1.SelectValueAccessor, i1.TextValueAccessor, i1.IonRouterOutlet, i1.IonBackButtonDelegate, i1.NavDelegate, i1.RouterLinkDelegate, i1.VirtualFooter, i1.VirtualHeader, i1.VirtualItem, i1.IonVirtualScroll, i2.NgClass, i2.NgComponentOutlet, i2.NgForOf, i2.NgIf, i2.NgTemplateOutlet, i2.NgStyle, i2.NgSwitch, i2.NgSwitchCase, i2.NgSwitchDefault, i2.NgPlural, i2.NgPluralCase, MonthViewComponent, WeekViewComponent, DayViewComponent, CalendarComponent, initPositionScrollComponent], [i2.AsyncPipe, i2.UpperCasePipe, i2.LowerCasePipe, i2.JsonPipe, i2.SlicePipe, i2.DecimalPipe, i2.PercentPipe, i2.TitleCasePipe, i2.CurrencyPipe, i2.DatePipe, i2.I18nPluralPipe, i2.I18nSelectPipe, i2.KeyValuePipe]);

calendar.service.d.ts

 import { Observable } from "rxjs";
 import { ICalendarComponent, CalendarMode, QueryMode } from './calendar';
+import * as i0 from "@angular/core";
 export declare class CalendarService {
@@ -16,3 +17,3 @@ queryMode: QueryMode;
     setCurrentDate(val: Date, fromParent?: boolean): void;
-    readonly currentDate: Date;
+    get currentDate(): Date;
     rangeChanged(component: ICalendarComponent): void;
@@ -25,2 +26,4 @@ private getStep;
     slide(direction: number): void;
+    static ɵfac: i0.ɵɵFactoryDef<CalendarService, never>;
+    static ɵprov: i0.ɵɵInjectableDef<CalendarService>;
 }

calendar.service.js

@@ -1,6 +0,6 @@
-import * as tslib_1 from "tslib";
 import { Injectable } from '@angular/core';
 import { Subject } from "rxjs";
-var CalendarService = /** @class */ (function () {
-    function CalendarService() {
+import * as i0 from "@angular/core";
+export class CalendarService {
+    constructor() {
         this.currentDateChangedFromParent = new Subject();
@@ -15,4 +15,3 @@ this.currentDateChangedFromChildren = new Subject();
     }
-    CalendarService.prototype.setCurrentDate = function (val, fromParent) {
-        if (fromParent === void 0) { fromParent = false; }
+    setCurrentDate(val, fromParent = false) {
         this._currentDate = val;
@@ -25,11 +24,7 @@ if (fromParent) {
         }
-    };
-    Object.defineProperty(CalendarService.prototype, "currentDate", {
-        get: function () {
-            return this._currentDate;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    CalendarService.prototype.rangeChanged = function (component) {
+    }
+    get currentDate() {
+        return this._currentDate;
+    }
+    rangeChanged(component) {
         if (this.queryMode === 'local') {
@@ -43,4 +38,4 @@ if (component.eventSource && component.onDataLoaded) {
         }
-    };
-    CalendarService.prototype.getStep = function (mode) {
+    }
+    getStep(mode) {
         switch (mode) {
@@ -66,9 +61,9 @@ case 'month':
         }
-    };
-    CalendarService.prototype.getAdjacentCalendarDate = function (mode, direction) {
-        var step = this.getStep(mode);
-        var calculateCalendarDate = new Date(this.currentDate.getTime()), year = calculateCalendarDate.getFullYear() + direction * step.years, month = calculateCalendarDate.getMonth() + direction * step.months, date = calculateCalendarDate.getDate() + direction * step.days;
+    }
+    getAdjacentCalendarDate(mode, direction) {
+        let step = this.getStep(mode);
+        let calculateCalendarDate = new Date(this.currentDate.getTime()), year = calculateCalendarDate.getFullYear() + direction * step.years, month = calculateCalendarDate.getMonth() + direction * step.months, date = calculateCalendarDate.getDate() + direction * step.days;
         calculateCalendarDate.setFullYear(year, month, date);
         if (mode === 'month') {
-            var firstDayInNextMonth = new Date(year, month + 1, 1);
+            let firstDayInNextMonth = new Date(year, month + 1, 1);
             if (firstDayInNextMonth.getTime() <= calculateCalendarDate.getTime()) {
@@ -79,9 +74,9 @@ calculateCalendarDate = new Date(firstDayInNextMonth.getTime() - 24 * 60 * 60 * 1000);
         return calculateCalendarDate;
-    };
-    CalendarService.prototype.getAdjacentViewStartTime = function (component, direction) {
-        var adjacentCalendarDate = this.getAdjacentCalendarDate(component.mode, direction);
+    }
+    getAdjacentViewStartTime(component, direction) {
+        let adjacentCalendarDate = this.getAdjacentCalendarDate(component.mode, direction);
         return component.getRange(adjacentCalendarDate).startTime;
-    };
-    CalendarService.prototype.populateAdjacentViews = function (component) {
-        var currentViewStartDate, currentViewData, toUpdateViewIndex, currentViewIndex = component.currentViewIndex;
+    }
+    populateAdjacentViews(component) {
+        let currentViewStartDate, currentViewData, toUpdateViewIndex, currentViewIndex = component.currentViewIndex;
         if (component.direction === 1) {
@@ -119,15 +114,14 @@ currentViewStartDate = this.getAdjacentViewStartTime(component, 1);
         }
-    };
-    CalendarService.prototype.loadEvents = function () {
+    }
+    loadEvents() {
         this.eventSourceChanged.next();
-    };
-    CalendarService.prototype.slide = function (direction) {
+    }
+    slide(direction) {
         this.slideChanged.next(direction);
-    };
-    CalendarService = tslib_1.__decorate([
-        Injectable(),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], CalendarService);
-    return CalendarService;
-}());
-export { CalendarService };
+    }
+}
+CalendarService.ɵfac = function CalendarService_Factory(t) { return new (t || CalendarService)(); };
+CalendarService.ɵprov = i0.ɵɵdefineInjectable({ token: CalendarService, factory: CalendarService.ɵfac });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(CalendarService, [{
+        type: Injectable
+    }], function () { return []; }, null); })();

dayview.d.ts

@@ -6,2 +6,3 @@ import { IonSlides } from '@ionic/angular';
 import { IDisplayAllDayEvent, IDayViewAllDayEventSectionTemplateContext, IDayViewNormalEventSectionTemplateContext } from "./calendar";
+import * as i0 from "@angular/core";
 export declare class DayViewComponent implements ICalendarComponent, OnInit, OnChanges {
@@ -77,2 +78,4 @@ private calendarService;
     setScrollPosition(scrollPosition: number): void;
+    static ɵfac: i0.ɵɵFactoryDef<DayViewComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<DayViewComponent, "dayview", never, { "dayviewAllDayEventTemplate": "dayviewAllDayEventTemplate"; "dayviewNormalEventTemplate": "dayviewNormalEventTemplate"; "dayviewAllDayEventSectionTemplate": "dayviewAllDayEventSectionTemplate"; "dayviewNormalEventSectionTemplate": "dayviewNormalEventSectionTemplate"; "dayviewInactiveAllDayEventSectionTemplate": "dayviewInactiveAllDayEventSectionTemplate"; "dayviewInactiveNormalEventSectionTemplate": "dayviewInactiveNormalEventSectionTemplate"; "formatHourColumn": "formatHourColumn"; "formatDayTitle": "formatDayTitle"; "allDayLabel": "allDayLabel"; "hourParts": "hourParts"; "eventSource": "eventSource"; "markDisabled": "markDisabled"; "locale": "locale"; "dateFormatter": "dateFormatter"; "dir": "dir"; "scrollToHour": "scrollToHour"; "preserveScrollPosition": "preserveScrollPosition"; "lockSwipeToPrev": "lockSwipeToPrev"; "lockSwipes": "lockSwipes"; "startHour": "startHour"; "endHour": "endHour"; "sliderOptions": "sliderOptions"; "hourSegments": "hourSegments"; }, { "onRangeChanged": "onRangeChanged"; "onEventSelected": "onEventSelected"; "onTimeSelected": "onTimeSelected"; "onTitleChanged": "onTitleChanged"; }, never, never>;
 }

dayview.js

@@ -1,8 +0,290 @@
-import * as tslib_1 from "tslib";
 import { DatePipe } from '@angular/common';
-import { IonSlides } from '@ionic/angular';
-import { Component, HostBinding, Input, Output, EventEmitter, ViewChild, ViewEncapsulation, TemplateRef, ElementRef } from '@angular/core';
-import { CalendarService } from './calendar.service';
-var DayViewComponent = /** @class */ (function () {
-    function DayViewComponent(calendarService, elm) {
+import { Component, HostBinding, Input, Output, EventEmitter, ViewChild, ViewEncapsulation } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "./calendar.service";
+import * as i2 from "@ionic/angular";
+import * as i3 from "@angular/common";
+import * as i4 from "./init-position-scroll";
+const _c0 = ["daySlider"];
+function DayViewComponent_td_10_ng_template_1_Template(rf, ctx) { }
+const _c1 = function (a0) { return { "calendar-event-wrap": a0 }; };
+const _c2 = function (a0) { return { height: a0 }; };
+const _c3 = function (a0, a1) { return { allDayEvents: a0, eventTemplate: a1 }; };
+function DayViewComponent_td_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "td", 11);
+    i0.ɵɵtemplate(1, DayViewComponent_td_10_ng_template_1_Template, 0, 0, "ng-template", 12);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r250 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c1, ctx_r250.views[0].allDayEvents.length > 0))("ngStyle", i0.ɵɵpureFunction1(6, _c2, 25 * ctx_r250.views[0].allDayEvents.length + "px"));
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r250.dayviewAllDayEventSectionTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(8, _c3, ctx_r250.views[0].allDayEvents, ctx_r250.dayviewAllDayEventTemplate));
+} }
+function DayViewComponent_td_11_ng_template_1_Template(rf, ctx) { }
+const _c4 = function (a0) { return { allDayEvents: a0 }; };
+function DayViewComponent_td_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "td", 13);
+    i0.ɵɵtemplate(1, DayViewComponent_td_11_ng_template_1_Template, 0, 0, "ng-template", 12);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r251 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r251.dayviewInactiveAllDayEventSectionTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c4, ctx_r251.views[0].allDayEvents));
+} }
+function DayViewComponent_init_position_scroll_12_tr_3_ng_template_4_Template(rf, ctx) { }
+const _c5 = function (a0, a1, a2) { return { tm: a0, hourParts: a1, eventTemplate: a2 }; };
+function DayViewComponent_init_position_scroll_12_tr_3_Template(rf, ctx) { if (rf & 1) {
+    const _r269 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "tr");
+    i0.ɵɵelementStart(1, "td", 17);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "td", 18);
+    i0.ɵɵlistener("click", function DayViewComponent_init_position_scroll_12_tr_3_Template_td_click_3_listener() { i0.ɵɵrestoreView(_r269); const tm_r265 = ctx.$implicit; const ctx_r268 = i0.ɵɵnextContext(2); return ctx_r268.select(tm_r265.time, tm_r265.events); });
+    i0.ɵɵtemplate(4, DayViewComponent_init_position_scroll_12_tr_3_ng_template_4_Template, 0, 0, "ng-template", 12);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const tm_r265 = ctx.$implicit;
+    const i_r266 = ctx.index;
+    const ctx_r264 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r264.hourColumnLabels[i_r266], " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r264.dayviewNormalEventSectionTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction3(3, _c5, tm_r265, ctx_r264.hourParts, ctx_r264.dayviewNormalEventTemplate));
+} }
+function DayViewComponent_init_position_scroll_12_Template(rf, ctx) { if (rf & 1) {
+    const _r271 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "init-position-scroll", 14);
+    i0.ɵɵlistener("onScroll", function DayViewComponent_init_position_scroll_12_Template_init_position_scroll_onScroll_0_listener($event) { i0.ɵɵrestoreView(_r271); const ctx_r270 = i0.ɵɵnextContext(); return ctx_r270.setScrollPosition($event); });
+    i0.ɵɵelementStart(1, "table", 15);
+    i0.ɵɵelementStart(2, "tbody");
+    i0.ɵɵtemplate(3, DayViewComponent_init_position_scroll_12_tr_3_Template, 5, 7, "tr", 16);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r252 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("initPosition", ctx_r252.initScrollPosition)("emitEvent", ctx_r252.preserveScrollPosition);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngForOf", ctx_r252.views[0].rows);
+} }
+function DayViewComponent_init_position_scroll_13_tr_3_ng_template_4_Template(rf, ctx) { }
+const _c6 = function (a0, a1) { return { tm: a0, hourParts: a1 }; };
+function DayViewComponent_init_position_scroll_13_tr_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr");
+    i0.ɵɵelementStart(1, "td", 17);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "td", 13);
+    i0.ɵɵtemplate(4, DayViewComponent_init_position_scroll_13_tr_3_ng_template_4_Template, 0, 0, "ng-template", 12);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const tm_r273 = ctx.$implicit;
+    const i_r274 = ctx.index;
+    const ctx_r272 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r272.hourColumnLabels[i_r274], " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r272.dayviewInactiveNormalEventSectionTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c6, tm_r273, ctx_r272.hourParts));
+} }
+function DayViewComponent_init_position_scroll_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "init-position-scroll", 19);
+    i0.ɵɵelementStart(1, "table", 15);
+    i0.ɵɵelementStart(2, "tbody");
+    i0.ɵɵtemplate(3, DayViewComponent_init_position_scroll_13_tr_3_Template, 5, 6, "tr", 16);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r253 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("initPosition", ctx_r253.initScrollPosition);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngForOf", ctx_r253.views[0].rows);
+} }
+function DayViewComponent_td_22_ng_template_1_Template(rf, ctx) { }
+function DayViewComponent_td_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "td", 11);
+    i0.ɵɵtemplate(1, DayViewComponent_td_22_ng_template_1_Template, 0, 0, "ng-template", 12);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r254 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c1, ctx_r254.views[1].allDayEvents.length > 0))("ngStyle", i0.ɵɵpureFunction1(6, _c2, 25 * ctx_r254.views[1].allDayEvents.length + "px"));
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r254.dayviewAllDayEventSectionTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(8, _c3, ctx_r254.views[1].allDayEvents, ctx_r254.dayviewAllDayEventTemplate));
+} }
+function DayViewComponent_td_23_ng_template_1_Template(rf, ctx) { }
+function DayViewComponent_td_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "td", 13);
+    i0.ɵɵtemplate(1, DayViewComponent_td_23_ng_template_1_Template, 0, 0, "ng-template", 12);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r255 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r255.dayviewInactiveAllDayEventSectionTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c4, ctx_r255.views[1].allDayEvents));
+} }
+function DayViewComponent_init_position_scroll_24_tr_3_ng_template_4_Template(rf, ctx) { }
+function DayViewComponent_init_position_scroll_24_tr_3_Template(rf, ctx) { if (rf & 1) {
+    const _r283 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "tr");
+    i0.ɵɵelementStart(1, "td", 17);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "td", 18);
+    i0.ɵɵlistener("click", function DayViewComponent_init_position_scroll_24_tr_3_Template_td_click_3_listener() { i0.ɵɵrestoreView(_r283); const tm_r279 = ctx.$implicit; const ctx_r282 = i0.ɵɵnextContext(2); return ctx_r282.select(tm_r279.time, tm_r279.events); });
+    i0.ɵɵtemplate(4, DayViewComponent_init_position_scroll_24_tr_3_ng_template_4_Template, 0, 0, "ng-template", 12);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const tm_r279 = ctx.$implicit;
+    const i_r280 = ctx.index;
+    const ctx_r278 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r278.hourColumnLabels[i_r280], " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r278.dayviewNormalEventSectionTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction3(3, _c5, tm_r279, ctx_r278.hourParts, ctx_r278.dayviewNormalEventTemplate));
+} }
+function DayViewComponent_init_position_scroll_24_Template(rf, ctx) { if (rf & 1) {
+    const _r285 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "init-position-scroll", 14);
+    i0.ɵɵlistener("onScroll", function DayViewComponent_init_position_scroll_24_Template_init_position_scroll_onScroll_0_listener($event) { i0.ɵɵrestoreView(_r285); const ctx_r284 = i0.ɵɵnextContext(); return ctx_r284.setScrollPosition($event); });
+    i0.ɵɵelementStart(1, "table", 15);
+    i0.ɵɵelementStart(2, "tbody");
+    i0.ɵɵtemplate(3, DayViewComponent_init_position_scroll_24_tr_3_Template, 5, 7, "tr", 16);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r256 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("initPosition", ctx_r256.initScrollPosition)("emitEvent", ctx_r256.preserveScrollPosition);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngForOf", ctx_r256.views[1].rows);
+} }
+function DayViewComponent_init_position_scroll_25_tr_3_ng_template_4_Template(rf, ctx) { }
+function DayViewComponent_init_position_scroll_25_tr_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr");
+    i0.ɵɵelementStart(1, "td", 17);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "td", 13);
+    i0.ɵɵtemplate(4, DayViewComponent_init_position_scroll_25_tr_3_ng_template_4_Template, 0, 0, "ng-template", 12);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const tm_r287 = ctx.$implicit;
+    const i_r288 = ctx.index;
+    const ctx_r286 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r286.hourColumnLabels[i_r288], " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r286.dayviewInactiveNormalEventSectionTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c6, tm_r287, ctx_r286.hourParts));
+} }
+function DayViewComponent_init_position_scroll_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "init-position-scroll", 19);
+    i0.ɵɵelementStart(1, "table", 15);
+    i0.ɵɵelementStart(2, "tbody");
+    i0.ɵɵtemplate(3, DayViewComponent_init_position_scroll_25_tr_3_Template, 5, 6, "tr", 16);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r257 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("initPosition", ctx_r257.initScrollPosition);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngForOf", ctx_r257.views[1].rows);
+} }
+function DayViewComponent_td_34_ng_template_1_Template(rf, ctx) { }
+function DayViewComponent_td_34_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "td", 11);
+    i0.ɵɵtemplate(1, DayViewComponent_td_34_ng_template_1_Template, 0, 0, "ng-template", 12);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r258 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c1, ctx_r258.views[2].allDayEvents.length > 0))("ngStyle", i0.ɵɵpureFunction1(6, _c2, 25 * ctx_r258.views[2].allDayEvents.length + "px"));
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r258.dayviewAllDayEventSectionTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(8, _c3, ctx_r258.views[2].allDayEvents, ctx_r258.dayviewAllDayEventTemplate));
+} }
+function DayViewComponent_td_35_ng_template_1_Template(rf, ctx) { }
+function DayViewComponent_td_35_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "td", 13);
+    i0.ɵɵtemplate(1, DayViewComponent_td_35_ng_template_1_Template, 0, 0, "ng-template", 12);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r259 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r259.dayviewInactiveAllDayEventSectionTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c4, ctx_r259.views[2].allDayEvents));
+} }
+function DayViewComponent_init_position_scroll_36_tr_3_ng_template_4_Template(rf, ctx) { }
+function DayViewComponent_init_position_scroll_36_tr_3_Template(rf, ctx) { if (rf & 1) {
+    const _r297 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "tr");
+    i0.ɵɵelementStart(1, "td", 17);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "td", 18);
+    i0.ɵɵlistener("click", function DayViewComponent_init_position_scroll_36_tr_3_Template_td_click_3_listener() { i0.ɵɵrestoreView(_r297); const tm_r293 = ctx.$implicit; const ctx_r296 = i0.ɵɵnextContext(2); return ctx_r296.select(tm_r293.time, tm_r293.events); });
+    i0.ɵɵtemplate(4, DayViewComponent_init_position_scroll_36_tr_3_ng_template_4_Template, 0, 0, "ng-template", 12);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const tm_r293 = ctx.$implicit;
+    const i_r294 = ctx.index;
+    const ctx_r292 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r292.hourColumnLabels[i_r294], " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r292.dayviewNormalEventSectionTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction3(3, _c5, tm_r293, ctx_r292.hourParts, ctx_r292.dayviewNormalEventTemplate));
+} }
+function DayViewComponent_init_position_scroll_36_Template(rf, ctx) { if (rf & 1) {
+    const _r299 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "init-position-scroll", 14);
+    i0.ɵɵlistener("onScroll", function DayViewComponent_init_position_scroll_36_Template_init_position_scroll_onScroll_0_listener($event) { i0.ɵɵrestoreView(_r299); const ctx_r298 = i0.ɵɵnextContext(); return ctx_r298.setScrollPosition($event); });
+    i0.ɵɵelementStart(1, "table", 15);
+    i0.ɵɵelementStart(2, "tbody");
+    i0.ɵɵtemplate(3, DayViewComponent_init_position_scroll_36_tr_3_Template, 5, 7, "tr", 16);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r260 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("initPosition", ctx_r260.initScrollPosition)("emitEvent", ctx_r260.preserveScrollPosition);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngForOf", ctx_r260.views[2].rows);
+} }
+function DayViewComponent_init_position_scroll_37_tr_3_ng_template_4_Template(rf, ctx) { }
+function DayViewComponent_init_position_scroll_37_tr_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr");
+    i0.ɵɵelementStart(1, "td", 17);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "td", 13);
+    i0.ɵɵtemplate(4, DayViewComponent_init_position_scroll_37_tr_3_ng_template_4_Template, 0, 0, "ng-template", 12);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const tm_r301 = ctx.$implicit;
+    const i_r302 = ctx.index;
+    const ctx_r300 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r300.hourColumnLabels[i_r302], " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r300.dayviewInactiveNormalEventSectionTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c6, tm_r301, ctx_r300.hourParts));
+} }
+function DayViewComponent_init_position_scroll_37_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "init-position-scroll", 19);
+    i0.ɵɵelementStart(1, "table", 15);
+    i0.ɵɵelementStart(2, "tbody");
+    i0.ɵɵtemplate(3, DayViewComponent_init_position_scroll_37_tr_3_Template, 5, 6, "tr", 16);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r261 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("initPosition", ctx_r261.initScrollPosition);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngForOf", ctx_r261.views[2].rows);
+} }
+export class DayViewComponent {
+    constructor(calendarService, elm) {
         this.calendarService = calendarService;
@@ -24,5 +306,3 @@ this.elm = elm;
     }
-    DayViewComponent_1 = DayViewComponent;
-    DayViewComponent.prototype.ngOnInit = function () {
-        var _this = this;
+    ngOnInit() {
         if (!this.sliderOptions) {
@@ -37,5 +317,5 @@ this.sliderOptions = {};
         else {
-            var datePipe_1 = new DatePipe(this.locale);
+            let datePipe = new DatePipe(this.locale);
             this.formatTitle = function (date) {
-                return datePipe_1.transform(date, this.formatDayTitle);
+                return datePipe.transform(date, this.formatDayTitle);
             };
@@ -47,5 +327,5 @@ }
         else {
-            var datePipe_2 = new DatePipe(this.locale);
+            let datePipe = new DatePipe(this.locale);
             this.formatHourColumnLabel = function (date) {
-                return datePipe_2.transform(date, this.formatHourColumn);
+                return datePipe.transform(date, this.formatHourColumn);
             };
@@ -62,45 +342,45 @@ }
         this.inited = true;
-        this.currentDateChangedFromParentSubscription = this.calendarService.currentDateChangedFromParent$.subscribe(function (currentDate) {
-            _this.refreshView();
+        this.currentDateChangedFromParentSubscription = this.calendarService.currentDateChangedFromParent$.subscribe(currentDate => {
+            this.refreshView();
         });
-        this.eventSourceChangedSubscription = this.calendarService.eventSourceChanged$.subscribe(function () {
-            _this.onDataLoaded();
+        this.eventSourceChangedSubscription = this.calendarService.eventSourceChanged$.subscribe(() => {
+            this.onDataLoaded();
         });
-        this.slideChangedSubscription = this.calendarService.slideChanged$.subscribe(function (direction) {
+        this.slideChangedSubscription = this.calendarService.slideChanged$.subscribe(direction => {
             if (direction == 1) {
-                _this.slider.slideNext();
+                this.slider.slideNext();
             }
             else if (direction == -1) {
-                _this.slider.slidePrev();
+                this.slider.slidePrev();
             }
         });
-    };
-    DayViewComponent.prototype.ngAfterViewInit = function () {
-        var title = this.getTitle();
+    }
+    ngAfterViewInit() {
+        let title = this.getTitle();
         this.onTitleChanged.emit(title);
         if (this.scrollToHour > 0) {
-            var hourColumns_1 = this.elm.nativeElement.querySelector('.dayview-normal-event-container').querySelectorAll('.calendar-hour-column');
-            var me_1 = this;
+            let hourColumns = this.elm.nativeElement.querySelector('.dayview-normal-event-container').querySelectorAll('.calendar-hour-column');
+            let me = this;
             setTimeout(function () {
-                me_1.initScrollPosition = hourColumns_1[me_1.scrollToHour - me_1.startHour].offsetTop;
+                me.initScrollPosition = hourColumns[me.scrollToHour - me.startHour].offsetTop;
             }, 50);
         }
-    };
-    DayViewComponent.prototype.ngOnChanges = function (changes) {
+    }
+    ngOnChanges(changes) {
         if (!this.inited)
             return;
-        var eventSourceChange = changes['eventSource'];
+        let eventSourceChange = changes['eventSource'];
         if (eventSourceChange && eventSourceChange.currentValue) {
             this.onDataLoaded();
         }
-        var lockSwipeToPrev = changes['lockSwipeToPrev'];
+        let lockSwipeToPrev = changes['lockSwipeToPrev'];
         if (lockSwipeToPrev) {
             this.slider.lockSwipeToPrev(lockSwipeToPrev.currentValue);
         }
-        var lockSwipes = changes['lockSwipes'];
+        let lockSwipes = changes['lockSwipes'];
         if (lockSwipes) {
             this.slider.lockSwipes(lockSwipes.currentValue);
         }
-    };
-    DayViewComponent.prototype.ngOnDestroy = function () {
+    }
+    ngOnDestroy() {
         if (this.currentDateChangedFromParentSubscription) {
@@ -118,5 +398,4 @@ this.currentDateChangedFromParentSubscription.unsubscribe();
         }
-    };
-    DayViewComponent.prototype.onSlideChanged = function () {
-        var _this = this;
+    }
+    onSlideChanged() {
         if (this.callbackOnInit) {
@@ -126,4 +405,4 @@ this.callbackOnInit = false;
         }
-        var direction = 0, currentViewIndex = this.currentViewIndex;
-        this.slider.getActiveIndex().then(function (currentSlideIndex) {
+        let direction = 0, currentViewIndex = this.currentViewIndex;
+        this.slider.getActiveIndex().then((currentSlideIndex) => {
             currentSlideIndex = (currentSlideIndex + 2) % 3;
@@ -135,3 +414,3 @@ if (currentSlideIndex - currentViewIndex === 1) {
                 direction = 1;
-                _this.slider.slideTo(1, 0, false);
+                this.slider.slideTo(1, 0, false);
             }
@@ -143,19 +422,19 @@ else if (currentViewIndex - currentSlideIndex === 1) {
                 direction = -1;
-                _this.slider.slideTo(3, 0, false);
+                this.slider.slideTo(3, 0, false);
             }
-            _this.currentViewIndex = currentSlideIndex;
-            _this.move(direction);
+            this.currentViewIndex = currentSlideIndex;
+            this.move(direction);
         });
-    };
-    DayViewComponent.prototype.move = function (direction) {
+    }
+    move(direction) {
         if (direction === 0)
             return;
         this.direction = direction;
-        var adjacentDate = this.calendarService.getAdjacentCalendarDate(this.mode, direction);
+        let adjacentDate = this.calendarService.getAdjacentCalendarDate(this.mode, direction);
         this.calendarService.setCurrentDate(adjacentDate);
         this.refreshView();
         this.direction = 0;
-    };
-    DayViewComponent.createDateObjects = function (startTime, startHour, endHour, timeInterval) {
-        var rows = [], time, currentHour = startTime.getHours(), currentDate = startTime.getDate(), hourStep, minStep;
+    }
+    static createDateObjects(startTime, startHour, endHour, timeInterval) {
+        let rows = [], time, currentHour = startTime.getHours(), currentDate = startTime.getDate(), hourStep, minStep;
         if (timeInterval < 1) {
@@ -169,4 +448,4 @@ hourStep = Math.floor(1 / timeInterval);
         }
-        for (var hour = startHour; hour < endHour; hour += hourStep) {
-            for (var interval = 0; interval < 60; interval += minStep) {
+        for (let hour = startHour; hour < endHour; hour += hourStep) {
+            for (let interval = 0; interval < 60; interval += minStep) {
                 time = new Date(startTime.getTime());
@@ -182,18 +461,18 @@ time.setHours(currentHour + hour, interval);
         return rows;
-    };
-    DayViewComponent.prototype.getHourColumnLabels = function () {
-        var hourColumnLabels = [];
-        for (var hour = 0, length_1 = this.views[0].rows.length; hour < length_1; hour += 1) {
+    }
+    getHourColumnLabels() {
+        let hourColumnLabels = [];
+        for (let hour = 0, length = this.views[0].rows.length; hour < length; hour += 1) {
             hourColumnLabels.push(this.formatHourColumnLabel(this.views[0].rows[hour].time));
         }
         return hourColumnLabels;
-    };
-    DayViewComponent.prototype.getViewData = function (startTime) {
+    }
+    getViewData(startTime) {
         return {
-            rows: DayViewComponent_1.createDateObjects(startTime, this.startHour, this.endHour, this.hourSegments),
+            rows: DayViewComponent.createDateObjects(startTime, this.startHour, this.endHour, this.hourSegments),
             allDayEvents: []
         };
-    };
-    DayViewComponent.prototype.getRange = function (currentDate) {
-        var year = currentDate.getFullYear(), month = currentDate.getMonth(), date = currentDate.getDate(), startTime = new Date(year, month, date), endTime = new Date(year, month, date + 1);
+    }
+    getRange(currentDate) {
+        let year = currentDate.getFullYear(), month = currentDate.getMonth(), date = currentDate.getDate(), startTime = new Date(year, month, date), endTime = new Date(year, month, date + 1);
         return {
@@ -203,13 +482,13 @@ startTime: startTime,
         };
-    };
-    DayViewComponent.prototype.onDataLoaded = function () {
-        var eventSource = this.eventSource, len = eventSource ? eventSource.length : 0, startTime = this.range.startTime, endTime = this.range.endTime, utcStartTime = new Date(Date.UTC(startTime.getFullYear(), startTime.getMonth(), startTime.getDate())), utcEndTime = new Date(Date.UTC(endTime.getFullYear(), endTime.getMonth(), endTime.getDate())), currentViewIndex = this.currentViewIndex, rows = this.views[currentViewIndex].rows, allDayEvents = this.views[currentViewIndex].allDayEvents = [], oneHour = 3600000, eps = 0.016, normalEventInRange = false, rangeStartRowIndex = this.startHour * this.hourSegments, rangeEndRowIndex = this.endHour * this.hourSegments;
-        for (var hour = 0; hour < this.hourRange; hour += 1) {
+    }
+    onDataLoaded() {
+        let eventSource = this.eventSource, len = eventSource ? eventSource.length : 0, startTime = this.range.startTime, endTime = this.range.endTime, utcStartTime = new Date(Date.UTC(startTime.getFullYear(), startTime.getMonth(), startTime.getDate())), utcEndTime = new Date(Date.UTC(endTime.getFullYear(), endTime.getMonth(), endTime.getDate())), currentViewIndex = this.currentViewIndex, rows = this.views[currentViewIndex].rows, allDayEvents = this.views[currentViewIndex].allDayEvents = [], oneHour = 3600000, eps = 0.016, normalEventInRange = false, rangeStartRowIndex = this.startHour * this.hourSegments, rangeEndRowIndex = this.endHour * this.hourSegments;
+        for (let hour = 0; hour < this.hourRange; hour += 1) {
             rows[hour].events = [];
         }
-        for (var i = 0; i < len; i += 1) {
-            var event_1 = eventSource[i];
-            var eventStartTime = new Date(event_1.startTime.getTime());
-            var eventEndTime = new Date(event_1.endTime.getTime());
-            if (event_1.allDay) {
+        for (let i = 0; i < len; i += 1) {
+            let event = eventSource[i];
+            let eventStartTime = new Date(event.startTime.getTime());
+            let eventEndTime = new Date(event.endTime.getTime());
+            if (event.allDay) {
                 if (eventEndTime <= utcStartTime || eventStartTime >= utcEndTime) {
@@ -220,3 +499,3 @@ continue;
                     allDayEvents.push({
-                        event: event_1
+                        event: event
                     });
@@ -232,4 +511,4 @@ }
                 }
-                var timeDiff = void 0;
-                var timeDifferenceStart = void 0;
+                let timeDiff;
+                let timeDifferenceStart;
                 if (eventStartTime <= startTime) {
@@ -242,3 +521,3 @@ timeDifferenceStart = 0;
                 }
-                var timeDifferenceEnd = void 0;
+                let timeDifferenceEnd;
                 if (eventEndTime >= endTime) {
@@ -252,6 +531,6 @@ timeDiff = endTime.getTime() - startTime.getTime() - (endTime.getTimezoneOffset() - startTime.getTimezoneOffset()) * 60000;
                 }
-                var startIndex = Math.floor(timeDifferenceStart);
-                var endIndex = Math.ceil(timeDifferenceEnd - eps);
-                var startOffset = 0;
-                var endOffset = 0;
+                let startIndex = Math.floor(timeDifferenceStart);
+                let endIndex = Math.ceil(timeDifferenceEnd - eps);
+                let startOffset = 0;
+                let endOffset = 0;
                 if (this.hourParts !== 1) {
@@ -282,4 +561,4 @@ if (startIndex < rangeStartRowIndex) {
                 if (startIndex < endIndex) {
-                    var displayEvent = {
-                        event: event_1,
+                    let displayEvent = {
+                        event: event,
                         startIndex: startIndex,
@@ -290,3 +569,3 @@ endIndex: endIndex,
                     };
-                    var eventSet = rows[startIndex].events;
+                    let eventSet = rows[startIndex].events;
                     if (eventSet) {
@@ -304,6 +583,6 @@ eventSet.push(displayEvent);
         if (normalEventInRange) {
-            var orderedEvents = [];
-            for (var hour = 0; hour < this.hourRange; hour += 1) {
+            let orderedEvents = [];
+            for (let hour = 0; hour < this.hourRange; hour += 1) {
                 if (rows[hour].events) {
-                    rows[hour].events.sort(DayViewComponent_1.compareEventByStartOffset);
+                    rows[hour].events.sort(DayViewComponent.compareEventByStartOffset);
                     orderedEvents = orderedEvents.concat(rows[hour].events);
@@ -316,7 +595,7 @@ }
         }
-    };
-    DayViewComponent.prototype.refreshView = function () {
+    }
+    refreshView() {
         this.range = this.getRange(this.calendarService.currentDate);
         if (this.inited) {
-            var title = this.getTitle();
+            let title = this.getTitle();
             this.onTitleChanged.emit(title);
@@ -326,13 +605,13 @@ }
         this.calendarService.rangeChanged(this);
-    };
-    DayViewComponent.prototype.getTitle = function () {
-        var startingDate = new Date(this.range.startTime.getTime());
+    }
+    getTitle() {
+        let startingDate = new Date(this.range.startTime.getTime());
         startingDate.setHours(12, 0, 0, 0);
         return this.formatTitle(startingDate);
-    };
-    DayViewComponent.compareEventByStartOffset = function (eventA, eventB) {
+    }
+    static compareEventByStartOffset(eventA, eventB) {
         return eventA.startOffset - eventB.startOffset;
-    };
-    DayViewComponent.prototype.select = function (selectedTime, events) {
-        var disabled = false;
+    }
+    select(selectedTime, events) {
+        let disabled = false;
         if (this.markDisabled) {
@@ -343,15 +622,15 @@ disabled = this.markDisabled(selectedTime);
             selectedTime: selectedTime,
-            events: events.map(function (e) { return e.event; }),
+            events: events.map(e => e.event),
             disabled: disabled
         });
-    };
-    DayViewComponent.prototype.placeEvents = function (orderedEvents) {
+    }
+    placeEvents(orderedEvents) {
         this.calculatePosition(orderedEvents);
-        DayViewComponent_1.calculateWidth(orderedEvents, this.hourRange, this.hourParts);
-    };
-    DayViewComponent.prototype.placeAllDayEvents = function (orderedEvents) {
+        DayViewComponent.calculateWidth(orderedEvents, this.hourRange, this.hourParts);
+    }
+    placeAllDayEvents(orderedEvents) {
         this.calculatePosition(orderedEvents);
-    };
-    DayViewComponent.prototype.overlap = function (event1, event2) {
-        var earlyEvent = event1, lateEvent = event2;
+    }
+    overlap(event1, event2) {
+        let earlyEvent = event1, lateEvent = event2;
         if (event1.startIndex > event2.startIndex || (event1.startIndex === event2.startIndex && event1.startOffset > event2.startOffset)) {
@@ -367,10 +646,10 @@ earlyEvent = event2;
         }
-    };
-    DayViewComponent.prototype.calculatePosition = function (events) {
-        var len = events.length, maxColumn = 0, col, isForbidden = new Array(len);
-        for (var i = 0; i < len; i += 1) {
+    }
+    calculatePosition(events) {
+        let len = events.length, maxColumn = 0, col, isForbidden = new Array(len);
+        for (let i = 0; i < len; i += 1) {
             for (col = 0; col < maxColumn; col += 1) {
                 isForbidden[col] = false;
             }
-            for (var j = 0; j < i; j += 1) {
+            for (let j = 0; j < i; j += 1) {
                 if (this.overlap(events[i], events[j])) {
@@ -393,15 +672,15 @@ isForbidden[events[j].position] = true;
         if (this.dir === 'rtl') {
-            for (var i = 0; i < len; i += 1) {
+            for (let i = 0; i < len; i += 1) {
                 events[i].position = maxColumn - 1 - events[i].position;
             }
         }
-    };
-    DayViewComponent.calculateWidth = function (orderedEvents, size, hourParts) {
-        var totalSize = size * hourParts, cells = new Array(totalSize);
+    }
+    static calculateWidth(orderedEvents, size, hourParts) {
+        let totalSize = size * hourParts, cells = new Array(totalSize);
         // sort by position in descending order, the right most columns should be calculated first
-        orderedEvents.sort(function (eventA, eventB) {
+        orderedEvents.sort((eventA, eventB) => {
             return eventB.position - eventA.position;
         });
-        for (var i_1 = 0; i_1 < totalSize; i_1 += 1) {
-            cells[i_1] = {
+        for (let i = 0; i < totalSize; i += 1) {
+            cells[i] = {
                 calculated: false,
@@ -411,27 +690,27 @@ events: []
         }
-        var len = orderedEvents.length;
-        for (var i_2 = 0; i_2 < len; i_2 += 1) {
-            var event_2 = orderedEvents[i_2];
-            var index = event_2.startIndex * hourParts + event_2.startOffset;
-            while (index < event_2.endIndex * hourParts - event_2.endOffset) {
-                cells[index].events.push(event_2);
+        let len = orderedEvents.length;
+        for (let i = 0; i < len; i += 1) {
+            let event = orderedEvents[i];
+            let index = event.startIndex * hourParts + event.startOffset;
+            while (index < event.endIndex * hourParts - event.endOffset) {
+                cells[index].events.push(event);
                 index += 1;
             }
         }
-        var i = 0;
+        let i = 0;
         while (i < len) {
-            var event_3 = orderedEvents[i];
-            if (!event_3.overlapNumber) {
-                var overlapNumber = event_3.position + 1;
-                event_3.overlapNumber = overlapNumber;
-                var eventQueue = [event_3];
-                while ((event_3 = eventQueue.shift())) {
-                    var index = event_3.startIndex * hourParts + event_3.startOffset;
-                    while (index < event_3.endIndex * hourParts - event_3.endOffset) {
+            let event = orderedEvents[i];
+            if (!event.overlapNumber) {
+                let overlapNumber = event.position + 1;
+                event.overlapNumber = overlapNumber;
+                let eventQueue = [event];
+                while ((event = eventQueue.shift())) {
+                    let index = event.startIndex * hourParts + event.startOffset;
+                    while (index < event.endIndex * hourParts - event.endOffset) {
                         if (!cells[index].calculated) {
                             cells[index].calculated = true;
                             if (cells[index].events) {
-                                var eventCountInCell = cells[index].events.length;
-                                for (var j = 0; j < eventCountInCell; j += 1) {
-                                    var currentEventInCell = cells[index].events[j];
+                                let eventCountInCell = cells[index].events.length;
+                                for (let j = 0; j < eventCountInCell; j += 1) {
+                                    let currentEventInCell = cells[index].events[j];
                                     if (!currentEventInCell.overlapNumber) {
@@ -450,137 +729,531 @@ currentEventInCell.overlapNumber = overlapNumber;
         }
-    };
-    DayViewComponent.prototype.eventSelected = function (event) {
+    }
+    eventSelected(event) {
         this.onEventSelected.emit(event);
-    };
-    DayViewComponent.prototype.setScrollPosition = function (scrollPosition) {
+    }
+    setScrollPosition(scrollPosition) {
         this.initScrollPosition = scrollPosition;
-    };
-    var DayViewComponent_1;
-    tslib_1.__decorate([
-        ViewChild('daySlider'),
-        tslib_1.__metadata("design:type", IonSlides)
-    ], DayViewComponent.prototype, "slider", void 0);
-    tslib_1.__decorate([
-        HostBinding('class.dayview'),
-        tslib_1.__metadata("design:type", Object)
-    ], DayViewComponent.prototype, "class", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", TemplateRef)
-    ], DayViewComponent.prototype, "dayviewAllDayEventTemplate", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", TemplateRef)
-    ], DayViewComponent.prototype, "dayviewNormalEventTemplate", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", TemplateRef)
-    ], DayViewComponent.prototype, "dayviewAllDayEventSectionTemplate", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", TemplateRef)
-    ], DayViewComponent.prototype, "dayviewNormalEventSectionTemplate", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", TemplateRef)
-    ], DayViewComponent.prototype, "dayviewInactiveAllDayEventSectionTemplate", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", TemplateRef)
-    ], DayViewComponent.prototype, "dayviewInactiveNormalEventSectionTemplate", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], DayViewComponent.prototype, "formatHourColumn", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], DayViewComponent.prototype, "formatDayTitle", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], DayViewComponent.prototype, "allDayLabel", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Number)
-    ], DayViewComponent.prototype, "hourParts", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Array)
-    ], DayViewComponent.prototype, "eventSource", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Function)
-    ], DayViewComponent.prototype, "markDisabled", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], DayViewComponent.prototype, "locale", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Object)
-    ], DayViewComponent.prototype, "dateFormatter", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], DayViewComponent.prototype, "dir", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Number)
-    ], DayViewComponent.prototype, "scrollToHour", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], DayViewComponent.prototype, "preserveScrollPosition", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], DayViewComponent.prototype, "lockSwipeToPrev", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], DayViewComponent.prototype, "lockSwipes", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Number)
-    ], DayViewComponent.prototype, "startHour", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Number)
-    ], DayViewComponent.prototype, "endHour", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Object)
-    ], DayViewComponent.prototype, "sliderOptions", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Number)
-    ], DayViewComponent.prototype, "hourSegments", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", Object)
-    ], DayViewComponent.prototype, "onRangeChanged", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", Object)
-    ], DayViewComponent.prototype, "onEventSelected", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", Object)
-    ], DayViewComponent.prototype, "onTimeSelected", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", Object)
-    ], DayViewComponent.prototype, "onTitleChanged", void 0);
-    DayViewComponent = DayViewComponent_1 = tslib_1.__decorate([
-        Component({
-            selector: 'dayview',
-            template: "\n        <ion-slides #daySlider [options]=\"sliderOptions\" [dir]=\"dir\" (ionSlideDidChange)=\"onSlideChanged()\" class=\"slides-container\">\n            <ion-slide class=\"slide-container\">\n                <div class=\"dayview-allday-table\">\n                    <div class=\"dayview-allday-label\">{{allDayLabel}}</div>\n                    <div class=\"dayview-allday-content-wrapper scroll-content\">\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                                    <ng-template [ngTemplateOutlet]=\"dayviewAllDayEventSectionTemplate\"\n                                                 [ngTemplateOutletContext]=\"{allDayEvents:views[0].allDayEvents,eventTemplate:dayviewAllDayEventTemplate}\">\n                                    </ng-template>\n                                </td>\n                                <td class=\"calendar-cell\" *ngIf=\"0!==currentViewIndex\">\n                                    <ng-template [ngTemplateOutlet]=\"dayviewInactiveAllDayEventSectionTemplate\"\n                                                 [ngTemplateOutletContext]=\"{allDayEvents:views[0].allDayEvents}\">\n                                    </ng-template>\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </div>\n                </div>\n                <init-position-scroll *ngIf=\"0===currentViewIndex\" class=\"dayview-normal-event-container\" [initPosition]=\"initScrollPosition\" [emitEvent]=\"preserveScrollPosition\" (onScroll)=\"setScrollPosition($event)\">\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[0].rows; let i = index\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{hourColumnLabels[i]}}\n                            </td>\n                            <td class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n                                <ng-template [ngTemplateOutlet]=\"dayviewNormalEventSectionTemplate\"\n                                             [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts, eventTemplate:dayviewNormalEventTemplate}\">\n                                </ng-template>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                </init-position-scroll>\n                <init-position-scroll *ngIf=\"0!==currentViewIndex\" class=\"dayview-normal-event-container\" [initPosition]=\"initScrollPosition\">\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[0].rows; let i = index\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{hourColumnLabels[i]}}\n                            </td>\n                            <td class=\"calendar-cell\">\n                                <ng-template [ngTemplateOutlet]=\"dayviewInactiveNormalEventSectionTemplate\"\n                                             [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts}\">\n                                </ng-template>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                </init-position-scroll>\n            </ion-slide>\n            <ion-slide class=\"slide-container\">\n                <div class=\"dayview-allday-table\">\n                    <div class=\"dayview-allday-label\">{{allDayLabel}}</div>\n                    <div class=\"dayview-allday-content-wrapper scroll-content\">\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                                    <ng-template [ngTemplateOutlet]=\"dayviewAllDayEventSectionTemplate\"\n                                                 [ngTemplateOutletContext]=\"{allDayEvents:views[1].allDayEvents,eventTemplate:dayviewAllDayEventTemplate}\">\n                                    </ng-template>\n                                </td>\n                                <td class=\"calendar-cell\" *ngIf=\"1!==currentViewIndex\">\n                                    <ng-template [ngTemplateOutlet]=\"dayviewInactiveAllDayEventSectionTemplate\"\n                                                 [ngTemplateOutletContext]=\"{allDayEvents:views[1].allDayEvents}\">\n                                    </ng-template>\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </div>\n                </div>\n                <init-position-scroll *ngIf=\"1===currentViewIndex\" class=\"dayview-normal-event-container\" [initPosition]=\"initScrollPosition\" [emitEvent]=\"preserveScrollPosition\" (onScroll)=\"setScrollPosition($event)\">\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[1].rows; let i = index\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{hourColumnLabels[i]}}\n                            </td>\n                            <td class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n                                <ng-template [ngTemplateOutlet]=\"dayviewNormalEventSectionTemplate\"\n                                             [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts, eventTemplate:dayviewNormalEventTemplate}\">\n                                </ng-template>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                </init-position-scroll>\n                <init-position-scroll *ngIf=\"1!==currentViewIndex\" class=\"dayview-normal-event-container\" [initPosition]=\"initScrollPosition\">\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[1].rows; let i = index\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{hourColumnLabels[i]}}\n                            </td>\n                            <td class=\"calendar-cell\">\n                                <ng-template [ngTemplateOutlet]=\"dayviewInactiveNormalEventSectionTemplate\"\n                                             [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts}\">\n                                </ng-template>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                </init-position-scroll>\n            </ion-slide>\n            <ion-slide class=\"slide-container\">\n                <div class=\"dayview-allday-table\">\n                    <div class=\"dayview-allday-label\">{{allDayLabel}}</div>\n                    <div class=\"dayview-allday-content-wrapper scroll-content\">\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                                    <ng-template [ngTemplateOutlet]=\"dayviewAllDayEventSectionTemplate\"\n                                                 [ngTemplateOutletContext]=\"{allDayEvents:views[2].allDayEvents,eventTemplate:dayviewAllDayEventTemplate}\">\n                                    </ng-template>\n                                </td>\n                                <td class=\"calendar-cell\" *ngIf=\"2!==currentViewIndex\">\n                                    <ng-template [ngTemplateOutlet]=\"dayviewInactiveAllDayEventSectionTemplate\"\n                                                 [ngTemplateOutletContext]=\"{allDayEvents:views[2].allDayEvents}\">\n                                    </ng-template>\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </div>\n                </div>\n                <init-position-scroll *ngIf=\"2===currentViewIndex\" class=\"dayview-normal-event-container\" [initPosition]=\"initScrollPosition\" [emitEvent]=\"preserveScrollPosition\" (onScroll)=\"setScrollPosition($event)\">\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[2].rows; let i = index\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{hourColumnLabels[i]}}\n                            </td>\n                            <td class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n                                <ng-template [ngTemplateOutlet]=\"dayviewNormalEventSectionTemplate\"\n                                             [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts, eventTemplate:dayviewNormalEventTemplate}\">\n                                </ng-template>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                </init-position-scroll>\n                <init-position-scroll *ngIf=\"2!==currentViewIndex\" class=\"dayview-normal-event-container\" [initPosition]=\"initScrollPosition\">\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of views[2].rows; let i = index\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{hourColumnLabels[i]}}\n                            </td>\n                            <td class=\"calendar-cell\">\n                                <ng-template [ngTemplateOutlet]=\"dayviewInactiveNormalEventSectionTemplate\"\n                                             [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts}\">\n                                </ng-template>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                </init-position-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        .slides-container {\n            height: 100%;\n        }\n\n        .slide-container {\n            display: block;\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          border-left: 1px solid #ddd;\n        }\n\n        [dir=\"rtl\"] .dayview-allday-label {\n            border-right: 1px solid #ddd;\n            float: right;\n        }\n\n        .dayview-allday-content-wrapper {\n          margin-left: 50px;\n          overflow: hidden;\n          height: 51px;\n        }\n\n        [dir=\"rtl\"] .dayview-allday-content-wrapper {\n          margin-left: 0;\n          margin-right: 50px;\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        .scroll-content {\n            overflow-y: auto;\n            overflow-x: hidden;\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          [dir=\"rtl\"] .dayview-allday-content-wrapper {\n            margin-left: 0;\n            margin-right: 31px;\n          }\n        }\n    "],
-            encapsulation: ViewEncapsulation.None
-        }),
-        tslib_1.__metadata("design:paramtypes", [CalendarService, ElementRef])
-    ], DayViewComponent);
-    return DayViewComponent;
-}());
-export { DayViewComponent };
+    }
+}
+DayViewComponent.ɵfac = function DayViewComponent_Factory(t) { return new (t || DayViewComponent)(i0.ɵɵdirectiveInject(i1.CalendarService), i0.ɵɵdirectiveInject(i0.ElementRef)); };
+DayViewComponent.ɵcmp = i0.ɵɵdefineComponent({ type: DayViewComponent, selectors: [["dayview"]], viewQuery: function DayViewComponent_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(_c0, true);
+    } if (rf & 2) {
+        var _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slider = _t.first);
+    } }, hostVars: 2, hostBindings: function DayViewComponent_HostBindings(rf, ctx) { if (rf & 2) {
+        i0.ɵɵclassProp("dayview", ctx.class);
+    } }, inputs: { dayviewAllDayEventTemplate: "dayviewAllDayEventTemplate", dayviewNormalEventTemplate: "dayviewNormalEventTemplate", dayviewAllDayEventSectionTemplate: "dayviewAllDayEventSectionTemplate", dayviewNormalEventSectionTemplate: "dayviewNormalEventSectionTemplate", dayviewInactiveAllDayEventSectionTemplate: "dayviewInactiveAllDayEventSectionTemplate", dayviewInactiveNormalEventSectionTemplate: "dayviewInactiveNormalEventSectionTemplate", formatHourColumn: "formatHourColumn", formatDayTitle: "formatDayTitle", allDayLabel: "allDayLabel", hourParts: "hourParts", eventSource: "eventSource", markDisabled: "markDisabled", locale: "locale", dateFormatter: "dateFormatter", dir: "dir", scrollToHour: "scrollToHour", preserveScrollPosition: "preserveScrollPosition", lockSwipeToPrev: "lockSwipeToPrev", lockSwipes: "lockSwipes", startHour: "startHour", endHour: "endHour", sliderOptions: "sliderOptions", hourSegments: "hourSegments" }, outputs: { onRangeChanged: "onRangeChanged", onEventSelected: "onEventSelected", onTimeSelected: "onTimeSelected", onTitleChanged: "onTitleChanged" }, features: [i0.ɵɵNgOnChangesFeature], decls: 38, vars: 17, consts: [[1, "slides-container", 3, "options", "dir", "ionSlideDidChange"], ["daySlider", ""], [1, "slide-container"], [1, "dayview-allday-table"], [1, "dayview-allday-label"], [1, "dayview-allday-content-wrapper", "scroll-content"], [1, "table", "table-bordered", "dayview-allday-content-table"], ["class", "calendar-cell", 3, "ngClass", "ngStyle", 4, "ngIf"], ["class", "calendar-cell", 4, "ngIf"], ["class", "dayview-normal-event-container", 3, "initPosition", "emitEvent", "onScroll", 4, "ngIf"], ["class", "dayview-normal-event-container", 3, "initPosition", 4, "ngIf"], [1, "calendar-cell", 3, "ngClass", "ngStyle"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "calendar-cell"], [1, "dayview-normal-event-container", 3, "initPosition", "emitEvent", "onScroll"], [1, "table", "table-bordered", "table-fixed", "dayview-normal-event-table"], [4, "ngFor", "ngForOf"], [1, "calendar-hour-column", "text-center"], ["tappable", "", 1, "calendar-cell", 3, "click"], [1, "dayview-normal-event-container", 3, "initPosition"]], template: function DayViewComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "ion-slides", 0, 1);
+        i0.ɵɵlistener("ionSlideDidChange", function DayViewComponent_Template_ion_slides_ionSlideDidChange_0_listener() { return ctx.onSlideChanged(); });
+        i0.ɵɵelementStart(2, "ion-slide", 2);
+        i0.ɵɵelementStart(3, "div", 3);
+        i0.ɵɵelementStart(4, "div", 4);
+        i0.ɵɵtext(5);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(6, "div", 5);
+        i0.ɵɵelementStart(7, "table", 6);
+        i0.ɵɵelementStart(8, "tbody");
+        i0.ɵɵelementStart(9, "tr");
+        i0.ɵɵtemplate(10, DayViewComponent_td_10_Template, 2, 11, "td", 7);
+        i0.ɵɵtemplate(11, DayViewComponent_td_11_Template, 2, 4, "td", 8);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementEnd();
+        i0.ɵɵtemplate(12, DayViewComponent_init_position_scroll_12_Template, 4, 3, "init-position-scroll", 9);
+        i0.ɵɵtemplate(13, DayViewComponent_init_position_scroll_13_Template, 4, 2, "init-position-scroll", 10);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(14, "ion-slide", 2);
+        i0.ɵɵelementStart(15, "div", 3);
+        i0.ɵɵelementStart(16, "div", 4);
+        i0.ɵɵtext(17);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(18, "div", 5);
+        i0.ɵɵelementStart(19, "table", 6);
+        i0.ɵɵelementStart(20, "tbody");
+        i0.ɵɵelementStart(21, "tr");
+        i0.ɵɵtemplate(22, DayViewComponent_td_22_Template, 2, 11, "td", 7);
+        i0.ɵɵtemplate(23, DayViewComponent_td_23_Template, 2, 4, "td", 8);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementEnd();
+        i0.ɵɵtemplate(24, DayViewComponent_init_position_scroll_24_Template, 4, 3, "init-position-scroll", 9);
+        i0.ɵɵtemplate(25, DayViewComponent_init_position_scroll_25_Template, 4, 2, "init-position-scroll", 10);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(26, "ion-slide", 2);
+        i0.ɵɵelementStart(27, "div", 3);
+        i0.ɵɵelementStart(28, "div", 4);
+        i0.ɵɵtext(29);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(30, "div", 5);
+        i0.ɵɵelementStart(31, "table", 6);
+        i0.ɵɵelementStart(32, "tbody");
+        i0.ɵɵelementStart(33, "tr");
+        i0.ɵɵtemplate(34, DayViewComponent_td_34_Template, 2, 11, "td", 7);
+        i0.ɵɵtemplate(35, DayViewComponent_td_35_Template, 2, 4, "td", 8);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementEnd();
+        i0.ɵɵtemplate(36, DayViewComponent_init_position_scroll_36_Template, 4, 3, "init-position-scroll", 9);
+        i0.ɵɵtemplate(37, DayViewComponent_init_position_scroll_37_Template, 4, 2, "init-position-scroll", 10);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementEnd();
+    } if (rf & 2) {
+        i0.ɵɵproperty("options", ctx.sliderOptions)("dir", ctx.dir);
+        i0.ɵɵadvance(5);
+        i0.ɵɵtextInterpolate(ctx.allDayLabel);
+        i0.ɵɵadvance(5);
+        i0.ɵɵproperty("ngIf", 0 === ctx.currentViewIndex);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", 0 !== ctx.currentViewIndex);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", 0 === ctx.currentViewIndex);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", 0 !== ctx.currentViewIndex);
+        i0.ɵɵadvance(4);
+        i0.ɵɵtextInterpolate(ctx.allDayLabel);
+        i0.ɵɵadvance(5);
+        i0.ɵɵproperty("ngIf", 1 === ctx.currentViewIndex);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", 1 !== ctx.currentViewIndex);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", 1 === ctx.currentViewIndex);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", 1 !== ctx.currentViewIndex);
+        i0.ɵɵadvance(4);
+        i0.ɵɵtextInterpolate(ctx.allDayLabel);
+        i0.ɵɵadvance(5);
+        i0.ɵɵproperty("ngIf", 2 === ctx.currentViewIndex);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", 2 !== ctx.currentViewIndex);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", 2 === ctx.currentViewIndex);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", 2 !== ctx.currentViewIndex);
+    } }, directives: [i2.IonSlides, i2.IonSlide, i3.NgIf, i3.NgClass, i3.NgStyle, i3.NgTemplateOutlet, i4.initPositionScrollComponent, i3.NgForOf], 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        .slides-container {\n            height: 100%;\n        }\n\n        .slide-container {\n            display: block;\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          border-left: 1px solid #ddd;\n        }\n\n        [dir=\"rtl\"] .dayview-allday-label {\n            border-right: 1px solid #ddd;\n            float: right;\n        }\n\n        .dayview-allday-content-wrapper {\n          margin-left: 50px;\n          overflow: hidden;\n          height: 51px;\n        }\n\n        [dir=\"rtl\"] .dayview-allday-content-wrapper {\n          margin-left: 0;\n          margin-right: 50px;\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        .scroll-content {\n            overflow-y: auto;\n            overflow-x: hidden;\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          [dir=\"rtl\"] .dayview-allday-content-wrapper {\n            margin-left: 0;\n            margin-right: 31px;\n          }\n        }\n    "], encapsulation: 2 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(DayViewComponent, [{
+        type: Component,
+        args: [{
+                selector: 'dayview',
+                template: `
+        <ion-slides #daySlider [options]="sliderOptions" [dir]="dir" (ionSlideDidChange)="onSlideChanged()" class="slides-container">
+            <ion-slide class="slide-container">
+                <div class="dayview-allday-table">
+                    <div class="dayview-allday-label">{{allDayLabel}}</div>
+                    <div class="dayview-allday-content-wrapper scroll-content">
+                        <table class="table table-bordered dayview-allday-content-table">
+                            <tbody>
+                            <tr>
+                                <td class="calendar-cell" [ngClass]="{'calendar-event-wrap':views[0].allDayEvents.length>0}"
+                                    [ngStyle]="{height: 25*views[0].allDayEvents.length+'px'}"
+                                    *ngIf="0===currentViewIndex">
+                                    <ng-template [ngTemplateOutlet]="dayviewAllDayEventSectionTemplate"
+                                                 [ngTemplateOutletContext]="{allDayEvents:views[0].allDayEvents,eventTemplate:dayviewAllDayEventTemplate}">
+                                    </ng-template>
+                                </td>
+                                <td class="calendar-cell" *ngIf="0!==currentViewIndex">
+                                    <ng-template [ngTemplateOutlet]="dayviewInactiveAllDayEventSectionTemplate"
+                                                 [ngTemplateOutletContext]="{allDayEvents:views[0].allDayEvents}">
+                                    </ng-template>
+                                </td>
+                            </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                <init-position-scroll *ngIf="0===currentViewIndex" class="dayview-normal-event-container" [initPosition]="initScrollPosition" [emitEvent]="preserveScrollPosition" (onScroll)="setScrollPosition($event)">
+                    <table class="table table-bordered table-fixed dayview-normal-event-table">
+                        <tbody>
+                        <tr *ngFor="let tm of views[0].rows; let i = index">
+                            <td class="calendar-hour-column text-center">
+                                {{hourColumnLabels[i]}}
+                            </td>
+                            <td class="calendar-cell" tappable (click)="select(tm.time, tm.events)">
+                                <ng-template [ngTemplateOutlet]="dayviewNormalEventSectionTemplate"
+                                             [ngTemplateOutletContext]="{tm:tm, hourParts: hourParts, eventTemplate:dayviewNormalEventTemplate}">
+                                </ng-template>
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </init-position-scroll>
+                <init-position-scroll *ngIf="0!==currentViewIndex" class="dayview-normal-event-container" [initPosition]="initScrollPosition">
+                    <table class="table table-bordered table-fixed dayview-normal-event-table">
+                        <tbody>
+                        <tr *ngFor="let tm of views[0].rows; let i = index">
+                            <td class="calendar-hour-column text-center">
+                                {{hourColumnLabels[i]}}
+                            </td>
+                            <td class="calendar-cell">
+                                <ng-template [ngTemplateOutlet]="dayviewInactiveNormalEventSectionTemplate"
+                                             [ngTemplateOutletContext]="{tm:tm, hourParts: hourParts}">
+                                </ng-template>
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </init-position-scroll>
+            </ion-slide>
+            <ion-slide class="slide-container">
+                <div class="dayview-allday-table">
+                    <div class="dayview-allday-label">{{allDayLabel}}</div>
+                    <div class="dayview-allday-content-wrapper scroll-content">
+                        <table class="table table-bordered dayview-allday-content-table">
+                            <tbody>
+                            <tr>
+                                <td class="calendar-cell" [ngClass]="{'calendar-event-wrap':views[1].allDayEvents.length>0}"
+                                    [ngStyle]="{height: 25*views[1].allDayEvents.length+'px'}"
+                                    *ngIf="1===currentViewIndex">
+                                    <ng-template [ngTemplateOutlet]="dayviewAllDayEventSectionTemplate"
+                                                 [ngTemplateOutletContext]="{allDayEvents:views[1].allDayEvents,eventTemplate:dayviewAllDayEventTemplate}">
+                                    </ng-template>
+                                </td>
+                                <td class="calendar-cell" *ngIf="1!==currentViewIndex">
+                                    <ng-template [ngTemplateOutlet]="dayviewInactiveAllDayEventSectionTemplate"
+                                                 [ngTemplateOutletContext]="{allDayEvents:views[1].allDayEvents}">
+                                    </ng-template>
+                                </td>
+                            </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                <init-position-scroll *ngIf="1===currentViewIndex" class="dayview-normal-event-container" [initPosition]="initScrollPosition" [emitEvent]="preserveScrollPosition" (onScroll)="setScrollPosition($event)">
+                    <table class="table table-bordered table-fixed dayview-normal-event-table">
+                        <tbody>
+                        <tr *ngFor="let tm of views[1].rows; let i = index">
+                            <td class="calendar-hour-column text-center">
+                                {{hourColumnLabels[i]}}
+                            </td>
+                            <td class="calendar-cell" tappable (click)="select(tm.time, tm.events)">
+                                <ng-template [ngTemplateOutlet]="dayviewNormalEventSectionTemplate"
+                                             [ngTemplateOutletContext]="{tm:tm, hourParts: hourParts, eventTemplate:dayviewNormalEventTemplate}">
+                                </ng-template>
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </init-position-scroll>
+                <init-position-scroll *ngIf="1!==currentViewIndex" class="dayview-normal-event-container" [initPosition]="initScrollPosition">
+                    <table class="table table-bordered table-fixed dayview-normal-event-table">
+                        <tbody>
+                        <tr *ngFor="let tm of views[1].rows; let i = index">
+                            <td class="calendar-hour-column text-center">
+                                {{hourColumnLabels[i]}}
+                            </td>
+                            <td class="calendar-cell">
+                                <ng-template [ngTemplateOutlet]="dayviewInactiveNormalEventSectionTemplate"
+                                             [ngTemplateOutletContext]="{tm:tm, hourParts: hourParts}">
+                                </ng-template>
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </init-position-scroll>
+            </ion-slide>
+            <ion-slide class="slide-container">
+                <div class="dayview-allday-table">
+                    <div class="dayview-allday-label">{{allDayLabel}}</div>
+                    <div class="dayview-allday-content-wrapper scroll-content">
+                        <table class="table table-bordered dayview-allday-content-table">
+                            <tbody>
+                            <tr>
+                                <td class="calendar-cell" [ngClass]="{'calendar-event-wrap':views[2].allDayEvents.length>0}"
+                                    [ngStyle]="{height: 25*views[2].allDayEvents.length+'px'}"
+                                    *ngIf="2===currentViewIndex">
+                                    <ng-template [ngTemplateOutlet]="dayviewAllDayEventSectionTemplate"
+                                                 [ngTemplateOutletContext]="{allDayEvents:views[2].allDayEvents,eventTemplate:dayviewAllDayEventTemplate}">
+                                    </ng-template>
+                                </td>
+                                <td class="calendar-cell" *ngIf="2!==currentViewIndex">
+                                    <ng-template [ngTemplateOutlet]="dayviewInactiveAllDayEventSectionTemplate"
+                                                 [ngTemplateOutletContext]="{allDayEvents:views[2].allDayEvents}">
+                                    </ng-template>
+                                </td>
+                            </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                <init-position-scroll *ngIf="2===currentViewIndex" class="dayview-normal-event-container" [initPosition]="initScrollPosition" [emitEvent]="preserveScrollPosition" (onScroll)="setScrollPosition($event)">
+                    <table class="table table-bordered table-fixed dayview-normal-event-table">
+                        <tbody>
+                        <tr *ngFor="let tm of views[2].rows; let i = index">
+                            <td class="calendar-hour-column text-center">
+                                {{hourColumnLabels[i]}}
+                            </td>
+                            <td class="calendar-cell" tappable (click)="select(tm.time, tm.events)">
+                                <ng-template [ngTemplateOutlet]="dayviewNormalEventSectionTemplate"
+                                             [ngTemplateOutletContext]="{tm:tm, hourParts: hourParts, eventTemplate:dayviewNormalEventTemplate}">
+                                </ng-template>
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </init-position-scroll>
+                <init-position-scroll *ngIf="2!==currentViewIndex" class="dayview-normal-event-container" [initPosition]="initScrollPosition">
+                    <table class="table table-bordered table-fixed dayview-normal-event-table">
+                        <tbody>
+                        <tr *ngFor="let tm of views[2].rows; let i = index">
+                            <td class="calendar-hour-column text-center">
+                                {{hourColumnLabels[i]}}
+                            </td>
+                            <td class="calendar-cell">
+                                <ng-template [ngTemplateOutlet]="dayviewInactiveNormalEventSectionTemplate"
+                                             [ngTemplateOutletContext]="{tm:tm, hourParts: hourParts}">
+                                </ng-template>
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </init-position-scroll>
+            </ion-slide>
+        </ion-slides>
+    `,
+                styles: [`
+        .table-fixed {
+          table-layout: fixed;
+        }
+
+        .table {
+          width: 100%;
+          max-width: 100%;
+          background-color: transparent;
+        }
+
+        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,
+        .table > tbody > tr > td, .table > tfoot > tr > td {
+          padding: 8px;
+          line-height: 20px;
+          vertical-align: top;
+        }
+
+        .table > thead > tr > th {
+          vertical-align: bottom;
+          border-bottom: 2px solid #ddd;
+        }
+
+        .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {
+          border-top: 0
+        }
+
+        .table > tbody + tbody {
+          border-top: 2px solid #ddd;
+        }
+
+        .table-bordered {
+          border: 1px solid #ddd;
+        }
+
+        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,
+        .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
+          border: 1px solid #ddd;
+        }
+
+        .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {
+          border-bottom-width: 2px;
+        }
+
+        .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {
+          background-color: #f9f9f9
+        }
+
+        .calendar-hour-column {
+          width: 50px;
+          white-space: nowrap;
+        }
+
+        .calendar-event-wrap {
+          position: relative;
+          width: 100%;
+          height: 100%;
+        }
+
+        .calendar-event {
+          position: absolute;
+          padding: 2px;
+          cursor: pointer;
+          z-index: 10000;
+        }
+
+        .slides-container {
+            height: 100%;
+        }
+
+        .slide-container {
+            display: block;
+        }
+
+        .calendar-cell {
+          padding: 0 !important;
+          height: 37px;
+        }
+
+        .dayview-allday-label {
+          float: left;
+          height: 100%;
+          line-height: 50px;
+          text-align: center;
+          width: 50px;
+          border-left: 1px solid #ddd;
+        }
+
+        [dir="rtl"] .dayview-allday-label {
+            border-right: 1px solid #ddd;
+            float: right;
+        }
+
+        .dayview-allday-content-wrapper {
+          margin-left: 50px;
+          overflow: hidden;
+          height: 51px;
+        }
+
+        [dir="rtl"] .dayview-allday-content-wrapper {
+          margin-left: 0;
+          margin-right: 50px;
+        }
+
+        .dayview-allday-content-table {
+          min-height: 50px;
+        }
+
+        .dayview-allday-content-table td {
+          border-left: 1px solid #ddd;
+          border-right: 1px solid #ddd;
+        }
+
+        .dayview-allday-table {
+          height: 50px;
+          position: relative;
+          border-bottom: 1px solid #ddd;
+          font-size: 14px;
+        }
+
+        .dayview-normal-event-container {
+          margin-top: 50px;
+          overflow: hidden;
+          left: 0;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          position: absolute;
+          font-size: 14px;
+        }
+
+        .scroll-content {
+            overflow-y: auto;
+            overflow-x: hidden;
+        }
+
+        ::-webkit-scrollbar,
+        *::-webkit-scrollbar {
+          display: none;
+        }
+
+        .table > tbody > tr > td.calendar-hour-column {
+          padding-left: 0;
+          padding-right: 0;
+          vertical-align: middle;
+        }
+
+        @media (max-width: 750px) {
+          .dayview-allday-label, .calendar-hour-column {
+            width: 31px;
+            font-size: 12px;
+          }
+
+          .dayview-allday-label {
+            padding-top: 4px;
+          }
+
+          .table > tbody > tr > td.calendar-hour-column {
+            padding-left: 0;
+            padding-right: 0;
+            vertical-align: middle;
+            line-height: 12px;
+          }
+
+          .dayview-allday-label {
+            line-height: 20px;
+          }
+
+          .dayview-allday-content-wrapper {
+            margin-left: 31px;
+          }
+
+          [dir="rtl"] .dayview-allday-content-wrapper {
+            margin-left: 0;
+            margin-right: 31px;
+          }
+        }
+    `],
+                encapsulation: ViewEncapsulation.None
+            }]
+    }], function () { return [{ type: i1.CalendarService }, { type: i0.ElementRef }]; }, { slider: [{
+            type: ViewChild,
+            args: ['daySlider', { static: false }]
+        }], class: [{
+            type: HostBinding,
+            args: ['class.dayview']
+        }], dayviewAllDayEventTemplate: [{
+            type: Input
+        }], dayviewNormalEventTemplate: [{
+            type: Input
+        }], dayviewAllDayEventSectionTemplate: [{
+            type: Input
+        }], dayviewNormalEventSectionTemplate: [{
+            type: Input
+        }], dayviewInactiveAllDayEventSectionTemplate: [{
+            type: Input
+        }], dayviewInactiveNormalEventSectionTemplate: [{
+            type: Input
+        }], formatHourColumn: [{
+            type: Input
+        }], formatDayTitle: [{
+            type: Input
+        }], allDayLabel: [{
+            type: Input
+        }], hourParts: [{
+            type: Input
+        }], eventSource: [{
+            type: Input
+        }], markDisabled: [{
+            type: Input
+        }], locale: [{
+            type: Input
+        }], dateFormatter: [{
+            type: Input
+        }], dir: [{
+            type: Input
+        }], scrollToHour: [{
+            type: Input
+        }], preserveScrollPosition: [{
+            type: Input
+        }], lockSwipeToPrev: [{
+            type: Input
+        }], lockSwipes: [{
+            type: Input
+        }], startHour: [{
+            type: Input
+        }], endHour: [{
+            type: Input
+        }], sliderOptions: [{
+            type: Input
+        }], hourSegments: [{
+            type: Input
+        }], onRangeChanged: [{
+            type: Output
+        }], onEventSelected: [{
+            type: Output
+        }], onTimeSelected: [{
+            type: Output
+        }], onTitleChanged: [{
+            type: Output
+        }] }); })();

index.d.ts

 export { NgCalendarModule } from './calendar.module';
+export { CalendarComponent } from './calendar';

index.js

 export { NgCalendarModule } from './calendar.module';
+export { CalendarComponent } from './calendar';

init-position-scroll.d.ts

 import { EventEmitter, ElementRef, SimpleChanges, OnChanges, AfterViewInit, OnDestroy } from '@angular/core';
+import * as i0 from "@angular/core";
 export declare class initPositionScrollComponent implements OnChanges, AfterViewInit, OnDestroy {
@@ -14,2 +15,4 @@ initPosition: number;
     ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDef<initPositionScrollComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<initPositionScrollComponent, "init-position-scroll", never, { "initPosition": "initPosition"; "emitEvent": "emitEvent"; }, { "onScroll": "onScroll"; }, never, ["*"]>;
 }

init-position-scroll.js

@@ -1,5 +0,6 @@
-import * as tslib_1 from "tslib";
-import { Component, Input, Output, EventEmitter, ElementRef, ViewEncapsulation } from '@angular/core';
-var initPositionScrollComponent = /** @class */ (function () {
-    function initPositionScrollComponent(el) {
+import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+export class initPositionScrollComponent {
+    constructor(el) {
         this.onScroll = new EventEmitter();
@@ -9,13 +10,13 @@ this.listenerAttached = false;
     }
-    initPositionScrollComponent.prototype.ngOnChanges = function (changes) {
-        var initPosition = changes['initPosition'];
+    ngOnChanges(changes) {
+        let initPosition = changes['initPosition'];
         if (initPosition && initPosition.currentValue !== undefined && this.scrollContent) {
-            var me_1 = this;
+            const me = this;
             setTimeout(function () {
-                me_1.scrollContent.scrollTop = initPosition.currentValue;
+                me.scrollContent.scrollTop = initPosition.currentValue;
             }, 0);
         }
-    };
-    initPositionScrollComponent.prototype.ngAfterViewInit = function () {
-        var scrollContent = this.scrollContent = this.element.nativeElement.querySelector('.scroll-content');
+    }
+    ngAfterViewInit() {
+        const scrollContent = this.scrollContent = this.element.nativeElement.querySelector('.scroll-content');
         if (this.initPosition !== undefined) {
@@ -25,5 +26,5 @@ scrollContent.scrollTop = this.initPosition;
         if (this.emitEvent && !this.listenerAttached) {
-            var onScroll_1 = this.onScroll;
+            let onScroll = this.onScroll;
             this.handler = function () {
-                onScroll_1.emit(scrollContent.scrollTop);
+                onScroll.emit(scrollContent.scrollTop);
             };
@@ -33,31 +34,39 @@ this.listenerAttached = true;
         }
-    };
-    initPositionScrollComponent.prototype.ngOnDestroy = function () {
+    }
+    ngOnDestroy() {
         if (this.listenerAttached) {
             this.scrollContent.removeEventListener('scroll', this.handler);
         }
-    };
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Number)
-    ], initPositionScrollComponent.prototype, "initPosition", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], initPositionScrollComponent.prototype, "emitEvent", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", Object)
-    ], initPositionScrollComponent.prototype, "onScroll", void 0);
-    initPositionScrollComponent = tslib_1.__decorate([
-        Component({
-            selector: 'init-position-scroll',
-            template: "\n        <div class=\"scroll-content\" style=\"height:100%\">\n            <ng-content></ng-content>\n        </div>\n    ",
-            styles: ["\n        .scroll-content {\n            overflow-y: auto;\n            overflow-x: hidden;\n        }        \n    "],
-            encapsulation: ViewEncapsulation.None
-        }),
-        tslib_1.__metadata("design:paramtypes", [ElementRef])
-    ], initPositionScrollComponent);
-    return initPositionScrollComponent;
-}());
-export { initPositionScrollComponent };
+    }
+}
+initPositionScrollComponent.ɵfac = function initPositionScrollComponent_Factory(t) { return new (t || initPositionScrollComponent)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
+initPositionScrollComponent.ɵcmp = i0.ɵɵdefineComponent({ type: initPositionScrollComponent, selectors: [["init-position-scroll"]], inputs: { initPosition: "initPosition", emitEvent: "emitEvent" }, outputs: { onScroll: "onScroll" }, features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 2, vars: 0, consts: [[1, "scroll-content", 2, "height", "100%"]], template: function initPositionScrollComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵprojectionDef();
+        i0.ɵɵelementStart(0, "div", 0);
+        i0.ɵɵprojection(1);
+        i0.ɵɵelementEnd();
+    } }, styles: ["\n        .scroll-content {\n            overflow-y: auto;\n            overflow-x: hidden;\n        }        \n    "], encapsulation: 2 });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(initPositionScrollComponent, [{
+        type: Component,
+        args: [{
+                selector: 'init-position-scroll',
+                template: `
+        <div class="scroll-content" style="height:100%">
+            <ng-content></ng-content>
+        </div>
+    `,
+                styles: [`
+        .scroll-content {
+            overflow-y: auto;
+            overflow-x: hidden;
+        }        
+    `],
+                encapsulation: ViewEncapsulation.None
+            }]
+    }], function () { return [{ type: i0.ElementRef }]; }, { initPosition: [{
+            type: Input
+        }], emitEvent: [{
+            type: Input
+        }], onScroll: [{
+            type: Output
+        }] }); })();

monthview.d.ts

@@ -6,2 +6,3 @@ import { OnInit, OnChanges, EventEmitter, SimpleChanges, TemplateRef } from '@angular/core';
 import { IMonthViewDisplayEventTemplateContext } from "./calendar";
+import * as i0 from "@angular/core";
 export declare class MonthViewComponent implements ICalendarComponent, OnInit, OnChanges {
@@ -67,2 +68,4 @@ private calendarService;
     eventSelected(event: IEvent): void;
+    static ɵfac: i0.ɵɵFactoryDef<MonthViewComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MonthViewComponent, "monthview", never, { "monthviewDisplayEventTemplate": "monthviewDisplayEventTemplate"; "monthviewInactiveDisplayEventTemplate": "monthviewInactiveDisplayEventTemplate"; "monthviewEventDetailTemplate": "monthviewEventDetailTemplate"; "formatDay": "formatDay"; "formatDayHeader": "formatDayHeader"; "formatMonthTitle": "formatMonthTitle"; "eventSource": "eventSource"; "startingDayMonth": "startingDayMonth"; "showEventDetail": "showEventDetail"; "noEventsLabel": "noEventsLabel"; "autoSelect": "autoSelect"; "markDisabled": "markDisabled"; "locale": "locale"; "dateFormatter": "dateFormatter"; "dir": "dir"; "lockSwipeToPrev": "lockSwipeToPrev"; "lockSwipes": "lockSwipes"; "sliderOptions": "sliderOptions"; }, { "onRangeChanged": "onRangeChanged"; "onEventSelected": "onEventSelected"; "onTimeSelected": "onTimeSelected"; "onTitleChanged": "onTitleChanged"; }, never, never>;
 }

monthview.js

@@ -1,8 +0,321 @@
-import * as tslib_1 from "tslib";
-import { Component, Input, Output, EventEmitter, ViewChild, TemplateRef } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
 import { DatePipe } from '@angular/common';
-import { IonSlides } from '@ionic/angular';
-import { CalendarService } from './calendar.service';
-var MonthViewComponent = /** @class */ (function () {
-    function MonthViewComponent(calendarService) {
+import * as i0 from "@angular/core";
+import * as i1 from "./calendar.service";
+import * as i2 from "@ionic/angular";
+import * as i3 from "@angular/common";
+const _c0 = ["monthSlider"];
+function MonthViewComponent_table_4_th_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "th");
+    i0.ɵɵelementStart(1, "small");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const dayHeader_r98 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(dayHeader_r98);
+} }
+function MonthViewComponent_table_4_tr_5_td_1_ng_template_1_Template(rf, ctx) { }
+const _c1 = function (a0, a1, a2) { return { view: a0, row: a1, col: a2 }; };
+function MonthViewComponent_table_4_tr_5_td_1_Template(rf, ctx) { if (rf & 1) {
+    const _r104 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "td", 7);
+    i0.ɵɵlistener("click", function MonthViewComponent_table_4_tr_5_td_1_Template_td_click_0_listener() { i0.ɵɵrestoreView(_r104); const col_r101 = ctx.$implicit; const row_r99 = i0.ɵɵnextContext().$implicit; const ctx_r103 = i0.ɵɵnextContext(2); return ctx_r103.select(ctx_r103.views[0].dates[row_r99 * 7 + col_r101]); });
+    i0.ɵɵtemplate(1, MonthViewComponent_table_4_tr_5_td_1_ng_template_1_Template, 0, 0, "ng-template", 3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const col_r101 = ctx.$implicit;
+    const row_r99 = i0.ɵɵnextContext().$implicit;
+    const ctx_r100 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", ctx_r100.getHighlightClass(ctx_r100.views[0].dates[row_r99 * 7 + col_r101]));
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r100.monthviewDisplayEventTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction3(3, _c1, ctx_r100.views[0], row_r99, col_r101));
+} }
+const _c2 = function () { return [0, 1, 2, 3, 4, 5, 6]; };
+function MonthViewComponent_table_4_tr_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr");
+    i0.ɵɵtemplate(1, MonthViewComponent_table_4_tr_5_td_1_Template, 2, 7, "td", 6);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(1, _c2));
+} }
+const _c3 = function () { return [0, 1, 2, 3, 4, 5]; };
+function MonthViewComponent_table_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "table", 4);
+    i0.ɵɵelementStart(1, "thead");
+    i0.ɵɵelementStart(2, "tr");
+    i0.ɵɵtemplate(3, MonthViewComponent_table_4_th_3_Template, 3, 1, "th", 5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "tbody");
+    i0.ɵɵtemplate(5, MonthViewComponent_table_4_tr_5_Template, 2, 2, "tr", 5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r89 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngForOf", ctx_r89.views[0].dayHeaders);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(2, _c3));
+} }
+function MonthViewComponent_table_5_th_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "th");
+    i0.ɵɵelementStart(1, "small");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const dayHeader_r109 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(dayHeader_r109);
+} }
+function MonthViewComponent_table_5_tr_5_td_1_ng_template_1_Template(rf, ctx) { }
+function MonthViewComponent_table_5_tr_5_td_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "td");
+    i0.ɵɵtemplate(1, MonthViewComponent_table_5_tr_5_td_1_ng_template_1_Template, 0, 0, "ng-template", 3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const col_r112 = ctx.$implicit;
+    const row_r110 = i0.ɵɵnextContext().$implicit;
+    const ctx_r111 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r111.monthviewInactiveDisplayEventTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction3(2, _c1, ctx_r111.views[0], row_r110, col_r112));
+} }
+function MonthViewComponent_table_5_tr_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr");
+    i0.ɵɵtemplate(1, MonthViewComponent_table_5_tr_5_td_1_Template, 2, 6, "td", 5);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(1, _c2));
+} }
+function MonthViewComponent_table_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "table", 4);
+    i0.ɵɵelementStart(1, "thead");
+    i0.ɵɵelementStart(2, "tr", 8);
+    i0.ɵɵtemplate(3, MonthViewComponent_table_5_th_3_Template, 3, 1, "th", 5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "tbody");
+    i0.ɵɵtemplate(5, MonthViewComponent_table_5_tr_5_Template, 2, 2, "tr", 5);
+    i0.ɵɵelement(6, "tr");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r90 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngForOf", ctx_r90.views[0].dayHeaders);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(2, _c3));
+} }
+function MonthViewComponent_table_7_th_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "th");
+    i0.ɵɵelementStart(1, "small");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const dayHeader_r117 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(dayHeader_r117);
+} }
+function MonthViewComponent_table_7_tr_5_td_1_ng_template_1_Template(rf, ctx) { }
+function MonthViewComponent_table_7_tr_5_td_1_Template(rf, ctx) { if (rf & 1) {
+    const _r123 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "td", 7);
+    i0.ɵɵlistener("click", function MonthViewComponent_table_7_tr_5_td_1_Template_td_click_0_listener() { i0.ɵɵrestoreView(_r123); const col_r120 = ctx.$implicit; const row_r118 = i0.ɵɵnextContext().$implicit; const ctx_r122 = i0.ɵɵnextContext(2); return ctx_r122.select(ctx_r122.views[1].dates[row_r118 * 7 + col_r120]); });
+    i0.ɵɵtemplate(1, MonthViewComponent_table_7_tr_5_td_1_ng_template_1_Template, 0, 0, "ng-template", 3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const col_r120 = ctx.$implicit;
+    const row_r118 = i0.ɵɵnextContext().$implicit;
+    const ctx_r119 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", ctx_r119.getHighlightClass(ctx_r119.views[1].dates[row_r118 * 7 + col_r120]));
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r119.monthviewDisplayEventTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction3(3, _c1, ctx_r119.views[1], row_r118, col_r120));
+} }
+function MonthViewComponent_table_7_tr_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr");
+    i0.ɵɵtemplate(1, MonthViewComponent_table_7_tr_5_td_1_Template, 2, 7, "td", 6);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(1, _c2));
+} }
+function MonthViewComponent_table_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "table", 4);
+    i0.ɵɵelementStart(1, "thead");
+    i0.ɵɵelementStart(2, "tr");
+    i0.ɵɵtemplate(3, MonthViewComponent_table_7_th_3_Template, 3, 1, "th", 5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "tbody");
+    i0.ɵɵtemplate(5, MonthViewComponent_table_7_tr_5_Template, 2, 2, "tr", 5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r91 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngForOf", ctx_r91.views[1].dayHeaders);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(2, _c3));
+} }
+function MonthViewComponent_table_8_th_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "th");
+    i0.ɵɵelementStart(1, "small");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const dayHeader_r128 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(dayHeader_r128);
+} }
+function MonthViewComponent_table_8_tr_5_td_1_ng_template_1_Template(rf, ctx) { }
+function MonthViewComponent_table_8_tr_5_td_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "td");
+    i0.ɵɵtemplate(1, MonthViewComponent_table_8_tr_5_td_1_ng_template_1_Template, 0, 0, "ng-template", 3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const col_r131 = ctx.$implicit;
+    const row_r129 = i0.ɵɵnextContext().$implicit;
+    const ctx_r130 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r130.monthviewInactiveDisplayEventTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction3(2, _c1, ctx_r130.views[1], row_r129, col_r131));
+} }
+function MonthViewComponent_table_8_tr_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr");
+    i0.ɵɵtemplate(1, MonthViewComponent_table_8_tr_5_td_1_Template, 2, 6, "td", 5);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(1, _c2));
+} }
+function MonthViewComponent_table_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "table", 4);
+    i0.ɵɵelementStart(1, "thead");
+    i0.ɵɵelementStart(2, "tr", 8);
+    i0.ɵɵtemplate(3, MonthViewComponent_table_8_th_3_Template, 3, 1, "th", 5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "tbody");
+    i0.ɵɵtemplate(5, MonthViewComponent_table_8_tr_5_Template, 2, 2, "tr", 5);
+    i0.ɵɵelement(6, "tr");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r92 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngForOf", ctx_r92.views[1].dayHeaders);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(2, _c3));
+} }
+function MonthViewComponent_table_10_th_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "th");
+    i0.ɵɵelementStart(1, "small");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const dayHeader_r136 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(dayHeader_r136);
+} }
+function MonthViewComponent_table_10_tr_5_td_1_ng_template_1_Template(rf, ctx) { }
+function MonthViewComponent_table_10_tr_5_td_1_Template(rf, ctx) { if (rf & 1) {
+    const _r142 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "td", 7);
+    i0.ɵɵlistener("click", function MonthViewComponent_table_10_tr_5_td_1_Template_td_click_0_listener() { i0.ɵɵrestoreView(_r142); const col_r139 = ctx.$implicit; const row_r137 = i0.ɵɵnextContext().$implicit; const ctx_r141 = i0.ɵɵnextContext(2); return ctx_r141.select(ctx_r141.views[2].dates[row_r137 * 7 + col_r139]); });
+    i0.ɵɵtemplate(1, MonthViewComponent_table_10_tr_5_td_1_ng_template_1_Template, 0, 0, "ng-template", 3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const col_r139 = ctx.$implicit;
+    const row_r137 = i0.ɵɵnextContext().$implicit;
+    const ctx_r138 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", ctx_r138.getHighlightClass(ctx_r138.views[2].dates[row_r137 * 7 + col_r139]));
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r138.monthviewDisplayEventTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction3(3, _c1, ctx_r138.views[2], row_r137, col_r139));
+} }
+function MonthViewComponent_table_10_tr_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr");
+    i0.ɵɵtemplate(1, MonthViewComponent_table_10_tr_5_td_1_Template, 2, 7, "td", 6);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(1, _c2));
+} }
+function MonthViewComponent_table_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "table", 4);
+    i0.ɵɵelementStart(1, "thead");
+    i0.ɵɵelementStart(2, "tr");
+    i0.ɵɵtemplate(3, MonthViewComponent_table_10_th_3_Template, 3, 1, "th", 5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "tbody");
+    i0.ɵɵtemplate(5, MonthViewComponent_table_10_tr_5_Template, 2, 2, "tr", 5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r93 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngForOf", ctx_r93.views[2].dayHeaders);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(2, _c3));
+} }
+function MonthViewComponent_table_11_th_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "th");
+    i0.ɵɵelementStart(1, "small");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const dayHeader_r147 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(dayHeader_r147);
+} }
+function MonthViewComponent_table_11_tr_5_td_1_ng_template_1_Template(rf, ctx) { }
+function MonthViewComponent_table_11_tr_5_td_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "td");
+    i0.ɵɵtemplate(1, MonthViewComponent_table_11_tr_5_td_1_ng_template_1_Template, 0, 0, "ng-template", 3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const col_r150 = ctx.$implicit;
+    const row_r148 = i0.ɵɵnextContext().$implicit;
+    const ctx_r149 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r149.monthviewInactiveDisplayEventTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction3(2, _c1, ctx_r149.views[2], row_r148, col_r150));
+} }
+function MonthViewComponent_table_11_tr_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr");
+    i0.ɵɵtemplate(1, MonthViewComponent_table_11_tr_5_td_1_Template, 2, 6, "td", 5);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(1, _c2));
+} }
+function MonthViewComponent_table_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "table", 4);
+    i0.ɵɵelementStart(1, "thead");
+    i0.ɵɵelementStart(2, "tr", 8);
+    i0.ɵɵtemplate(3, MonthViewComponent_table_11_th_3_Template, 3, 1, "th", 5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "tbody");
+    i0.ɵɵtemplate(5, MonthViewComponent_table_11_tr_5_Template, 2, 2, "tr", 5);
+    i0.ɵɵelement(6, "tr");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r94 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngForOf", ctx_r94.views[2].dayHeaders);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(2, _c3));
+} }
+function MonthViewComponent_ng_template_12_Template(rf, ctx) { }
+const _c4 = function (a0, a1, a2) { return { showEventDetail: a0, selectedDate: a1, noEventsLabel: a2 }; };
+export class MonthViewComponent {
+    constructor(calendarService) {
         this.calendarService = calendarService;
@@ -23,5 +336,3 @@ this.autoSelect = true;
     }
-    MonthViewComponent_1 = MonthViewComponent;
-    MonthViewComponent.prototype.ngOnInit = function () {
-        var _this = this;
+    ngOnInit() {
         if (!this.sliderOptions) {
@@ -35,5 +346,5 @@ this.sliderOptions = {};
         else {
-            var dayLabelDatePipe_1 = new DatePipe('en-US');
+            let dayLabelDatePipe = new DatePipe('en-US');
             this.formatDayLabel = function (date) {
-                return dayLabelDatePipe_1.transform(date, this.formatDay);
+                return dayLabelDatePipe.transform(date, this.formatDay);
             };
@@ -45,5 +356,5 @@ }
         else {
-            var datePipe_1 = new DatePipe(this.locale);
+            let datePipe = new DatePipe(this.locale);
             this.formatDayHeaderLabel = function (date) {
-                return datePipe_1.transform(date, this.formatDayHeader);
+                return datePipe.transform(date, this.formatDayHeader);
             };
@@ -55,5 +366,5 @@ }
         else {
-            var datePipe_2 = new DatePipe(this.locale);
+            let datePipe = new DatePipe(this.locale);
             this.formatTitle = function (date) {
-                return datePipe_2.transform(date, this.formatMonthTitle);
+                return datePipe.transform(date, this.formatMonthTitle);
             };
@@ -69,18 +380,18 @@ }
         this.inited = true;
-        this.currentDateChangedFromParentSubscription = this.calendarService.currentDateChangedFromParent$.subscribe(function (currentDate) {
-            _this.refreshView();
+        this.currentDateChangedFromParentSubscription = this.calendarService.currentDateChangedFromParent$.subscribe(currentDate => {
+            this.refreshView();
         });
-        this.eventSourceChangedSubscription = this.calendarService.eventSourceChanged$.subscribe(function () {
-            _this.onDataLoaded();
+        this.eventSourceChangedSubscription = this.calendarService.eventSourceChanged$.subscribe(() => {
+            this.onDataLoaded();
         });
-        this.slideChangedSubscription = this.calendarService.slideChanged$.subscribe(function (direction) {
+        this.slideChangedSubscription = this.calendarService.slideChanged$.subscribe(direction => {
             if (direction == 1) {
-                _this.slider.slideNext();
+                this.slider.slideNext();
             }
             else if (direction == -1) {
-                _this.slider.slidePrev();
+                this.slider.slidePrev();
             }
         });
-    };
-    MonthViewComponent.prototype.ngOnDestroy = function () {
+    }
+    ngOnDestroy() {
         if (this.currentDateChangedFromParentSubscription) {
@@ -98,25 +409,24 @@ this.currentDateChangedFromParentSubscription.unsubscribe();
         }
-    };
-    MonthViewComponent.prototype.ngOnChanges = function (changes) {
+    }
+    ngOnChanges(changes) {
         if (!this.inited)
             return;
-        var eventSourceChange = changes['eventSource'];
+        let eventSourceChange = changes['eventSource'];
         if (eventSourceChange && eventSourceChange.currentValue) {
             this.onDataLoaded();
         }
-        var lockSwipeToPrev = changes['lockSwipeToPrev'];
+        let lockSwipeToPrev = changes['lockSwipeToPrev'];
         if (lockSwipeToPrev) {
             this.slider.lockSwipeToPrev(lockSwipeToPrev.currentValue);
         }
-        var lockSwipes = changes['lockSwipes'];
+        let lockSwipes = changes['lockSwipes'];
         if (lockSwipes) {
             this.slider.lockSwipes(lockSwipes.currentValue);
         }
-    };
-    MonthViewComponent.prototype.ngAfterViewInit = function () {
-        var title = this.getTitle();
+    }
+    ngAfterViewInit() {
+        let title = this.getTitle();
         this.onTitleChanged.emit(title);
-    };
-    MonthViewComponent.prototype.onSlideChanged = function () {
-        var _this = this;
+    }
+    onSlideChanged() {
         if (this.callbackOnInit) {
@@ -126,4 +436,4 @@ this.callbackOnInit = false;
         }
-        var direction = 0, currentViewIndex = this.currentViewIndex;
-        this.slider.getActiveIndex().then(function (currentSlideIndex) {
+        let direction = 0, currentViewIndex = this.currentViewIndex;
+        this.slider.getActiveIndex().then((currentSlideIndex) => {
             currentSlideIndex = (currentSlideIndex + 2) % 3;
@@ -135,3 +445,3 @@ if (currentSlideIndex - currentViewIndex === 1) {
                 direction = 1;
-                _this.slider.slideTo(1, 0, false);
+                this.slider.slideTo(1, 0, false);
             }
@@ -143,9 +453,9 @@ else if (currentViewIndex - currentSlideIndex === 1) {
                 direction = -1;
-                _this.slider.slideTo(3, 0, false);
+                this.slider.slideTo(3, 0, false);
             }
-            _this.currentViewIndex = currentSlideIndex;
-            _this.move(direction);
+            this.currentViewIndex = currentSlideIndex;
+            this.move(direction);
         });
-    };
-    MonthViewComponent.prototype.move = function (direction) {
+    }
+    move(direction) {
         if (direction === 0)
@@ -155,3 +465,3 @@ return;
         if (!this.moveOnSelected) {
-            var adjacentDate = this.calendarService.getAdjacentCalendarDate(this.mode, direction);
+            let adjacentDate = this.calendarService.getAdjacentCalendarDate(this.mode, direction);
             this.calendarService.setCurrentDate(adjacentDate);
@@ -162,4 +472,4 @@ }
         this.moveOnSelected = false;
-    };
-    MonthViewComponent.prototype.createDateObject = function (date) {
+    }
+    createDateObject(date) {
         var disabled = false;
@@ -176,5 +486,5 @@ if (this.markDisabled) {
         };
-    };
-    MonthViewComponent.getDates = function (startDate, n) {
-        var dates = new Array(n), current = new Date(startDate.getTime()), i = 0;
+    }
+    static getDates(startDate, n) {
+        let dates = new Array(n), current = new Date(startDate.getTime()), i = 0;
         current.setHours(12); // Prevent repeated dates because of timezone bug
@@ -186,14 +496,14 @@ while (i < n) {
         return dates;
-    };
-    MonthViewComponent.prototype.getViewData = function (startTime) {
-        var startDate = startTime, date = startDate.getDate(), month = (startDate.getMonth() + (date !== 1 ? 1 : 0)) % 12;
-        var dates = MonthViewComponent_1.getDates(startDate, 42);
-        var days = [];
-        for (var i = 0; i < 42; i++) {
-            var dateObject = this.createDateObject(dates[i]);
+    }
+    getViewData(startTime) {
+        let startDate = startTime, date = startDate.getDate(), month = (startDate.getMonth() + (date !== 1 ? 1 : 0)) % 12;
+        let dates = MonthViewComponent.getDates(startDate, 42);
+        let days = [];
+        for (let i = 0; i < 42; i++) {
+            let dateObject = this.createDateObject(dates[i]);
             dateObject.secondary = dates[i].getMonth() !== month;
             days[i] = dateObject;
         }
-        var dayHeaders = [];
-        for (var i = 0; i < 7; i++) {
+        let dayHeaders = [];
+        for (let i = 0; i < 7; i++) {
             dayHeaders.push(this.formatDayHeaderLabel(days[i].date));
@@ -205,5 +515,5 @@ }
         };
-    };
-    MonthViewComponent.prototype.getHighlightClass = function (date) {
-        var className = '';
+    }
+    getHighlightClass(date) {
+        let className = '';
         if (date.hasEvent) {
@@ -242,9 +552,9 @@ if (date.secondary) {
         return className;
-    };
-    MonthViewComponent.prototype.getRange = function (currentDate) {
-        var year = currentDate.getFullYear(), month = currentDate.getMonth(), firstDayOfMonth = new Date(year, month, 1), difference = this.startingDayMonth - firstDayOfMonth.getDay(), numDisplayedFromPreviousMonth = (difference > 0) ? 7 - difference : -difference, startDate = new Date(firstDayOfMonth.getTime());
+    }
+    getRange(currentDate) {
+        let year = currentDate.getFullYear(), month = currentDate.getMonth(), firstDayOfMonth = new Date(year, month, 1), difference = this.startingDayMonth - firstDayOfMonth.getDay(), numDisplayedFromPreviousMonth = (difference > 0) ? 7 - difference : -difference, startDate = new Date(firstDayOfMonth.getTime());
         if (numDisplayedFromPreviousMonth > 0) {
             startDate.setDate(-numDisplayedFromPreviousMonth + 1);
         }
-        var endDate = new Date(startDate.getTime());
+        let endDate = new Date(startDate.getTime());
         endDate.setDate(endDate.getDate() + 42);
@@ -255,6 +565,6 @@ return {
         };
-    };
-    MonthViewComponent.prototype.onDataLoaded = function () {
-        var range = this.range, eventSource = this.eventSource, len = eventSource ? eventSource.length : 0, startTime = range.startTime, endTime = range.endTime, utcStartTime = new Date(Date.UTC(startTime.getFullYear(), startTime.getMonth(), startTime.getDate())), utcEndTime = new Date(Date.UTC(endTime.getFullYear(), endTime.getMonth(), endTime.getDate())), currentViewIndex = this.currentViewIndex, dates = this.views[currentViewIndex].dates, oneDay = 86400000, eps = 0.0006;
-        for (var r = 0; r < 42; r += 1) {
+    }
+    onDataLoaded() {
+        let range = this.range, eventSource = this.eventSource, len = eventSource ? eventSource.length : 0, startTime = range.startTime, endTime = range.endTime, utcStartTime = new Date(Date.UTC(startTime.getFullYear(), startTime.getMonth(), startTime.getDate())), utcEndTime = new Date(Date.UTC(endTime.getFullYear(), endTime.getMonth(), endTime.getDate())), currentViewIndex = this.currentViewIndex, dates = this.views[currentViewIndex].dates, oneDay = 86400000, eps = 0.0006;
+        for (let r = 0; r < 42; r += 1) {
             if (dates[r].hasEvent) {
@@ -265,5 +575,5 @@ dates[r].hasEvent = false;
         }
-        for (var i = 0; i < len; i += 1) {
-            var event_1 = eventSource[i], eventStartTime = new Date(event_1.startTime.getTime()), eventEndTime = new Date(event_1.endTime.getTime()), st = void 0, et = void 0;
-            if (event_1.allDay) {
+        for (let i = 0; i < len; i += 1) {
+            let event = eventSource[i], eventStartTime = new Date(event.startTime.getTime()), eventEndTime = new Date(event.endTime.getTime()), st, et;
+            if (event.allDay) {
                 if (eventEndTime <= utcStartTime || eventStartTime >= utcEndTime) {
@@ -286,4 +596,4 @@ continue;
             }
-            var timeDiff = void 0;
-            var timeDifferenceStart = void 0;
+            let timeDiff;
+            let timeDifferenceStart;
             if (eventStartTime <= st) {
@@ -294,3 +604,3 @@ timeDifferenceStart = 0;
                 timeDiff = eventStartTime.getTime() - st.getTime();
-                if (!event_1.allDay) {
+                if (!event.allDay) {
                     timeDiff = timeDiff - (eventStartTime.getTimezoneOffset() - st.getTimezoneOffset()) * 60000;
@@ -300,6 +610,6 @@ }
             }
-            var timeDifferenceEnd = void 0;
+            let timeDifferenceEnd;
             if (eventEndTime >= et) {
                 timeDiff = et.getTime() - st.getTime();
-                if (!event_1.allDay) {
+                if (!event.allDay) {
                     timeDiff = timeDiff - (et.getTimezoneOffset() - st.getTimezoneOffset()) * 60000;
@@ -311,3 +621,3 @@ }
                 timeDiff = eventEndTime.getTime() - st.getTime();
-                if (!event_1.allDay) {
+                if (!event.allDay) {
                     timeDiff = timeDiff - (eventEndTime.getTimezoneOffset() - st.getTimezoneOffset()) * 60000;
@@ -317,12 +627,12 @@ }
             }
-            var index = Math.floor(timeDifferenceStart);
+            let index = Math.floor(timeDifferenceStart);
             while (index < timeDifferenceEnd - eps) {
                 dates[index].hasEvent = true;
-                var eventSet = dates[index].events;
+                let eventSet = dates[index].events;
                 if (eventSet) {
-                    eventSet.push(event_1);
+                    eventSet.push(event);
                 }
                 else {
                     eventSet = [];
-                    eventSet.push(event_1);
+                    eventSet.push(event);
                     dates[index].events = eventSet;
@@ -333,3 +643,3 @@ }
         }
-        for (var r = 0; r < 42; r += 1) {
+        for (let r = 0; r < 42; r += 1) {
             if (dates[r].hasEvent) {
@@ -340,4 +650,4 @@ dates[r].events.sort(this.compareEvent);
         if (this.autoSelect) {
-            var findSelected = false;
-            for (var r = 0; r < 42; r += 1) {
+            let findSelected = false;
+            for (let r = 0; r < 42; r += 1) {
                 if (dates[r].selected) {
@@ -357,8 +667,8 @@ this.selectedDate = dates[r];
         }
-    };
+    }
     ;
-    MonthViewComponent.prototype.refreshView = function () {
+    refreshView() {
         this.range = this.getRange(this.calendarService.currentDate);
         if (this.inited) {
-            var title = this.getTitle();
+            let title = this.getTitle();
             this.onTitleChanged.emit(title);
@@ -369,8 +679,8 @@ }
         this.calendarService.rangeChanged(this);
-    };
-    MonthViewComponent.prototype.getTitle = function () {
-        var currentViewStartDate = this.range.startTime, date = currentViewStartDate.getDate(), month = (currentViewStartDate.getMonth() + (date !== 1 ? 1 : 0)) % 12, year = currentViewStartDate.getFullYear() + (date !== 1 && month === 0 ? 1 : 0), headerDate = new Date(year, month, 1, 12, 0, 0, 0);
+    }
+    getTitle() {
+        let currentViewStartDate = this.range.startTime, date = currentViewStartDate.getDate(), month = (currentViewStartDate.getMonth() + (date !== 1 ? 1 : 0)) % 12, year = currentViewStartDate.getFullYear() + (date !== 1 && month === 0 ? 1 : 0), headerDate = new Date(year, month, 1, 12, 0, 0, 0);
         return this.formatTitle(headerDate);
-    };
-    MonthViewComponent.prototype.compareEvent = function (event1, event2) {
+    }
+    compareEvent(event1, event2) {
         if (event1.allDay) {
@@ -385,9 +695,9 @@ return 1;
         }
-    };
-    MonthViewComponent.prototype.select = function (viewDate) {
+    }
+    select(viewDate) {
         if (!this.views)
             return;
-        var selectedDate = viewDate.date, events = viewDate.events;
+        let selectedDate = viewDate.date, events = viewDate.events;
         if (!viewDate.disabled) {
-            var dates = this.views[this.currentViewIndex].dates, currentCalendarDate = this.calendarService.currentDate, currentMonth = currentCalendarDate.getMonth(), currentYear = currentCalendarDate.getFullYear(), selectedMonth = selectedDate.getMonth(), selectedYear = selectedDate.getFullYear(), direction = 0;
+            let dates = this.views[this.currentViewIndex].dates, currentCalendarDate = this.calendarService.currentDate, currentMonth = currentCalendarDate.getMonth(), currentYear = currentCalendarDate.getFullYear(), selectedMonth = selectedDate.getMonth(), selectedYear = selectedDate.getFullYear(), direction = 0;
             if (currentYear === selectedYear) {
@@ -403,4 +713,4 @@ if (currentMonth !== selectedMonth) {
             if (direction === 0) {
-                var currentViewStartDate = this.range.startTime, oneDay = 86400000, selectedDayDifference = Math.floor((selectedDate.getTime() - currentViewStartDate.getTime() - (selectedDate.getTimezoneOffset() - currentViewStartDate.getTimezoneOffset()) * 60000) / oneDay);
-                for (var r = 0; r < 42; r += 1) {
+                let currentViewStartDate = this.range.startTime, oneDay = 86400000, selectedDayDifference = Math.floor((selectedDate.getTime() - currentViewStartDate.getTime() - (selectedDate.getTimezoneOffset() - currentViewStartDate.getTimezoneOffset()) * 60000) / oneDay);
+                for (let r = 0; r < 42; r += 1) {
                     dates[r].selected = false;
@@ -419,4 +729,4 @@ }
         this.onTimeSelected.emit({ selectedTime: selectedDate, events: events, disabled: viewDate.disabled });
-    };
-    MonthViewComponent.prototype.slideView = function (direction) {
+    }
+    slideView(direction) {
         if (direction === 1) {
@@ -428,6 +738,6 @@ this.slider.slideNext();
         }
-    };
-    MonthViewComponent.prototype.updateCurrentView = function (currentViewStartDate, view) {
-        var currentCalendarDate = this.calendarService.currentDate, today = new Date(), oneDay = 86400000, selectedDayDifference = Math.floor((currentCalendarDate.getTime() - currentViewStartDate.getTime() - (currentCalendarDate.getTimezoneOffset() - currentViewStartDate.getTimezoneOffset()) * 60000) / oneDay), currentDayDifference = Math.floor((today.getTime() - currentViewStartDate.getTime() - (today.getTimezoneOffset() - currentViewStartDate.getTimezoneOffset()) * 60000) / oneDay);
-        for (var r = 0; r < 42; r += 1) {
+    }
+    updateCurrentView(currentViewStartDate, view) {
+        let currentCalendarDate = this.calendarService.currentDate, today = new Date(), oneDay = 86400000, selectedDayDifference = Math.floor((currentCalendarDate.getTime() - currentViewStartDate.getTime() - (currentCalendarDate.getTimezoneOffset() - currentViewStartDate.getTimezoneOffset()) * 60000) / oneDay), currentDayDifference = Math.floor((today.getTime() - currentViewStartDate.getTime() - (today.getTimezoneOffset() - currentViewStartDate.getTimezoneOffset()) * 60000) / oneDay);
+        for (let r = 0; r < 42; r += 1) {
             view.dates[r].selected = false;
@@ -451,109 +761,317 @@ }
         }
-    };
-    MonthViewComponent.prototype.eventSelected = function (event) {
+    }
+    eventSelected(event) {
         this.onEventSelected.emit(event);
-    };
-    var MonthViewComponent_1;
-    tslib_1.__decorate([
-        ViewChild('monthSlider'),
-        tslib_1.__metadata("design:type", IonSlides)
-    ], MonthViewComponent.prototype, "slider", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", TemplateRef)
-    ], MonthViewComponent.prototype, "monthviewDisplayEventTemplate", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", TemplateRef)
-    ], MonthViewComponent.prototype, "monthviewInactiveDisplayEventTemplate", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", TemplateRef)
-    ], MonthViewComponent.prototype, "monthviewEventDetailTemplate", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], MonthViewComponent.prototype, "formatDay", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], MonthViewComponent.prototype, "formatDayHeader", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], MonthViewComponent.prototype, "formatMonthTitle", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Array)
-    ], MonthViewComponent.prototype, "eventSource", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Number)
-    ], MonthViewComponent.prototype, "startingDayMonth", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], MonthViewComponent.prototype, "showEventDetail", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], MonthViewComponent.prototype, "noEventsLabel", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], MonthViewComponent.prototype, "autoSelect", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Function)
-    ], MonthViewComponent.prototype, "markDisabled", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], MonthViewComponent.prototype, "locale", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Object)
-    ], MonthViewComponent.prototype, "dateFormatter", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], MonthViewComponent.prototype, "dir", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], MonthViewComponent.prototype, "lockSwipeToPrev", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], MonthViewComponent.prototype, "lockSwipes", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Object)
-    ], MonthViewComponent.prototype, "sliderOptions", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", Object)
-    ], MonthViewComponent.prototype, "onRangeChanged", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", Object)
-    ], MonthViewComponent.prototype, "onEventSelected", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", Object)
-    ], MonthViewComponent.prototype, "onTimeSelected", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", Object)
-    ], MonthViewComponent.prototype, "onTitleChanged", void 0);
-    MonthViewComponent = MonthViewComponent_1 = tslib_1.__decorate([
-        Component({
-            selector: 'monthview',
-            template: "\n        <div>\n            <ion-slides #monthSlider [options]=\"sliderOptions\" [dir]=\"dir\" (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                                [ngTemplateOutletContext]=\"{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                                [ngTemplateOutletContext]=\"{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                                [ngTemplateOutletContext]=\"{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                                [ngTemplateOutletContext]=\"{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                                [ngTemplateOutletContext]=\"{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                                [ngTemplateOutletContext]=\"{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            [ngTemplateOutletContext]=\"{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    "]
-        }),
-        tslib_1.__metadata("design:paramtypes", [CalendarService])
-    ], MonthViewComponent);
-    return MonthViewComponent;
-}());
-export { MonthViewComponent };
+    }
+}
+MonthViewComponent.ɵfac = function MonthViewComponent_Factory(t) { return new (t || MonthViewComponent)(i0.ɵɵdirectiveInject(i1.CalendarService)); };
+MonthViewComponent.ɵcmp = i0.ɵɵdefineComponent({ type: MonthViewComponent, selectors: [["monthview"]], viewQuery: function MonthViewComponent_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(_c0, true);
+    } if (rf & 2) {
+        var _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slider = _t.first);
+    } }, inputs: { monthviewDisplayEventTemplate: "monthviewDisplayEventTemplate", monthviewInactiveDisplayEventTemplate: "monthviewInactiveDisplayEventTemplate", monthviewEventDetailTemplate: "monthviewEventDetailTemplate", formatDay: "formatDay", formatDayHeader: "formatDayHeader", formatMonthTitle: "formatMonthTitle", eventSource: "eventSource", startingDayMonth: "startingDayMonth", showEventDetail: "showEventDetail", noEventsLabel: "noEventsLabel", autoSelect: "autoSelect", markDisabled: "markDisabled", locale: "locale", dateFormatter: "dateFormatter", dir: "dir", lockSwipeToPrev: "lockSwipeToPrev", lockSwipes: "lockSwipes", sliderOptions: "sliderOptions" }, outputs: { onRangeChanged: "onRangeChanged", onEventSelected: "onEventSelected", onTimeSelected: "onTimeSelected", onTitleChanged: "onTitleChanged" }, features: [i0.ɵɵNgOnChangesFeature], decls: 13, vars: 14, consts: [[3, "options", "dir", "ionSlideDidChange"], ["monthSlider", ""], ["class", "table table-bordered table-fixed monthview-datetable", 4, "ngIf"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "table", "table-bordered", "table-fixed", "monthview-datetable"], [4, "ngFor", "ngForOf"], ["tappable", "", 3, "ngClass", "click", 4, "ngFor", "ngForOf"], ["tappable", "", 3, "ngClass", "click"], [1, "text-center"]], template: function MonthViewComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div");
+        i0.ɵɵelementStart(1, "ion-slides", 0, 1);
+        i0.ɵɵlistener("ionSlideDidChange", function MonthViewComponent_Template_ion_slides_ionSlideDidChange_1_listener() { return ctx.onSlideChanged(); });
+        i0.ɵɵelementStart(3, "ion-slide");
+        i0.ɵɵtemplate(4, MonthViewComponent_table_4_Template, 6, 3, "table", 2);
+        i0.ɵɵtemplate(5, MonthViewComponent_table_5_Template, 7, 3, "table", 2);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(6, "ion-slide");
+        i0.ɵɵtemplate(7, MonthViewComponent_table_7_Template, 6, 3, "table", 2);
+        i0.ɵɵtemplate(8, MonthViewComponent_table_8_Template, 7, 3, "table", 2);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(9, "ion-slide");
+        i0.ɵɵtemplate(10, MonthViewComponent_table_10_Template, 6, 3, "table", 2);
+        i0.ɵɵtemplate(11, MonthViewComponent_table_11_Template, 7, 3, "table", 2);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementEnd();
+        i0.ɵɵtemplate(12, MonthViewComponent_ng_template_12_Template, 0, 0, "ng-template", 3);
+        i0.ɵɵelementEnd();
+    } if (rf & 2) {
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("options", ctx.sliderOptions)("dir", ctx.dir);
+        i0.ɵɵadvance(3);
+        i0.ɵɵproperty("ngIf", 0 === ctx.currentViewIndex);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", 0 !== ctx.currentViewIndex);
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngIf", 1 === ctx.currentViewIndex);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", 1 !== ctx.currentViewIndex);
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngIf", 2 === ctx.currentViewIndex);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", 2 !== ctx.currentViewIndex);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngTemplateOutlet", ctx.monthviewEventDetailTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction3(10, _c4, ctx.showEventDetail, ctx.selectedDate, ctx.noEventsLabel));
+    } }, directives: [i2.IonSlides, i2.IonSlide, i3.NgIf, i3.NgTemplateOutlet, i3.NgForOf, i3.NgClass], styles: [".text-muted[_ngcontent-%COMP%] {\n          color: #999;\n        }\n\n        .table-fixed[_ngcontent-%COMP%] {\n          table-layout: fixed;\n        }\n\n        .table[_ngcontent-%COMP%] {\n          width: 100%;\n          max-width: 100%;\n          background-color: transparent;\n        }\n\n        .table[_ngcontent-%COMP%]    > thead[_ngcontent-%COMP%]    > tr[_ngcontent-%COMP%]    > th[_ngcontent-%COMP%], .table[_ngcontent-%COMP%]    > tbody[_ngcontent-%COMP%]    > tr[_ngcontent-%COMP%]    > th[_ngcontent-%COMP%], .table[_ngcontent-%COMP%]    > tfoot[_ngcontent-%COMP%]    > tr[_ngcontent-%COMP%]    > th[_ngcontent-%COMP%], .table[_ngcontent-%COMP%]    > thead[_ngcontent-%COMP%]    > tr[_ngcontent-%COMP%]    > td[_ngcontent-%COMP%], .table[_ngcontent-%COMP%]    > tbody[_ngcontent-%COMP%]    > tr[_ngcontent-%COMP%]    > td[_ngcontent-%COMP%], .table[_ngcontent-%COMP%]    > tfoot[_ngcontent-%COMP%]    > tr[_ngcontent-%COMP%]    > td[_ngcontent-%COMP%] {\n          padding: 8px;\n          line-height: 20px;\n          vertical-align: top;\n        }\n\n        .table[_ngcontent-%COMP%]    > thead[_ngcontent-%COMP%]    > tr[_ngcontent-%COMP%]    > th[_ngcontent-%COMP%] {\n          vertical-align: bottom;\n          border-bottom: 2px solid #ddd;\n        }\n\n        .table[_ngcontent-%COMP%]    > thead[_ngcontent-%COMP%]:first-child    > tr[_ngcontent-%COMP%]:first-child    > th[_ngcontent-%COMP%], .table[_ngcontent-%COMP%]    > thead[_ngcontent-%COMP%]:first-child    > tr[_ngcontent-%COMP%]:first-child    > td[_ngcontent-%COMP%] {\n          border-top: 0\n        }\n\n        .table[_ngcontent-%COMP%]    > tbody[_ngcontent-%COMP%]    + tbody[_ngcontent-%COMP%] {\n          border-top: 2px solid #ddd;\n        }\n\n        .table-bordered[_ngcontent-%COMP%] {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered[_ngcontent-%COMP%]    > thead[_ngcontent-%COMP%]    > tr[_ngcontent-%COMP%]    > th[_ngcontent-%COMP%], .table-bordered[_ngcontent-%COMP%]    > tbody[_ngcontent-%COMP%]    > tr[_ngcontent-%COMP%]    > th[_ngcontent-%COMP%], .table-bordered[_ngcontent-%COMP%]    > tfoot[_ngcontent-%COMP%]    > tr[_ngcontent-%COMP%]    > th[_ngcontent-%COMP%], .table-bordered[_ngcontent-%COMP%]    > thead[_ngcontent-%COMP%]    > tr[_ngcontent-%COMP%]    > td[_ngcontent-%COMP%], .table-bordered[_ngcontent-%COMP%]    > tbody[_ngcontent-%COMP%]    > tr[_ngcontent-%COMP%]    > td[_ngcontent-%COMP%], .table-bordered[_ngcontent-%COMP%]    > tfoot[_ngcontent-%COMP%]    > tr[_ngcontent-%COMP%]    > td[_ngcontent-%COMP%] {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered[_ngcontent-%COMP%]    > thead[_ngcontent-%COMP%]    > tr[_ngcontent-%COMP%]    > th[_ngcontent-%COMP%], .table-bordered[_ngcontent-%COMP%]    > thead[_ngcontent-%COMP%]    > tr[_ngcontent-%COMP%]    > td[_ngcontent-%COMP%] {\n          border-bottom-width: 2px;\n        }\n\n        .table-striped[_ngcontent-%COMP%]    > tbody[_ngcontent-%COMP%]    > tr[_ngcontent-%COMP%]:nth-child(odd)    > td[_ngcontent-%COMP%], .table-striped[_ngcontent-%COMP%]    > tbody[_ngcontent-%COMP%]    > tr[_ngcontent-%COMP%]:nth-child(odd)    > th[_ngcontent-%COMP%] {\n          background-color: #f9f9f9\n        }\n\n        .monthview-primary-with-event[_ngcontent-%COMP%] {\n          background-color: #3a87ad;\n          color: white;\n        }\n\n        .monthview-current[_ngcontent-%COMP%] {\n          background-color: #f0f0f0;\n        }\n\n        .monthview-selected[_ngcontent-%COMP%] {\n          background-color: #009900;\n          color: white;\n        }\n\n        .monthview-datetable[_ngcontent-%COMP%]   td.monthview-disabled[_ngcontent-%COMP%] {\n            color: lightgrey;\n            cursor: default;\n        }\n\n        .monthview-datetable[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n          text-align: center;\n        }\n\n        .monthview-datetable[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n          cursor: pointer;\n          text-align: center;\n        }\n\n        .monthview-secondary-with-event[_ngcontent-%COMP%] {\n          background-color: #d9edf7;\n        }\n\n        [_ngcontent-%COMP%]::-webkit-scrollbar, *[_ngcontent-%COMP%]::-webkit-scrollbar {\n          display: none;\n        }"] });
+/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(MonthViewComponent, [{
+        type: Component,
+        args: [{
+                selector: 'monthview',
+                template: `
+        <div>
+            <ion-slides #monthSlider [options]="sliderOptions" [dir]="dir" (ionSlideDidChange)="onSlideChanged()">
+                <ion-slide>
+                    <table *ngIf="0===currentViewIndex" class="table table-bordered table-fixed monthview-datetable">
+                        <thead>
+                        <tr>
+                            <th *ngFor="let dayHeader of views[0].dayHeaders">
+                                <small>{{dayHeader}}</small>
+                            </th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr *ngFor="let row of [0,1,2,3,4,5]">
+                            <td *ngFor="let col of [0,1,2,3,4,5,6]" tappable (click)="select(views[0].dates[row*7+col])"
+                                [ngClass]="getHighlightClass(views[0].dates[row*7+col])">
+                                <ng-template [ngTemplateOutlet]="monthviewDisplayEventTemplate"
+                                [ngTemplateOutletContext]="{view: views[0], row: row, col: col}">
+                                </ng-template>
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                    <table *ngIf="0!==currentViewIndex" class="table table-bordered table-fixed monthview-datetable">
+                        <thead>
+                        <tr class="text-center">
+                            <th *ngFor="let dayHeader of views[0].dayHeaders">
+                                <small>{{dayHeader}}</small>
+                            </th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr *ngFor="let row of [0,1,2,3,4,5]">
+                            <td *ngFor="let col of [0,1,2,3,4,5,6]">
+                                <ng-template [ngTemplateOutlet]="monthviewInactiveDisplayEventTemplate"
+                                [ngTemplateOutletContext]="{view: views[0], row: row, col: col}">
+                                </ng-template>
+                            </td>
+                        <tr>
+                        </tbody>
+                    </table>
+                </ion-slide>
+                <ion-slide>
+                    <table *ngIf="1===currentViewIndex" class="table table-bordered table-fixed monthview-datetable">
+                        <thead>
+                        <tr>
+                            <th *ngFor="let dayHeader of views[1].dayHeaders">
+                                <small>{{dayHeader}}</small>
+                            </th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr *ngFor="let row of [0,1,2,3,4,5]">
+                            <td *ngFor="let col of [0,1,2,3,4,5,6]" tappable (click)="select(views[1].dates[row*7+col])"
+                                [ngClass]="getHighlightClass(views[1].dates[row*7+col])">
+                                <ng-template [ngTemplateOutlet]="monthviewDisplayEventTemplate"
+                                [ngTemplateOutletContext]="{view: views[1], row: row, col: col}">
+                                </ng-template>
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                    <table *ngIf="1!==currentViewIndex" class="table table-bordered table-fixed monthview-datetable">
+                        <thead>
+                        <tr class="text-center">
+                            <th *ngFor="let dayHeader of views[1].dayHeaders">
+                                <small>{{dayHeader}}</small>
+                            </th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr *ngFor="let row of [0,1,2,3,4,5]">
+                            <td *ngFor="let col of [0,1,2,3,4,5,6]">
+                                <ng-template [ngTemplateOutlet]="monthviewInactiveDisplayEventTemplate"
+                                [ngTemplateOutletContext]="{view: views[1], row: row, col: col}">
+                                </ng-template>
+                            </td>
+                        <tr>
+                        </tbody>
+                    </table>
+                </ion-slide>
+                <ion-slide>
+                    <table *ngIf="2===currentViewIndex" class="table table-bordered table-fixed monthview-datetable">
+                        <thead>
+                        <tr>
+                            <th *ngFor="let dayHeader of views[2].dayHeaders">
+                                <small>{{dayHeader}}</small>
+                            </th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr *ngFor="let row of [0,1,2,3,4,5]">
+                            <td *ngFor="let col of [0,1,2,3,4,5,6]" tappable (click)="select(views[2].dates[row*7+col])"
+                                [ngClass]="getHighlightClass(views[2].dates[row*7+col])">
+                                <ng-template [ngTemplateOutlet]="monthviewDisplayEventTemplate"
+                                [ngTemplateOutletContext]="{view: views[2], row: row, col: col}">
+                                </ng-template>
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                    <table *ngIf="2!==currentViewIndex" class="table table-bordered table-fixed monthview-datetable">
+                        <thead>
+                        <tr class="text-center">
+                            <th *ngFor="let dayHeader of views[2].dayHeaders">
+                                <small>{{dayHeader}}</small>
+                            </th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr *ngFor="let row of [0,1,2,3,4,5]">
+                            <td *ngFor="let col of [0,1,2,3,4,5,6]">
+                                <ng-template [ngTemplateOutlet]="monthviewInactiveDisplayEventTemplate"
+                                [ngTemplateOutletContext]="{view: views[2], row: row, col: col}">
+                                </ng-template>
+                            </td>
+                        <tr>
+                        </tbody>
+                    </table>
+                </ion-slide>
+            </ion-slides>
+            <ng-template [ngTemplateOutlet]="monthviewEventDetailTemplate"
+            [ngTemplateOutletContext]="{showEventDetail:showEventDetail, selectedDate: selectedDate, noEventsLabel: noEventsLabel}">
+            </ng-template>
+        </div>
+    `,
+                styles: [`
+        .text-muted {
+          color: #999;
+        }
+
+        .table-fixed {
+          table-layout: fixed;
+        }
+
+        .table {
+          width: 100%;
+          max-width: 100%;
+          background-color: transparent;
+        }
+
+        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,
+        .table > tbody > tr > td, .table > tfoot > tr > td {
+          padding: 8px;
+          line-height: 20px;
+          vertical-align: top;
+        }
+
+        .table > thead > tr > th {
+          vertical-align: bottom;
+          border-bottom: 2px solid #ddd;
+        }
+
+        .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {
+          border-top: 0
+        }
+
+        .table > tbody + tbody {
+          border-top: 2px solid #ddd;
+        }
+
+        .table-bordered {
+          border: 1px solid #ddd;
+        }
+
+        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,
+        .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
+          border: 1px solid #ddd;
+        }
+
+        .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {
+          border-bottom-width: 2px;
+        }
+
+        .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {
+          background-color: #f9f9f9
+        }
+
+        .monthview-primary-with-event {
+          background-color: #3a87ad;
+          color: white;
+        }
+
+        .monthview-current {
+          background-color: #f0f0f0;
+        }
+
+        .monthview-selected {
+          background-color: #009900;
+          color: white;
+        }
+
+        .monthview-datetable td.monthview-disabled {
+            color: lightgrey;
+            cursor: default;
+        }
+
+        .monthview-datetable th {
+          text-align: center;
+        }
+
+        .monthview-datetable td {
+          cursor: pointer;
+          text-align: center;
+        }
+
+        .monthview-secondary-with-event {
+          background-color: #d9edf7;
+        }
+
+        ::-webkit-scrollbar,
+        *::-webkit-scrollbar {
+          display: none;
+        }
+    `]
+            }]
+    }], function () { return [{ type: i1.CalendarService }]; }, { slider: [{
+            type: ViewChild,
+            args: ['monthSlider', { static: false }]
+        }], 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
+        }], dateFormatter: [{
+            type: Input
+        }], dir: [{
+            type: Input
+        }], lockSwipeToPrev: [{
+            type: Input
+        }], lockSwipes: [{
+            type: Input
+        }], sliderOptions: [{
+            type: Input
+        }], onRangeChanged: [{
+            type: Output
+        }], onEventSelected: [{
+            type: Output
+        }], onTimeSelected: [{
+            type: Output
+        }], onTitleChanged: [{
+            type: Output
+        }] }); })();

package.json

 {
     "name": "ionic2-calendar",
-    "version": "0.5.9",
+    "version": "0.6.0",
     "description": "Ionic2 calendar component",
@@ -20,21 +20,29 @@ "keywords": [
         "copy_static_files": "cp -r package.json README.md LICENSE tsconfig.json dist/",
-        "dev": "tsc --watch"
+        "dev": "tsc --watch",
+        "postinstall": "ngcc"
     },
     "main": "./index.js",
     "dependencies": {},
+    "peerDependencies": {
+        "@angular/core": ">=9.1.0",
+        "@angular/forms": ">=9.1.0",
+        "@angular/router": ">=9.1.0",
+        "rxjs": ">=6.5.4",
+        "zone.js": ">=0.10.2",
+        "@ionic/angular": ">=5.0.7"
+    },
     "devDependencies": {
-        "typescript": "3.1.6",
-        "@angular/common": "^7.2.1",
-        "@angular/compiler": "^7.2.1",
-        "@angular/compiler-cli": "^7.2.1",
-        "@angular/core": "^7.2.1",
-        "@angular/forms": "^7.2.1",
-        "@angular/platform-browser": "^7.2.1",
-        "@angular/platform-browser-dynamic": "^7.2.1",
-        "@ionic/angular": "4.0.0",
-        "@angular/router": "^7.2.1",
-        "tsickle": "^0.34.0",
-        "rxjs": "^6.2.0",
-        "zone.js": "^0.8.28"
+        "typescript": "3.8.3",
+        "@angular/common": "9.1.0",
+        "@angular/compiler": "9.1.0",
+        "@angular/compiler-cli": "9.1.0",
+        "@angular/core": "9.1.0",
+        "@angular/forms": "9.1.0",
+        "@angular/platform-browser": "9.1.0",
+        "@angular/platform-browser-dynamic": "9.1.0",
+        "@ionic/angular": "5.0.7",
+        "@angular/router": "9.1.0",
+        "rxjs": "^6.5.4",
+        "zone.js": "^0.10.2"
     }
 }

README.md

@@ -18,6 +18,7 @@ # Ionic-Calendar directive
 version 0.2.x depends on Ionic 2.0.0-rc.5 (rc.5 has breaking change on the slide API) and  2.0.0 final version onwards.
-version 0.2.9+ depends on Ionic 2.3.0 version onwards.  
-version 0.3.x depends on Ionic 3.1.1 version onwards.  
-version 0.4.x depends on Ionic 3.9.2 version onwards.  
-version 0.5.x depends on Ionic 4.0.0-rc.1 onwards.
+version 0.2.9+ depends on Ionic (>=2.3.0).  
+version 0.3.x depends on Ionic (>=3.1.1).  
+version 0.4.x depends on Ionic (>=3.9.2).  
+version 0.5.x depends on Ionic (>=4.0.0-rc.1), also supports Ionic 5.0.0.
+Version 0.6.x depends on Ionic (>=5.0.7) and Angular (>=9.1.0).
 
@@ -115,18 +116,3 @@
 
-# Note for Ionic Build/Run command
-ionic serve uses tsc to compile the code, while ionic build/run uses ngc to compile the code.    
-It requires explicit dependency on the compiled ngfactory files for each component.    
-I couldn’t find a way to configure the build command includes the ngfactory of the child components automatically.    
-So the workaround is to import them explicitly.    
-Add below lines in *main.prod.ts*
 
-
-``` typescript
-import { CalendarComponent } from 'ionic2-calendar/calendar';
-import { MonthViewComponent } from 'ionic2-calendar/monthview';
-import { WeekViewComponent } from 'ionic2-calendar/weekview';
-import { DayViewComponent } from 'ionic2-calendar/dayview';
-```
-
-
 # Options
@@ -597,4 +583,2 @@
 
-
-```
 * weekviewInactiveAllDayEventSectionTemplate (version >= 0.5)  
@@ -842,2 +826,2 @@ Type: TemplateRef\<IWeekViewAllDayEventSectionTemplateContext\>
 }
-```
+```

tsconfig.json

@@ -20,6 +20,9 @@ {
         "strictPropertyInitialization": false,
-        "target": "es5"
+        "target": "es2015",
+        "typeRoots": ["node_modules/@types"]
     },
     "angularCompilerOptions": {
-        "enableIvy": false
+        "fullTemplateTypeCheck": true,
+        "strictInjectionParameters": true,
+        "enableIvy": true
     },
@@ -26,0 +29,0 @@ "files": [

weekview.d.ts

@@ -6,2 +6,3 @@ import { IonSlides } from '@ionic/angular';
 import { IDisplayAllDayEvent, IWeekViewAllDayEventSectionTemplateContext, IWeekViewNormalEventSectionTemplateContext } from "./calendar";
+import * as i0 from "@angular/core";
 export declare class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges {
@@ -85,2 +86,4 @@ private calendarService;
     setScrollPosition(scrollPosition: number): void;
+    static ɵfac: i0.ɵɵFactoryDef<WeekViewComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<WeekViewComponent, "weekview", never, { "weekviewHeaderTemplate": "weekviewHeaderTemplate"; "weekviewAllDayEventTemplate": "weekviewAllDayEventTemplate"; "weekviewNormalEventTemplate": "weekviewNormalEventTemplate"; "weekviewAllDayEventSectionTemplate": "weekviewAllDayEventSectionTemplate"; "weekviewNormalEventSectionTemplate": "weekviewNormalEventSectionTemplate"; "weekviewInactiveAllDayEventSectionTemplate": "weekviewInactiveAllDayEventSectionTemplate"; "weekviewInactiveNormalEventSectionTemplate": "weekviewInactiveNormalEventSectionTemplate"; "formatWeekTitle": "formatWeekTitle"; "formatWeekViewDayHeader": "formatWeekViewDayHeader"; "formatHourColumn": "formatHourColumn"; "startingDayWeek": "startingDayWeek"; "allDayLabel": "allDayLabel"; "hourParts": "hourParts"; "eventSource": "eventSource"; "autoSelect": "autoSelect"; "markDisabled": "markDisabled"; "locale": "locale"; "dateFormatter": "dateFormatter"; "dir": "dir"; "scrollToHour": "scrollToHour"; "preserveScrollPosition": "preserveScrollPosition"; "lockSwipeToPrev": "lockSwipeToPrev"; "lockSwipes": "lockSwipes"; "startHour": "startHour"; "endHour": "endHour"; "sliderOptions": "sliderOptions"; "hourSegments": "hourSegments"; }, { "onRangeChanged": "onRangeChanged"; "onEventSelected": "onEventSelected"; "onTimeSelected": "onTimeSelected"; "onTitleChanged": "onTitleChanged"; }, never, never>;
 }

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

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

Major refactor

Supply chain risk

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Long strings

Supply chain risk

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

Found 1 instance in 1 package

Improved metrics

Dev dependency count

12

decreased by-7.69%

Lines of code

5533

increased by45.84%

Number of low supply chain risk alerts

3

decreased by-70%

Worsened metrics

Total package byte prevSize

320211

decreased by-38.25%

Dependency count

6

increased byInfinity%

Number of package files

20

decreased by-58.33%

Number of lines in readme file

824

decreased by-1.79%

Number of high supply chain risk alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes