ionic2-calendar - npm Package Compare versions

Comparing version 0.0.18 to 0.1.0

calendar.d.ts

@@ -1,2 +0,2 @@
-import { EventEmitter, OnInit } from '@angular/core';
+import { EventEmitter, OnInit, TemplateRef } from '@angular/core';
 import { CalendarService } from './calendar.service';
@@ -83,2 +83,11 @@ export interface IEvent {
 }
+export interface IMonthViewDisplayEventTemplateContext {
+    view: IView;
+    row: number;
+    col: number;
+}
+export interface IMonthViewEventDetailTemplateContext {
+    selectedDate: ITimeSelected;
+    noEventsLabel: string;
+}
 export declare type CalendarMode = 'day' | 'month' | 'week';
@@ -111,2 +120,8 @@ export declare type QueryMode = 'local' | 'remote';
     markDisabled: (date: Date) => boolean;
+    monthviewDisplayEventTemplate: TemplateRef<IMonthViewDisplayEventTemplateContext>;
+    monthviewEventDetailTemplate: TemplateRef<IMonthViewEventDetailTemplateContext>;
+    weekviewAllDayEventTemplate: TemplateRef<IDisplayAllDayEvent>;
+    weekviewNormalEventTemplate: TemplateRef<IDisplayEvent>;
+    dayviewAllDayEventTemplate: TemplateRef<IDisplayAllDayEvent>;
+    dayviewNormalEventTemplate: TemplateRef<IDisplayEvent>;
     onCurrentDateChanged: EventEmitter<Date>;
@@ -113,0 +128,0 @@ onRangeChanged: EventEmitter<IRange>;

calendar.js

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

calendar.metadata.json

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

dayview.d.ts

 import { Slides } from 'ionic-angular';
-import { OnInit, OnChanges, EventEmitter, SimpleChanges } from '@angular/core';
+import { OnInit, OnChanges, EventEmitter, SimpleChanges, TemplateRef } from '@angular/core';
 import { ICalendarComponent, IDayView, IDayViewRow, IDisplayEvent, IEvent, ITimeSelected, IRange, CalendarMode } from './calendar';
 import { CalendarService } from './calendar.service';
+import { IDisplayAllDayEvent } from "./calendar";
 export declare class DayViewComponent implements ICalendarComponent, OnInit, OnChanges {
@@ -9,2 +10,4 @@ private calendarService;
     class: boolean;
+    dayviewAllDayEventTemplate: TemplateRef<IDisplayAllDayEvent>;
+    dayviewNormalEventTemplate: TemplateRef<IDisplayEvent>;
     formatHourColumn: string;
@@ -11,0 +14,0 @@ formatDayTitle: string;

dayview.js

@@ -306,4 +306,4 @@ import { DatePipe } from '@angular/common';
                     selector: 'dayview',
-                    template: "\n            <ion-slides #daySlider [options]=\"slideOption\" (ionDidChange)=\"onSlideChanged()\">\n                <ion-slide *ngFor=\"let view of views; let viewIndex=index\">\n                    <div class=\"dayview-allday-table\">\n                        <div class=\"dayview-allday-label\">{{allDayLabel}}</div>\n                        <ion-scroll scrollY=\"true\" zoom=\"false\" class=\"dayview-allday-content-wrapper\">\n                            <table class=\"table table-bordered dayview-allday-content-table\">\n                                <tbody>\n                                <tr>\n                                    <td class=\"calendar-cell\" [ngClass]=\"{'calendar-event-wrap':view.allDayEvents.length>0}\"\n                                        [ngStyle]=\"{height: 25*view.allDayEvents.length+'px'}\"\n                                        *ngIf=\"viewIndex===currentViewIndex\">\n                                        <div *ngFor=\"let displayEvent of view.allDayEvents; let eventIndex=index\"\n                                             class=\"calendar-event\"\n                                             (click)=\"eventSelected(displayEvent.event)\"\n                                             [ngStyle]=\"{top: 25*eventIndex+'px',width: '100%',height:'25px'}\">\n                                            <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n                                        </div>\n                                    </td>\n                                    <td class=\"calendar-cell\" *ngIf=\"viewIndex!==currentViewIndex\">\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <ion-scroll scrollY=\"true\" class=\"dayview-normal-event-container\">\n                        <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                               *ngIf=\"viewIndex===currentViewIndex\">\n                            <tbody>\n                            <tr *ngFor=\"let tm of view.rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{tm.time | date: formatHourColumn}}\n                                </td>\n                                <td class=\"calendar-cell\" (click)=\"select(tm.time, tm.events)\">\n                                    <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                        <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\"\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                                            <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n                                        </div>\n                                    </div>\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                        <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                               *ngIf=\"viewIndex!==currentViewIndex\">\n                            <tbody>\n                            <tr *ngFor=\"let tm of view.rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{tm.time | date: formatHourColumn}}\n                                </td>\n                                <td class=\"calendar-cell\">\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </ion-slide>\n            </ion-slides>\n    ",
-                    styles: ["\n        .table-fixed {\n          table-layout: fixed;\n        }\n\n        .table {\n          width: 100%;\n          max-width: 100%;\n          background-color: transparent;\n        }\n\n        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,\n        .table > tbody > tr > td, .table > tfoot > tr > td {\n          padding: 8px;\n          line-height: 20px;\n          vertical-align: top;\n        }\n\n        .table > thead > tr > th {\n          vertical-align: bottom;\n          border-bottom: 2px solid #ddd;\n        }\n\n        .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {\n          border-top: 0\n        }\n\n        .table > tbody + tbody {\n          border-top: 2px solid #ddd;\n        }\n\n        .table-bordered {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,\n        .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {\n          border-bottom-width: 2px;\n        }\n\n        .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {\n          background-color: #f9f9f9\n        }\n\n        .calendar-hour-column {\n          width: 50px;\n          white-space: nowrap;\n        }\n\n        .calendar-event-wrap {\n          position: relative;\n          width: 100%;\n          height: 100%;\n        }\n\n        .calendar-event {\n          position: absolute;\n          padding: 2px;\n          cursor: pointer;\n          z-index: 10000;\n        }\n\n        .calendar-event-inner {\n          overflow: hidden;\n          background-color: #3a87ad;\n          color: white;\n          height: 100%;\n          width: 100%;\n          padding: 2px;\n          line-height: 15px;\n        }\n\n        .calendar-cell {\n          padding: 0 !important;\n          height: 37px;\n        }\n\n        .dayview-allday-label {\n          float: left;\n          height: 100%;\n          line-height: 50px;\n          text-align: center;\n          width: 50px;\n        }\n\n        .dayview-allday-content-wrapper {\n          margin-left: 50px;\n          overflow: hidden;\n          height: 51px;\n        }\n\n        .dayview-allday-content-table {\n          min-height: 50px;\n        }\n\n        .dayview-allday-content-table td {\n          border-left: 1px solid #ddd;\n          border-right: 1px solid #ddd;\n        }\n\n        .dayview {\n          height: 100%;\n        }\n\n        .dayview-allday-table {\n          height: 50px;\n          position: relative;\n          border-bottom: 1px solid #ddd;\n          font-size: 14px;\n        }\n\n        .dayview-normal-event-container {\n          margin-top: 50px;\n          overflow: hidden;\n          left: 0;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          position: absolute;\n          font-size: 14px;\n        }\n\n        .dayview .slide-zoom {\n          height: 100%;\n        }\n\n        .dayview-allday-content-wrapper scroll-content {\n          width: 100%;\n        }\n\n        ::-webkit-scrollbar,\n        *::-webkit-scrollbar {\n          display: none;\n        }\n\n        .table > tbody > tr > td.calendar-hour-column {\n          padding-left: 0;\n          padding-right: 0;\n          vertical-align: middle;\n        }\n\n        @media (max-width: 750px) {\n          .dayview-allday-label, .calendar-hour-column {\n            width: 31px;\n            font-size: 12px;\n          }\n\n          .dayview-allday-label {\n            padding-top: 4px;\n          }\n\n          .table > tbody > tr > td.calendar-hour-column {\n            padding-left: 0;\n            padding-right: 0;\n            vertical-align: middle;\n            line-height: 12px;\n          }\n\n          .dayview-allday-label {\n            line-height: 20px;\n          }\n\n          .dayview-allday-content-wrapper {\n            margin-left: 31px;\n          }\n\n          .calendar-event-inner {\n            font-size: 12px;\n          }\n        }\n    "],
+                    template: "\n        <ion-slides #daySlider [options]=\"slideOption\" (ionDidChange)=\"onSlideChanged()\">\n            <ion-slide *ngFor=\"let view of views; let viewIndex=index\">\n                <div class=\"dayview-allday-table\">\n                    <div class=\"dayview-allday-label\">{{allDayLabel}}</div>\n                    <ion-scroll scrollY=\"true\" zoom=\"false\" class=\"dayview-allday-content-wrapper\">\n                        <table class=\"table table-bordered dayview-allday-content-table\">\n                            <tbody>\n                            <tr>\n                                <td class=\"calendar-cell\" [ngClass]=\"{'calendar-event-wrap':view.allDayEvents.length>0}\"\n                                    [ngStyle]=\"{height: 25*view.allDayEvents.length+'px'}\"\n                                    *ngIf=\"viewIndex===currentViewIndex\">\n                                    <div *ngFor=\"let displayEvent of view.allDayEvents; let eventIndex=index\"\n                                         class=\"calendar-event\"\n                                         (click)=\"eventSelected(displayEvent.event)\"\n                                         [ngStyle]=\"{top: 25*eventIndex+'px',width: '100%',height:'25px'}\">\n                                        <template [ngTemplateOutlet]=\"dayviewAllDayEventTemplate\"\n                                            [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                        </template>\n                                    </div>\n                                </td>\n                                <td class=\"calendar-cell\" *ngIf=\"viewIndex!==currentViewIndex\">\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n                <ion-scroll scrollY=\"true\" class=\"dayview-normal-event-container\">\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                           *ngIf=\"viewIndex===currentViewIndex\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of view.rows\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{tm.time | date: formatHourColumn}}\n                            </td>\n                            <td class=\"calendar-cell\" (click)=\"select(tm.time, tm.events)\">\n                                <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                    <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\"\n                                         (click)=\"eventSelected(displayEvent.event)\"\n                                         [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px', left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n                                         <template [ngTemplateOutlet]=\"dayviewNormalEventTemplate\"\n                                             [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                         </template>\n                                    </div>\n                                </div>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n                           *ngIf=\"viewIndex!==currentViewIndex\">\n                        <tbody>\n                        <tr *ngFor=\"let tm of view.rows\">\n                            <td class=\"calendar-hour-column text-center\">\n                                {{tm.time | date: formatHourColumn}}\n                            </td>\n                            <td class=\"calendar-cell\">\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                </ion-scroll>\n            </ion-slide>\n        </ion-slides>\n    ",
+                    styles: ["\n        .table-fixed {\n          table-layout: fixed;\n        }\n\n        .table {\n          width: 100%;\n          max-width: 100%;\n          background-color: transparent;\n        }\n\n        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,\n        .table > tbody > tr > td, .table > tfoot > tr > td {\n          padding: 8px;\n          line-height: 20px;\n          vertical-align: top;\n        }\n\n        .table > thead > tr > th {\n          vertical-align: bottom;\n          border-bottom: 2px solid #ddd;\n        }\n\n        .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {\n          border-top: 0\n        }\n\n        .table > tbody + tbody {\n          border-top: 2px solid #ddd;\n        }\n\n        .table-bordered {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,\n        .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {\n          border-bottom-width: 2px;\n        }\n\n        .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {\n          background-color: #f9f9f9\n        }\n\n        .calendar-hour-column {\n          width: 50px;\n          white-space: nowrap;\n        }\n\n        .calendar-event-wrap {\n          position: relative;\n          width: 100%;\n          height: 100%;\n        }\n\n        .calendar-event {\n          position: absolute;\n          padding: 2px;\n          cursor: pointer;\n          z-index: 10000;\n        }\n\n        .calendar-cell {\n          padding: 0 !important;\n          height: 37px;\n        }\n\n        .dayview-allday-label {\n          float: left;\n          height: 100%;\n          line-height: 50px;\n          text-align: center;\n          width: 50px;\n        }\n\n        .dayview-allday-content-wrapper {\n          margin-left: 50px;\n          overflow: hidden;\n          height: 51px;\n        }\n\n        .dayview-allday-content-table {\n          min-height: 50px;\n        }\n\n        .dayview-allday-content-table td {\n          border-left: 1px solid #ddd;\n          border-right: 1px solid #ddd;\n        }\n\n        .dayview-allday-table {\n          height: 50px;\n          position: relative;\n          border-bottom: 1px solid #ddd;\n          font-size: 14px;\n        }\n\n        .dayview-normal-event-container {\n          margin-top: 50px;\n          overflow: hidden;\n          left: 0;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          position: absolute;\n          font-size: 14px;\n        }\n\n        .dayview .slide-zoom {\n          height: 100%;\n        }\n\n        .dayview-allday-content-wrapper scroll-content {\n          width: 100%;\n        }\n\n        ::-webkit-scrollbar,\n        *::-webkit-scrollbar {\n          display: none;\n        }\n\n        .table > tbody > tr > td.calendar-hour-column {\n          padding-left: 0;\n          padding-right: 0;\n          vertical-align: middle;\n        }\n\n        @media (max-width: 750px) {\n          .dayview-allday-label, .calendar-hour-column {\n            width: 31px;\n            font-size: 12px;\n          }\n\n          .dayview-allday-label {\n            padding-top: 4px;\n          }\n\n          .table > tbody > tr > td.calendar-hour-column {\n            padding-left: 0;\n            padding-right: 0;\n            vertical-align: middle;\n            line-height: 12px;\n          }\n\n          .dayview-allday-label {\n            line-height: 20px;\n          }\n\n          .dayview-allday-content-wrapper {\n            margin-left: 31px;\n          }\n        }\n    "],
                     encapsulation: ViewEncapsulation.None
@@ -318,2 +318,4 @@ },] },
         'class': [{ type: HostBinding, args: ['class.dayview',] },],
+        'dayviewAllDayEventTemplate': [{ type: Input },],
+        'dayviewNormalEventTemplate': [{ type: Input },],
         'formatHourColumn': [{ type: Input },],
@@ -320,0 +322,0 @@ 'formatDayTitle': [{ type: Input },],

dayview.metadata.json

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

dayview.ngfactory.ts

@@ -34,2 +34,3 @@ /**
 import * as import26 from '@angular/core/src/change_detection/differs/keyvalue_differs';
+import * as import27 from '@angular/common/src/directives/ng_template_outlet';
 var renderType_DayViewComponent_Host:import0.RenderComponentType = (null as any);
@@ -76,3 +77,3 @@ class _View_DayViewComponent_Host0 extends import1.AppView<any> {
 export const DayViewComponentNgFactory:import10.ComponentFactory<import3.DayViewComponent> = new import10.ComponentFactory<import3.DayViewComponent>('dayview',viewFactory_DayViewComponent_Host0,import3.DayViewComponent);
-const styles_DayViewComponent:any[] = ['\n        .table-fixed {\n          table-layout: fixed;\n        }\n\n        .table {\n          width: 100%;\n          max-width: 100%;\n          background-color: transparent;\n        }\n\n        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,\n        .table > tbody > tr > td, .table > tfoot > tr > td {\n          padding: 8px;\n          line-height: 20px;\n          vertical-align: top;\n        }\n\n        .table > thead > tr > th {\n          vertical-align: bottom;\n          border-bottom: 2px solid #ddd;\n        }\n\n        .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {\n          border-top: 0\n        }\n\n        .table > tbody + tbody {\n          border-top: 2px solid #ddd;\n        }\n\n        .table-bordered {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,\n        .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {\n          border-bottom-width: 2px;\n        }\n\n        .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {\n          background-color: #f9f9f9\n        }\n\n        .calendar-hour-column {\n          width: 50px;\n          white-space: nowrap;\n        }\n\n        .calendar-event-wrap {\n          position: relative;\n          width: 100%;\n          height: 100%;\n        }\n\n        .calendar-event {\n          position: absolute;\n          padding: 2px;\n          cursor: pointer;\n          z-index: 10000;\n        }\n\n        .calendar-event-inner {\n          overflow: hidden;\n          background-color: #3a87ad;\n          color: white;\n          height: 100%;\n          width: 100%;\n          padding: 2px;\n          line-height: 15px;\n        }\n\n        .calendar-cell {\n          padding: 0 !important;\n          height: 37px;\n        }\n\n        .dayview-allday-label {\n          float: left;\n          height: 100%;\n          line-height: 50px;\n          text-align: center;\n          width: 50px;\n        }\n\n        .dayview-allday-content-wrapper {\n          margin-left: 50px;\n          overflow: hidden;\n          height: 51px;\n        }\n\n        .dayview-allday-content-table {\n          min-height: 50px;\n        }\n\n        .dayview-allday-content-table td {\n          border-left: 1px solid #ddd;\n          border-right: 1px solid #ddd;\n        }\n\n        .dayview {\n          height: 100%;\n        }\n\n        .dayview-allday-table {\n          height: 50px;\n          position: relative;\n          border-bottom: 1px solid #ddd;\n          font-size: 14px;\n        }\n\n        .dayview-normal-event-container {\n          margin-top: 50px;\n          overflow: hidden;\n          left: 0;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          position: absolute;\n          font-size: 14px;\n        }\n\n        .dayview .slide-zoom {\n          height: 100%;\n        }\n\n        .dayview-allday-content-wrapper scroll-content {\n          width: 100%;\n        }\n\n        ::-webkit-scrollbar,\n        *::-webkit-scrollbar {\n          display: none;\n        }\n\n        .table > tbody > tr > td.calendar-hour-column {\n          padding-left: 0;\n          padding-right: 0;\n          vertical-align: middle;\n        }\n\n        @media (max-width: 750px) {\n          .dayview-allday-label, .calendar-hour-column {\n            width: 31px;\n            font-size: 12px;\n          }\n\n          .dayview-allday-label {\n            padding-top: 4px;\n          }\n\n          .table > tbody > tr > td.calendar-hour-column {\n            padding-left: 0;\n            padding-right: 0;\n            vertical-align: middle;\n            line-height: 12px;\n          }\n\n          .dayview-allday-label {\n            line-height: 20px;\n          }\n\n          .dayview-allday-content-wrapper {\n            margin-left: 31px;\n          }\n\n          .calendar-event-inner {\n            font-size: 12px;\n          }\n        }\n    '];
+const styles_DayViewComponent:any[] = ['\n        .table-fixed {\n          table-layout: fixed;\n        }\n\n        .table {\n          width: 100%;\n          max-width: 100%;\n          background-color: transparent;\n        }\n\n        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,\n        .table > tbody > tr > td, .table > tfoot > tr > td {\n          padding: 8px;\n          line-height: 20px;\n          vertical-align: top;\n        }\n\n        .table > thead > tr > th {\n          vertical-align: bottom;\n          border-bottom: 2px solid #ddd;\n        }\n\n        .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {\n          border-top: 0\n        }\n\n        .table > tbody + tbody {\n          border-top: 2px solid #ddd;\n        }\n\n        .table-bordered {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,\n        .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {\n          border-bottom-width: 2px;\n        }\n\n        .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {\n          background-color: #f9f9f9\n        }\n\n        .calendar-hour-column {\n          width: 50px;\n          white-space: nowrap;\n        }\n\n        .calendar-event-wrap {\n          position: relative;\n          width: 100%;\n          height: 100%;\n        }\n\n        .calendar-event {\n          position: absolute;\n          padding: 2px;\n          cursor: pointer;\n          z-index: 10000;\n        }\n\n        .calendar-cell {\n          padding: 0 !important;\n          height: 37px;\n        }\n\n        .dayview-allday-label {\n          float: left;\n          height: 100%;\n          line-height: 50px;\n          text-align: center;\n          width: 50px;\n        }\n\n        .dayview-allday-content-wrapper {\n          margin-left: 50px;\n          overflow: hidden;\n          height: 51px;\n        }\n\n        .dayview-allday-content-table {\n          min-height: 50px;\n        }\n\n        .dayview-allday-content-table td {\n          border-left: 1px solid #ddd;\n          border-right: 1px solid #ddd;\n        }\n\n        .dayview-allday-table {\n          height: 50px;\n          position: relative;\n          border-bottom: 1px solid #ddd;\n          font-size: 14px;\n        }\n\n        .dayview-normal-event-container {\n          margin-top: 50px;\n          overflow: hidden;\n          left: 0;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          position: absolute;\n          font-size: 14px;\n        }\n\n        .dayview .slide-zoom {\n          height: 100%;\n        }\n\n        .dayview-allday-content-wrapper scroll-content {\n          width: 100%;\n        }\n\n        ::-webkit-scrollbar,\n        *::-webkit-scrollbar {\n          display: none;\n        }\n\n        .table > tbody > tr > td.calendar-hour-column {\n          padding-left: 0;\n          padding-right: 0;\n          vertical-align: middle;\n        }\n\n        @media (max-width: 750px) {\n          .dayview-allday-label, .calendar-hour-column {\n            width: 31px;\n            font-size: 12px;\n          }\n\n          .dayview-allday-label {\n            padding-top: 4px;\n          }\n\n          .table > tbody > tr > td.calendar-hour-column {\n            padding-left: 0;\n            padding-right: 0;\n            vertical-align: middle;\n            line-height: 12px;\n          }\n\n          .dayview-allday-label {\n            line-height: 20px;\n          }\n\n          .dayview-allday-content-wrapper {\n            margin-left: 31px;\n          }\n        }\n    '];
 var renderType_DayViewComponent:import0.RenderComponentType = (null as any);
@@ -101,3 +102,3 @@ class _View_DayViewComponent0 extends import1.AppView<import3.DayViewComponent> {
     this._viewQuery_daySlider_0 = new import11.QueryList<any>();
-    this._text_0 = this.renderer.createText(parentRenderNode,'\n            ',(null as any));
+    this._text_0 = this.renderer.createText(parentRenderNode,'\n        ',(null as any));
     this._el_1 = this.renderer.createElement(parentRenderNode,'ion-slides',(null as any));
@@ -108,3 +109,3 @@ this._appEl_1 = new import2.AppElement(1,(null as any),this,this._el_1);
     this._appEl_1.initComponent(this._Slides_1_4,[],compView_1);
-    this._text_2 = this.renderer.createText((null as any),'\n                ',(null as any));
+    this._text_2 = this.renderer.createText((null as any),'\n            ',(null as any));
     this._anchor_3 = this.renderer.createTemplateAnchor((null as any),(null as any));
@@ -114,3 +115,3 @@ this._appEl_3 = new import2.AppElement(3,1,this,this._anchor_3);
     this._NgFor_3_6 = new import13.NgFor(this._appEl_3.vcRef,this._TemplateRef_3_5,this.parentInjector.get(import19.IterableDiffers),this.ref);
-    this._text_4 = this.renderer.createText((null as any),'\n            ',(null as any));
+    this._text_4 = this.renderer.createText((null as any),'\n        ',(null as any));
       compView_1.create(this._Slides_1_4,[[].concat([
@@ -253,10 +254,10 @@ this._text_2,
     this._appEl_0.initComponent(this._Slide_0_4,[],compView_0);
-    this._text_1 = this.renderer.createText((null as any),'\n                    ',(null as any));
+    this._text_1 = this.renderer.createText((null as any),'\n                ',(null as any));
     this._el_2 = this.renderer.createElement((null as any),'div',(null as any));
     this.renderer.setElementAttribute(this._el_2,'class','dayview-allday-table');
-    this._text_3 = this.renderer.createText(this._el_2,'\n                        ',(null as any));
+    this._text_3 = this.renderer.createText(this._el_2,'\n                    ',(null as any));
     this._el_4 = this.renderer.createElement(this._el_2,'div',(null as any));
     this.renderer.setElementAttribute(this._el_4,'class','dayview-allday-label');
     this._text_5 = this.renderer.createText(this._el_4,'',(null as any));
-    this._text_6 = this.renderer.createText(this._el_2,'\n                        ',(null as any));
+    this._text_6 = this.renderer.createText(this._el_2,'\n                    ',(null as any));
     this._el_7 = this.renderer.createElement(this._el_2,'ion-scroll',(null as any));
@@ -270,10 +271,10 @@ this.renderer.setElementAttribute(this._el_7,'class','dayview-allday-content-wrapper');
     this._appEl_7.initComponent(this._Scroll_7_4,[],compView_7);
-    this._text_8 = this.renderer.createText((null as any),'\n                            ',(null as any));
+    this._text_8 = this.renderer.createText((null as any),'\n                        ',(null as any));
     this._el_9 = this.renderer.createElement((null as any),'table',(null as any));
     this.renderer.setElementAttribute(this._el_9,'class','table table-bordered dayview-allday-content-table');
-    this._text_10 = this.renderer.createText(this._el_9,'\n                                ',(null as any));
+    this._text_10 = this.renderer.createText(this._el_9,'\n                            ',(null as any));
     this._el_11 = this.renderer.createElement(this._el_9,'tbody',(null as any));
-    this._text_12 = this.renderer.createText(this._el_11,'\n                                ',(null as any));
+    this._text_12 = this.renderer.createText(this._el_11,'\n                            ',(null as any));
     this._el_13 = this.renderer.createElement(this._el_11,'tr',(null as any));
-    this._text_14 = this.renderer.createText(this._el_13,'\n                                    ',(null as any));
+    this._text_14 = this.renderer.createText(this._el_13,'\n                                ',(null as any));
     this._anchor_15 = this.renderer.createTemplateAnchor(this._el_13,(null as any));
@@ -283,11 +284,11 @@ this._appEl_15 = new import2.AppElement(15,13,this,this._anchor_15);
     this._NgIf_15_6 = new import22.NgIf(this._appEl_15.vcRef,this._TemplateRef_15_5);
-    this._text_16 = this.renderer.createText(this._el_13,'\n                                    ',(null as any));
+    this._text_16 = this.renderer.createText(this._el_13,'\n                                ',(null as any));
     this._anchor_17 = this.renderer.createTemplateAnchor(this._el_13,(null as any));
     this._appEl_17 = new import2.AppElement(17,13,this,this._anchor_17);
-    this._TemplateRef_17_5 = new import18.TemplateRef_(this._appEl_17,viewFactory_DayViewComponent4);
+    this._TemplateRef_17_5 = new import18.TemplateRef_(this._appEl_17,viewFactory_DayViewComponent5);
     this._NgIf_17_6 = new import22.NgIf(this._appEl_17.vcRef,this._TemplateRef_17_5);
-    this._text_18 = this.renderer.createText(this._el_13,'\n                                ',(null as any));
-    this._text_19 = this.renderer.createText(this._el_11,'\n                                ',(null as any));
-    this._text_20 = this.renderer.createText(this._el_9,'\n                            ',(null as any));
-    this._text_21 = this.renderer.createText((null as any),'\n                        ',(null as any));
+    this._text_18 = this.renderer.createText(this._el_13,'\n                            ',(null as any));
+    this._text_19 = this.renderer.createText(this._el_11,'\n                            ',(null as any));
+    this._text_20 = this.renderer.createText(this._el_9,'\n                        ',(null as any));
+    this._text_21 = this.renderer.createText((null as any),'\n                    ',(null as any));
       compView_7.create(this._Scroll_7_4,[[].concat([
@@ -299,4 +300,4 @@ this._text_8,
     )],(null as any));
-    this._text_22 = this.renderer.createText(this._el_2,'\n                    ',(null as any));
-    this._text_23 = this.renderer.createText((null as any),'\n                    ',(null as any));
+    this._text_22 = this.renderer.createText(this._el_2,'\n                ',(null as any));
+    this._text_23 = this.renderer.createText((null as any),'\n                ',(null as any));
     this._el_24 = this.renderer.createElement((null as any),'ion-scroll',(null as any));
@@ -309,13 +310,13 @@ this.renderer.setElementAttribute(this._el_24,'class','dayview-normal-event-container');
     this._appEl_24.initComponent(this._Scroll_24_4,[],compView_24);
-    this._text_25 = this.renderer.createText((null as any),'\n                        ',(null as any));
+    this._text_25 = this.renderer.createText((null as any),'\n                    ',(null as any));
     this._anchor_26 = this.renderer.createTemplateAnchor((null as any),(null as any));
     this._appEl_26 = new import2.AppElement(26,24,this,this._anchor_26);
-    this._TemplateRef_26_5 = new import18.TemplateRef_(this._appEl_26,viewFactory_DayViewComponent5);
+    this._TemplateRef_26_5 = new import18.TemplateRef_(this._appEl_26,viewFactory_DayViewComponent6);
     this._NgIf_26_6 = new import22.NgIf(this._appEl_26.vcRef,this._TemplateRef_26_5);
-    this._text_27 = this.renderer.createText((null as any),'\n                        ',(null as any));
+    this._text_27 = this.renderer.createText((null as any),'\n                    ',(null as any));
     this._anchor_28 = this.renderer.createTemplateAnchor((null as any),(null as any));
     this._appEl_28 = new import2.AppElement(28,24,this,this._anchor_28);
-    this._TemplateRef_28_5 = new import18.TemplateRef_(this._appEl_28,viewFactory_DayViewComponent9);
+    this._TemplateRef_28_5 = new import18.TemplateRef_(this._appEl_28,viewFactory_DayViewComponent11);
     this._NgIf_28_6 = new import22.NgIf(this._appEl_28.vcRef,this._TemplateRef_28_5);
-    this._text_29 = this.renderer.createText((null as any),'\n                    ',(null as any));
+    this._text_29 = this.renderer.createText((null as any),'\n                ',(null as any));
       compView_24.create(this._Scroll_24_4,[[].concat([
@@ -329,3 +330,3 @@ this._text_25,
     )],(null as any));
-    this._text_30 = this.renderer.createText((null as any),'\n                ',(null as any));
+    this._text_30 = this.renderer.createText((null as any),'\n            ',(null as any));
       compView_0.create(this._Slide_0_4,[[].concat([
@@ -506,3 +507,3 @@ this._text_1,
     this._NgStyle_0_4 = new import25.NgStyle(this.parent.parent.parentInjector.get(import26.KeyValueDiffers),new import17.ElementRef(this._el_0),this.renderer);
-    this._text_1 = this.renderer.createText(this._el_0,'\n                                        ',(null as any));
+    this._text_1 = this.renderer.createText(this._el_0,'\n                                    ',(null as any));
     this._anchor_2 = this.renderer.createTemplateAnchor(this._el_0,(null as any));
@@ -512,3 +513,3 @@ this._appEl_2 = new import2.AppElement(2,0,this,this._anchor_2);
     this._NgFor_2_6 = new import13.NgFor(this._appEl_2.vcRef,this._TemplateRef_2_5,this.parent.parent.parentInjector.get(import19.IterableDiffers),this.parent.parent.ref);
-    this._text_3 = this.renderer.createText(this._el_0,'\n                                    ',(null as any));
+    this._text_3 = this.renderer.createText(this._el_0,'\n                                ',(null as any));
     this._expr_0 = import7.UNINITIALIZED;
@@ -580,8 +581,12 @@ this._map_0 = import4.pureProxy1((p0:any):{[key: string]:any} => {
   _text_1:any;
-  _el_2:any;
+  _anchor_2:any;
+  /*private*/ _appEl_2:import2.AppElement;
+  _TemplateRef_2_5:any;
+  _NgTemplateOutlet_2_6:import27.NgTemplateOutlet;
   _text_3:any;
-  _text_4:any;
   _map_0:any;
   /*private*/ _expr_1:any;
+  _map_1:any;
   /*private*/ _expr_2:any;
+  /*private*/ _expr_3:any;
   constructor(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement) {
@@ -594,7 +599,8 @@ super(_View_DayViewComponent3,renderType_DayViewComponent,import6.ViewType.EMBEDDED,viewUtils,parentInjector,declarationEl,import7.ChangeDetectorStatus.CheckAlways);
     this._NgStyle_0_3 = new import25.NgStyle(this.parent.parent.parent.parentInjector.get(import26.KeyValueDiffers),new import17.ElementRef(this._el_0),this.renderer);
-    this._text_1 = this.renderer.createText(this._el_0,'\n                                            ',(null as any));
-    this._el_2 = this.renderer.createElement(this._el_0,'div',(null as any));
-    this.renderer.setElementAttribute(this._el_2,'class','calendar-event-inner');
-    this._text_3 = this.renderer.createText(this._el_2,'',(null as any));
-    this._text_4 = this.renderer.createText(this._el_0,'\n                                        ',(null as any));
+    this._text_1 = this.renderer.createText(this._el_0,'\n                                        ',(null as any));
+    this._anchor_2 = this.renderer.createTemplateAnchor(this._el_0,(null as any));
+    this._appEl_2 = new import2.AppElement(2,0,this,this._anchor_2);
+    this._TemplateRef_2_5 = new import18.TemplateRef_(this._appEl_2,viewFactory_DayViewComponent4);
+    this._NgTemplateOutlet_2_6 = new import27.NgTemplateOutlet(this._appEl_2.vcRef);
+    this._text_3 = this.renderer.createText(this._el_0,'\n                                    ',(null as any));
     var disposable_0:Function = this.renderer.listen(this._el_0,'click',this.eventHandler(this._handle_click_0_0.bind(this)));
@@ -610,9 +616,12 @@ this._map_0 = import4.pureProxy3((p0:any,p1:any,p2:any):{[key: string]:any} => {
     this._expr_1 = import7.UNINITIALIZED;
+    this._map_1 = import4.pureProxy1((p0:any):{[key: string]:any} => {
+      return {displayEvent: p0};
+    });
     this._expr_2 = import7.UNINITIALIZED;
+    this._expr_3 = import7.UNINITIALIZED;
     this.init([].concat([this._el_0]),[
       this._el_0,
       this._text_1,
-      this._el_2,
-      this._text_3,
-      this._text_4
+      this._anchor_2,
+      this._text_3
     ]
@@ -623,6 +632,9 @@ ,[disposable_0],[]);
   injectorGetInternal(token:any,requestNodeIndex:number,notFoundResult:any):any {
-    if (((token === import25.NgStyle) && ((0 <= requestNodeIndex) && (requestNodeIndex <= 4)))) { return this._NgStyle_0_3; }
+    if (((token === import18.TemplateRef) && (2 === requestNodeIndex))) { return this._TemplateRef_2_5; }
+    if (((token === import27.NgTemplateOutlet) && (2 === requestNodeIndex))) { return this._NgTemplateOutlet_2_6; }
+    if (((token === import25.NgStyle) && ((0 <= requestNodeIndex) && (requestNodeIndex <= 3)))) { return this._NgStyle_0_3; }
     return notFoundResult;
   }
   detectChangesInternal(throwOnChange:boolean):void {
+    var changes:{[key: string]:import7.SimpleChange} = (null as any);
     const currVal_1:any = this._map_0(((25 * this.context.index) + 'px'),'100%','25px');
@@ -634,8 +646,19 @@ if (import4.checkBinding(throwOnChange,this._expr_1,currVal_1)) {
     if (!throwOnChange) { this._NgStyle_0_3.ngDoCheck(); }
-    this.detectContentChildrenChanges(throwOnChange);
-    const currVal_2:any = import4.interpolate(1,'',this.context.$implicit.event.title,'');
+    changes = (null as any);
+    const currVal_2:any = this._map_1(this.context.$implicit);
     if (import4.checkBinding(throwOnChange,this._expr_2,currVal_2)) {
-      this.renderer.setText(this._text_3,currVal_2);
+      this._NgTemplateOutlet_2_6.ngOutletContext = currVal_2;
+      if ((changes === (null as any))) { (changes = {}); }
+      changes['ngOutletContext'] = new import7.SimpleChange(this._expr_2,currVal_2);
       this._expr_2 = currVal_2;
     }
+    const currVal_3:any = this.parent.parent.parent.context.dayviewAllDayEventTemplate;
+    if (import4.checkBinding(throwOnChange,this._expr_3,currVal_3)) {
+      this._NgTemplateOutlet_2_6.ngTemplateOutlet = currVal_3;
+      if ((changes === (null as any))) { (changes = {}); }
+      changes['ngTemplateOutlet'] = new import7.SimpleChange(this._expr_3,currVal_3);
+      this._expr_3 = currVal_3;
+    }
+    if ((changes !== (null as any))) { this._NgTemplateOutlet_2_6.ngOnChanges(changes); }
+    this.detectContentChildrenChanges(throwOnChange);
     this.detectViewChildrenChanges(throwOnChange);
@@ -653,6 +676,20 @@ }
 class _View_DayViewComponent4 extends import1.AppView<any> {
+  _text_0:any;
+  constructor(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement) {
+    super(_View_DayViewComponent4,renderType_DayViewComponent,import6.ViewType.EMBEDDED,viewUtils,parentInjector,declarationEl,import7.ChangeDetectorStatus.CheckAlways);
+  }
+  createInternal(rootSelector:string):import2.AppElement {
+    this._text_0 = this.renderer.createText((null as any),'\n                                        ',(null as any));
+    this.init([].concat([this._text_0]),[this._text_0],[],[]);
+    return (null as any);
+  }
+}
+function viewFactory_DayViewComponent4(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement):import1.AppView<any> {
+  return new _View_DayViewComponent4(viewUtils,parentInjector,declarationEl);
+}
+class _View_DayViewComponent5 extends import1.AppView<any> {
   _el_0:any;
   _text_1:any;
   constructor(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement) {
-    super(_View_DayViewComponent4,renderType_DayViewComponent,import6.ViewType.EMBEDDED,viewUtils,parentInjector,declarationEl,import7.ChangeDetectorStatus.CheckAlways);
+    super(_View_DayViewComponent5,renderType_DayViewComponent,import6.ViewType.EMBEDDED,viewUtils,parentInjector,declarationEl,import7.ChangeDetectorStatus.CheckAlways);
   }
@@ -662,3 +699,3 @@ createInternal(rootSelector:string):import2.AppElement {
     this.renderer.setElementAttribute(this._el_0,'class','calendar-cell');
-    this._text_1 = this.renderer.createText(this._el_0,'\n                                    ',(null as any));
+    this._text_1 = this.renderer.createText(this._el_0,'\n                                ',(null as any));
     this.init([].concat([this._el_0]),[
@@ -672,6 +709,6 @@ this._el_0,
 }
-function viewFactory_DayViewComponent4(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement):import1.AppView<any> {
-  return new _View_DayViewComponent4(viewUtils,parentInjector,declarationEl);
+function viewFactory_DayViewComponent5(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement):import1.AppView<any> {
+  return new _View_DayViewComponent5(viewUtils,parentInjector,declarationEl);
 }
-class _View_DayViewComponent5 extends import1.AppView<any> {
+class _View_DayViewComponent6 extends import1.AppView<any> {
   _el_0:any;
@@ -689,3 +726,3 @@ _text_1:any;
   constructor(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement) {
-    super(_View_DayViewComponent5,renderType_DayViewComponent,import6.ViewType.EMBEDDED,viewUtils,parentInjector,declarationEl,import7.ChangeDetectorStatus.CheckAlways);
+    super(_View_DayViewComponent6,renderType_DayViewComponent,import6.ViewType.EMBEDDED,viewUtils,parentInjector,declarationEl,import7.ChangeDetectorStatus.CheckAlways);
   }
@@ -695,11 +732,11 @@ createInternal(rootSelector:string):import2.AppElement {
     this.renderer.setElementAttribute(this._el_0,'class','table table-bordered table-fixed dayview-normal-event-table');
-    this._text_1 = this.renderer.createText(this._el_0,'\n                            ',(null as any));
+    this._text_1 = this.renderer.createText(this._el_0,'\n                        ',(null as any));
     this._el_2 = this.renderer.createElement(this._el_0,'tbody',(null as any));
-    this._text_3 = this.renderer.createText(this._el_2,'\n                            ',(null as any));
+    this._text_3 = this.renderer.createText(this._el_2,'\n                        ',(null as any));
     this._anchor_4 = this.renderer.createTemplateAnchor(this._el_2,(null as any));
     this._appEl_4 = new import2.AppElement(4,2,this,this._anchor_4);
-    this._TemplateRef_4_5 = new import18.TemplateRef_(this._appEl_4,viewFactory_DayViewComponent6);
+    this._TemplateRef_4_5 = new import18.TemplateRef_(this._appEl_4,viewFactory_DayViewComponent7);
     this._NgFor_4_6 = new import13.NgFor(this._appEl_4.vcRef,this._TemplateRef_4_5,this.parent.parent.parentInjector.get(import19.IterableDiffers),this.parent.parent.ref);
-    this._text_5 = this.renderer.createText(this._el_2,'\n                            ',(null as any));
-    this._text_6 = this.renderer.createText(this._el_0,'\n                        ',(null as any));
+    this._text_5 = this.renderer.createText(this._el_2,'\n                        ',(null as any));
+    this._text_6 = this.renderer.createText(this._el_0,'\n                    ',(null as any));
     this._expr_0 = import7.UNINITIALIZED;
@@ -739,6 +776,6 @@ this.init([].concat([this._el_0]),[
 }
-function viewFactory_DayViewComponent5(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement):import1.AppView<any> {
-  return new _View_DayViewComponent5(viewUtils,parentInjector,declarationEl);
+function viewFactory_DayViewComponent6(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement):import1.AppView<any> {
+  return new _View_DayViewComponent6(viewUtils,parentInjector,declarationEl);
 }
-class _View_DayViewComponent6 extends import1.AppView<any> {
+class _View_DayViewComponent7 extends import1.AppView<any> {
   _el_0:any;
@@ -761,20 +798,20 @@ _text_1:any;
   constructor(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement) {
-    super(_View_DayViewComponent6,renderType_DayViewComponent,import6.ViewType.EMBEDDED,viewUtils,parentInjector,declarationEl,import7.ChangeDetectorStatus.CheckAlways);
+    super(_View_DayViewComponent7,renderType_DayViewComponent,import6.ViewType.EMBEDDED,viewUtils,parentInjector,declarationEl,import7.ChangeDetectorStatus.CheckAlways);
   }
   createInternal(rootSelector:string):import2.AppElement {
     this._el_0 = this.renderer.createElement((null as any),'tr',(null as any));
-    this._text_1 = this.renderer.createText(this._el_0,'\n                                ',(null as any));
+    this._text_1 = this.renderer.createText(this._el_0,'\n                            ',(null as any));
     this._el_2 = this.renderer.createElement(this._el_0,'td',(null as any));
     this.renderer.setElementAttribute(this._el_2,'class','calendar-hour-column text-center');
     this._text_3 = this.renderer.createText(this._el_2,'',(null as any));
-    this._text_4 = this.renderer.createText(this._el_0,'\n                                ',(null as any));
+    this._text_4 = this.renderer.createText(this._el_0,'\n                            ',(null as any));
     this._el_5 = this.renderer.createElement(this._el_0,'td',(null as any));
     this.renderer.setElementAttribute(this._el_5,'class','calendar-cell');
-    this._text_6 = this.renderer.createText(this._el_5,'\n                                    ',(null as any));
+    this._text_6 = this.renderer.createText(this._el_5,'\n                                ',(null as any));
     this._anchor_7 = this.renderer.createTemplateAnchor(this._el_5,(null as any));
     this._appEl_7 = new import2.AppElement(7,5,this,this._anchor_7);
-    this._TemplateRef_7_5 = new import18.TemplateRef_(this._appEl_7,viewFactory_DayViewComponent7);
+    this._TemplateRef_7_5 = new import18.TemplateRef_(this._appEl_7,viewFactory_DayViewComponent8);
     this._NgIf_7_6 = new import22.NgIf(this._appEl_7.vcRef,this._TemplateRef_7_5);
-    this._text_8 = this.renderer.createText(this._el_5,'\n                                ',(null as any));
-    this._text_9 = this.renderer.createText(this._el_0,'\n                            ',(null as any));
+    this._text_8 = this.renderer.createText(this._el_5,'\n                            ',(null as any));
+    this._text_9 = this.renderer.createText(this._el_0,'\n                        ',(null as any));
     this._pipe_date_0_0 = import4.pureProxy2((<_View_DayViewComponent0>this.parent.parent.parent)._pipe_date_0.transform.bind((<_View_DayViewComponent0>this.parent.parent.parent)._pipe_date_0));
@@ -813,3 +850,3 @@ this._expr_0 = import7.UNINITIALIZED;
     valUnwrapper.reset();
-    const currVal_0:any = import4.interpolate(1,'\n                                    ',valUnwrapper.unwrap(import4.castByValue(this._pipe_date_0_0,(<_View_DayViewComponent0>this.parent.parent.parent)._pipe_date_0.transform)(this.context.$implicit.time,this.parent.parent.parent.context.formatHourColumn)),'\n                                ');
+    const currVal_0:any = import4.interpolate(1,'\n                                ',valUnwrapper.unwrap(import4.castByValue(this._pipe_date_0_0,(<_View_DayViewComponent0>this.parent.parent.parent)._pipe_date_0.transform)(this.context.$implicit.time,this.parent.parent.parent.context.formatHourColumn)),'\n                            ');
     if ((valUnwrapper.hasWrappedValue || import4.checkBinding(throwOnChange,this._expr_0,currVal_0))) {
@@ -827,6 +864,6 @@ this.renderer.setText(this._text_3,currVal_0);
 }
-function viewFactory_DayViewComponent6(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement):import1.AppView<any> {
-  return new _View_DayViewComponent6(viewUtils,parentInjector,declarationEl);
+function viewFactory_DayViewComponent7(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement):import1.AppView<any> {
+  return new _View_DayViewComponent7(viewUtils,parentInjector,declarationEl);
 }
-class _View_DayViewComponent7 extends import1.AppView<any> {
+class _View_DayViewComponent8 extends import1.AppView<any> {
   _el_0:any;
@@ -844,3 +881,3 @@ _NgClass_0_3:import24.NgClass;
   constructor(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement) {
-    super(_View_DayViewComponent7,renderType_DayViewComponent,import6.ViewType.EMBEDDED,viewUtils,parentInjector,declarationEl,import7.ChangeDetectorStatus.CheckAlways);
+    super(_View_DayViewComponent8,renderType_DayViewComponent,import6.ViewType.EMBEDDED,viewUtils,parentInjector,declarationEl,import7.ChangeDetectorStatus.CheckAlways);
   }
@@ -850,8 +887,8 @@ createInternal(rootSelector:string):import2.AppElement {
     this._NgClass_0_3 = new import24.NgClass(this.parent.parent.parent.parent.parentInjector.get(import19.IterableDiffers),this.parent.parent.parent.parent.parentInjector.get(import26.KeyValueDiffers),new import17.ElementRef(this._el_0),this.renderer);
-    this._text_1 = this.renderer.createText(this._el_0,'\n                                        ',(null as any));
+    this._text_1 = this.renderer.createText(this._el_0,'\n                                    ',(null as any));
     this._anchor_2 = this.renderer.createTemplateAnchor(this._el_0,(null as any));
     this._appEl_2 = new import2.AppElement(2,0,this,this._anchor_2);
-    this._TemplateRef_2_5 = new import18.TemplateRef_(this._appEl_2,viewFactory_DayViewComponent8);
+    this._TemplateRef_2_5 = new import18.TemplateRef_(this._appEl_2,viewFactory_DayViewComponent9);
     this._NgFor_2_6 = new import13.NgFor(this._appEl_2.vcRef,this._TemplateRef_2_5,this.parent.parent.parent.parent.parentInjector.get(import19.IterableDiffers),this.parent.parent.parent.parent.ref);
-    this._text_3 = this.renderer.createText(this._el_0,'\n                                    ',(null as any));
+    this._text_3 = this.renderer.createText(this._el_0,'\n                                ',(null as any));
     this._map_0 = import4.pureProxy1((p0:any):{[key: string]:any} => {
@@ -899,17 +936,21 @@ return {'calendar-event-wrap': p0};
 }
-function viewFactory_DayViewComponent7(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement):import1.AppView<any> {
-  return new _View_DayViewComponent7(viewUtils,parentInjector,declarationEl);
+function viewFactory_DayViewComponent8(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement):import1.AppView<any> {
+  return new _View_DayViewComponent8(viewUtils,parentInjector,declarationEl);
 }
-class _View_DayViewComponent8 extends import1.AppView<any> {
+class _View_DayViewComponent9 extends import1.AppView<any> {
   _el_0:any;
   _NgStyle_0_3:import25.NgStyle;
   _text_1:any;
-  _el_2:any;
+  _anchor_2:any;
+  /*private*/ _appEl_2:import2.AppElement;
+  _TemplateRef_2_5:any;
+  _NgTemplateOutlet_2_6:import27.NgTemplateOutlet;
   _text_3:any;
-  _text_4:any;
   _map_0:any;
   /*private*/ _expr_1:any;
+  _map_1:any;
   /*private*/ _expr_2:any;
+  /*private*/ _expr_3:any;
   constructor(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement) {
-    super(_View_DayViewComponent8,renderType_DayViewComponent,import6.ViewType.EMBEDDED,viewUtils,parentInjector,declarationEl,import7.ChangeDetectorStatus.CheckAlways);
+    super(_View_DayViewComponent9,renderType_DayViewComponent,import6.ViewType.EMBEDDED,viewUtils,parentInjector,declarationEl,import7.ChangeDetectorStatus.CheckAlways);
   }
@@ -920,7 +961,8 @@ createInternal(rootSelector:string):import2.AppElement {
     this._NgStyle_0_3 = new import25.NgStyle(this.parent.parent.parent.parent.parent.parentInjector.get(import26.KeyValueDiffers),new import17.ElementRef(this._el_0),this.renderer);
-    this._text_1 = this.renderer.createText(this._el_0,'\n                                            ',(null as any));
-    this._el_2 = this.renderer.createElement(this._el_0,'div',(null as any));
-    this.renderer.setElementAttribute(this._el_2,'class','calendar-event-inner');
-    this._text_3 = this.renderer.createText(this._el_2,'',(null as any));
-    this._text_4 = this.renderer.createText(this._el_0,'\n                                        ',(null as any));
+    this._text_1 = this.renderer.createText(this._el_0,'\n                                         ',(null as any));
+    this._anchor_2 = this.renderer.createTemplateAnchor(this._el_0,(null as any));
+    this._appEl_2 = new import2.AppElement(2,0,this,this._anchor_2);
+    this._TemplateRef_2_5 = new import18.TemplateRef_(this._appEl_2,viewFactory_DayViewComponent10);
+    this._NgTemplateOutlet_2_6 = new import27.NgTemplateOutlet(this._appEl_2.vcRef);
+    this._text_3 = this.renderer.createText(this._el_0,'\n                                    ',(null as any));
     var disposable_0:Function = this.renderer.listen(this._el_0,'click',this.eventHandler(this._handle_click_0_0.bind(this)));
@@ -937,9 +979,12 @@ this._map_0 = import4.pureProxy4((p0:any,p1:any,p2:any,p3:any):{[key: string]:any} => {
     this._expr_1 = import7.UNINITIALIZED;
+    this._map_1 = import4.pureProxy1((p0:any):{[key: string]:any} => {
+      return {displayEvent: p0};
+    });
     this._expr_2 = import7.UNINITIALIZED;
+    this._expr_3 = import7.UNINITIALIZED;
     this.init([].concat([this._el_0]),[
       this._el_0,
       this._text_1,
-      this._el_2,
-      this._text_3,
-      this._text_4
+      this._anchor_2,
+      this._text_3
     ]
@@ -950,6 +995,9 @@ ,[disposable_0],[]);
   injectorGetInternal(token:any,requestNodeIndex:number,notFoundResult:any):any {
-    if (((token === import25.NgStyle) && ((0 <= requestNodeIndex) && (requestNodeIndex <= 4)))) { return this._NgStyle_0_3; }
+    if (((token === import18.TemplateRef) && (2 === requestNodeIndex))) { return this._TemplateRef_2_5; }
+    if (((token === import27.NgTemplateOutlet) && (2 === requestNodeIndex))) { return this._NgTemplateOutlet_2_6; }
+    if (((token === import25.NgStyle) && ((0 <= requestNodeIndex) && (requestNodeIndex <= 3)))) { return this._NgStyle_0_3; }
     return notFoundResult;
   }
   detectChangesInternal(throwOnChange:boolean):void {
+    var changes:{[key: string]:import7.SimpleChange} = (null as any);
     const currVal_1:any = this._map_0((((37 * this.context.$implicit.startOffset) / this.parent.parent.parent.parent.parent.context.hourParts) + 'px'),(((100 / this.context.$implicit.overlapNumber) * this.context.$implicit.position) + '%'),((100 / this.context.$implicit.overlapNumber) + '%'),((37 * ((this.context.$implicit.endIndex - this.context.$implicit.startIndex) - ((this.context.$implicit.endOffset + this.context.$implicit.startOffset) / this.parent.parent.parent.parent.parent.context.hourParts))) + 'px'));
@@ -961,8 +1009,19 @@ if (import4.checkBinding(throwOnChange,this._expr_1,currVal_1)) {
     if (!throwOnChange) { this._NgStyle_0_3.ngDoCheck(); }
-    this.detectContentChildrenChanges(throwOnChange);
-    const currVal_2:any = import4.interpolate(1,'',this.context.$implicit.event.title,'');
+    changes = (null as any);
+    const currVal_2:any = this._map_1(this.context.$implicit);
     if (import4.checkBinding(throwOnChange,this._expr_2,currVal_2)) {
-      this.renderer.setText(this._text_3,currVal_2);
+      this._NgTemplateOutlet_2_6.ngOutletContext = currVal_2;
+      if ((changes === (null as any))) { (changes = {}); }
+      changes['ngOutletContext'] = new import7.SimpleChange(this._expr_2,currVal_2);
       this._expr_2 = currVal_2;
     }
+    const currVal_3:any = this.parent.parent.parent.parent.parent.context.dayviewNormalEventTemplate;
+    if (import4.checkBinding(throwOnChange,this._expr_3,currVal_3)) {
+      this._NgTemplateOutlet_2_6.ngTemplateOutlet = currVal_3;
+      if ((changes === (null as any))) { (changes = {}); }
+      changes['ngTemplateOutlet'] = new import7.SimpleChange(this._expr_3,currVal_3);
+      this._expr_3 = currVal_3;
+    }
+    if ((changes !== (null as any))) { this._NgTemplateOutlet_2_6.ngOnChanges(changes); }
+    this.detectContentChildrenChanges(throwOnChange);
     this.detectViewChildrenChanges(throwOnChange);
@@ -976,6 +1035,20 @@ }
 }
-function viewFactory_DayViewComponent8(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement):import1.AppView<any> {
-  return new _View_DayViewComponent8(viewUtils,parentInjector,declarationEl);
+function viewFactory_DayViewComponent9(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement):import1.AppView<any> {
+  return new _View_DayViewComponent9(viewUtils,parentInjector,declarationEl);
 }
-class _View_DayViewComponent9 extends import1.AppView<any> {
+class _View_DayViewComponent10 extends import1.AppView<any> {
+  _text_0:any;
+  constructor(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement) {
+    super(_View_DayViewComponent10,renderType_DayViewComponent,import6.ViewType.EMBEDDED,viewUtils,parentInjector,declarationEl,import7.ChangeDetectorStatus.CheckAlways);
+  }
+  createInternal(rootSelector:string):import2.AppElement {
+    this._text_0 = this.renderer.createText((null as any),'\n                                         ',(null as any));
+    this.init([].concat([this._text_0]),[this._text_0],[],[]);
+    return (null as any);
+  }
+}
+function viewFactory_DayViewComponent10(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement):import1.AppView<any> {
+  return new _View_DayViewComponent10(viewUtils,parentInjector,declarationEl);
+}
+class _View_DayViewComponent11 extends import1.AppView<any> {
   _el_0:any;
@@ -993,3 +1066,3 @@ _text_1:any;
   constructor(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement) {
-    super(_View_DayViewComponent9,renderType_DayViewComponent,import6.ViewType.EMBEDDED,viewUtils,parentInjector,declarationEl,import7.ChangeDetectorStatus.CheckAlways);
+    super(_View_DayViewComponent11,renderType_DayViewComponent,import6.ViewType.EMBEDDED,viewUtils,parentInjector,declarationEl,import7.ChangeDetectorStatus.CheckAlways);
   }
@@ -999,11 +1072,11 @@ createInternal(rootSelector:string):import2.AppElement {
     this.renderer.setElementAttribute(this._el_0,'class','table table-bordered table-fixed dayview-normal-event-table');
-    this._text_1 = this.renderer.createText(this._el_0,'\n                            ',(null as any));
+    this._text_1 = this.renderer.createText(this._el_0,'\n                        ',(null as any));
     this._el_2 = this.renderer.createElement(this._el_0,'tbody',(null as any));
-    this._text_3 = this.renderer.createText(this._el_2,'\n                            ',(null as any));
+    this._text_3 = this.renderer.createText(this._el_2,'\n                        ',(null as any));
     this._anchor_4 = this.renderer.createTemplateAnchor(this._el_2,(null as any));
     this._appEl_4 = new import2.AppElement(4,2,this,this._anchor_4);
-    this._TemplateRef_4_5 = new import18.TemplateRef_(this._appEl_4,viewFactory_DayViewComponent10);
+    this._TemplateRef_4_5 = new import18.TemplateRef_(this._appEl_4,viewFactory_DayViewComponent12);
     this._NgFor_4_6 = new import13.NgFor(this._appEl_4.vcRef,this._TemplateRef_4_5,this.parent.parent.parentInjector.get(import19.IterableDiffers),this.parent.parent.ref);
-    this._text_5 = this.renderer.createText(this._el_2,'\n                            ',(null as any));
-    this._text_6 = this.renderer.createText(this._el_0,'\n                        ',(null as any));
+    this._text_5 = this.renderer.createText(this._el_2,'\n                        ',(null as any));
+    this._text_6 = this.renderer.createText(this._el_0,'\n                    ',(null as any));
     this._expr_0 = import7.UNINITIALIZED;
@@ -1043,6 +1116,6 @@ this.init([].concat([this._el_0]),[
 }
-function viewFactory_DayViewComponent9(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement):import1.AppView<any> {
-  return new _View_DayViewComponent9(viewUtils,parentInjector,declarationEl);
+function viewFactory_DayViewComponent11(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement):import1.AppView<any> {
+  return new _View_DayViewComponent11(viewUtils,parentInjector,declarationEl);
 }
-class _View_DayViewComponent10 extends import1.AppView<any> {
+class _View_DayViewComponent12 extends import1.AppView<any> {
   _el_0:any;
@@ -1059,15 +1132,15 @@ _text_1:any;
   constructor(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement) {
-    super(_View_DayViewComponent10,renderType_DayViewComponent,import6.ViewType.EMBEDDED,viewUtils,parentInjector,declarationEl,import7.ChangeDetectorStatus.CheckAlways);
+    super(_View_DayViewComponent12,renderType_DayViewComponent,import6.ViewType.EMBEDDED,viewUtils,parentInjector,declarationEl,import7.ChangeDetectorStatus.CheckAlways);
   }
   createInternal(rootSelector:string):import2.AppElement {
     this._el_0 = this.renderer.createElement((null as any),'tr',(null as any));
-    this._text_1 = this.renderer.createText(this._el_0,'\n                                ',(null as any));
+    this._text_1 = this.renderer.createText(this._el_0,'\n                            ',(null as any));
     this._el_2 = this.renderer.createElement(this._el_0,'td',(null as any));
     this.renderer.setElementAttribute(this._el_2,'class','calendar-hour-column text-center');
     this._text_3 = this.renderer.createText(this._el_2,'',(null as any));
-    this._text_4 = this.renderer.createText(this._el_0,'\n                                ',(null as any));
+    this._text_4 = this.renderer.createText(this._el_0,'\n                            ',(null as any));
     this._el_5 = this.renderer.createElement(this._el_0,'td',(null as any));
     this.renderer.setElementAttribute(this._el_5,'class','calendar-cell');
-    this._text_6 = this.renderer.createText(this._el_5,'\n                                ',(null as any));
-    this._text_7 = this.renderer.createText(this._el_0,'\n                            ',(null as any));
+    this._text_6 = this.renderer.createText(this._el_5,'\n                            ',(null as any));
+    this._text_7 = this.renderer.createText(this._el_0,'\n                        ',(null as any));
     this._pipe_date_0_1 = import4.pureProxy2((<_View_DayViewComponent0>this.parent.parent.parent)._pipe_date_0.transform.bind((<_View_DayViewComponent0>this.parent.parent.parent)._pipe_date_0));
@@ -1092,3 +1165,3 @@ this._expr_0 = import7.UNINITIALIZED;
     valUnwrapper.reset();
-    const currVal_0:any = import4.interpolate(1,'\n                                    ',valUnwrapper.unwrap(import4.castByValue(this._pipe_date_0_1,(<_View_DayViewComponent0>this.parent.parent.parent)._pipe_date_0.transform)(this.context.$implicit.time,this.parent.parent.parent.context.formatHourColumn)),'\n                                ');
+    const currVal_0:any = import4.interpolate(1,'\n                                ',valUnwrapper.unwrap(import4.castByValue(this._pipe_date_0_1,(<_View_DayViewComponent0>this.parent.parent.parent)._pipe_date_0.transform)(this.context.$implicit.time,this.parent.parent.parent.context.formatHourColumn)),'\n                            ');
     if ((valUnwrapper.hasWrappedValue || import4.checkBinding(throwOnChange,this._expr_0,currVal_0))) {
@@ -1101,4 +1174,4 @@ this.renderer.setText(this._text_3,currVal_0);
 }
-function viewFactory_DayViewComponent10(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement):import1.AppView<any> {
-  return new _View_DayViewComponent10(viewUtils,parentInjector,declarationEl);
+function viewFactory_DayViewComponent12(viewUtils:import4.ViewUtils,parentInjector:import5.Injector,declarationEl:import2.AppElement):import1.AppView<any> {
+  return new _View_DayViewComponent12(viewUtils,parentInjector,declarationEl);
 }

monthview.d.ts

@@ -1,8 +0,11 @@
-import { OnInit, OnChanges, EventEmitter, SimpleChanges } from '@angular/core';
+import { OnInit, OnChanges, EventEmitter, SimpleChanges, TemplateRef } from '@angular/core';
 import { Slides } from 'ionic-angular';
 import { ICalendarComponent, IEvent, IMonthView, IMonthViewRow, ITimeSelected, IRange, CalendarMode } from './calendar';
 import { CalendarService } from './calendar.service';
+import { IMonthViewDisplayEventTemplateContext } from "./calendar";
 export declare class MonthViewComponent implements ICalendarComponent, OnInit, OnChanges {
     private calendarService;
     slider: Slides;
+    monthviewDisplayEventTemplate: TemplateRef<IMonthViewDisplayEventTemplateContext>;
+    monthviewEventDetailTemplate: TemplateRef<IMonthViewDisplayEventTemplateContext>;
     formatDay: string;
@@ -9,0 +12,0 @@ formatDayHeader: string;

monthview.js

@@ -347,4 +347,4 @@ import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
                     selector: 'monthview',
-                    template: "\n        <div>\n            <ion-slides #monthSlider [options]=\"slideOption\" (ionDidChange)=\"onSlideChanged()\">\n                <ion-slide *ngFor=\"let view of views; let viewIndex=index\">\n                    <table *ngIf=\"viewIndex===currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr>\n                            <th *ngFor=\"let day of view.dates.slice(0,7)\">\n                                <small>{{day.date | date: formatDayHeader}}</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]\" (click)=\"select(view.dates[row*7+col])\"\n                                [ngClass]=\"getHighlightClass(view.dates[row*7+col])\">{{view.dates[row*7+col].label}}\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table *ngIf=\"viewIndex!==currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr class=\"text-center\">\n                            <th *ngFor=\"let day of view.dates.slice(0,7)\">\n                                <small>{{day.date | date: formatDayHeader}}</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                                {{view.dates[row*7+col].label}}\n                            </td>\n                        <tr>\n                        </tbody>\n                    </table>\n                </ion-slide>\n            </ion-slides>\n            <ion-list class=\"event-detail-container2\" 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\">All day</span>\n                    <span class=\"event-detail\">  |  {{event.title}}</span>\n                </ion-item>\n                <ion-item *ngIf=\"!selectedDate?.events\">\n                    <td class=\"no-events-label\">{{noEventsLabel}}</td>\n                </ion-item>\n            </ion-list>\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        .no-event-label {\n          font-weight: bold;\n          color: darkgrey;\n          text-align: center;\n        }\n\n        .event-detail-container {\n          border-top: 2px darkgrey solid;\n          margin-top: 262px;\n        }\n\n        .event-detail {\n          cursor: pointer;\n          white-space: nowrap;\n          text-overflow: ellipsis;\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-eventdetail-timecolumn {\n          width: 110px;\n          overflow: hidden;\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\n        @media (max-width: 750px) {\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    "]
+                    template: "\n        <div>\n            <ion-slides #monthSlider [options]=\"slideOption\" (ionDidChange)=\"onSlideChanged()\">\n                <ion-slide *ngFor=\"let view of views; let viewIndex=index\">\n                    <table *ngIf=\"viewIndex===currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr>\n                            <th *ngFor=\"let day of view.dates.slice(0,7)\">\n                                <small>{{day.date | date: formatDayHeader}}</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]\" (click)=\"select(view.dates[row*7+col])\"\n                                [ngClass]=\"getHighlightClass(view.dates[row*7+col])\">\n                                <template [ngTemplateOutlet]=\"monthviewDisplayEventTemplate\"\n                                [ngOutletContext]=\"{view: view, row: row, col: col}\">\n                                </template>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table *ngIf=\"viewIndex!==currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr class=\"text-center\">\n                            <th *ngFor=\"let day of view.dates.slice(0,7)\">\n                                <small>{{day.date | date: formatDayHeader}}</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                                {{view.dates[row*7+col].label}}\n                            </td>\n                        <tr>\n                        </tbody>\n                    </table>\n                </ion-slide>\n            </ion-slides>\n            <template [ngTemplateOutlet]=\"monthviewEventDetailTemplate\"\n            [ngOutletContext]=\"{showEventDetail:showEventDetail, selectedDate: selectedDate, noEventsLabel: noEventsLabel}\">\n            </template>\n        </div>\n    ",
+                    styles: ["\n        .text-muted {\n          color: #999;\n        }\n\n        .table-fixed {\n          table-layout: fixed;\n        }\n\n        .table {\n          width: 100%;\n          max-width: 100%;\n          background-color: transparent;\n        }\n\n        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,\n        .table > tbody > tr > td, .table > tfoot > tr > td {\n          padding: 8px;\n          line-height: 20px;\n          vertical-align: top;\n        }\n\n        .table > thead > tr > th {\n          vertical-align: bottom;\n          border-bottom: 2px solid #ddd;\n        }\n\n        .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {\n          border-top: 0\n        }\n\n        .table > tbody + tbody {\n          border-top: 2px solid #ddd;\n        }\n\n        .table-bordered {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,\n        .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {\n          border-bottom-width: 2px;\n        }\n\n        .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {\n          background-color: #f9f9f9\n        }\n\n        .monthview-primary-with-event {\n          background-color: #3a87ad;\n          color: white;\n        }\n\n        .monthview-current {\n          background-color: #f0f0f0;\n        }\n\n        .monthview-selected {\n          background-color: #009900;\n          color: white;\n        }\n\n        .monthview-datetable td.monthview-disabled {\n            color: lightgrey;\n            cursor: default;\n        }\n\n        .monthview-datetable th {\n          text-align: center;\n        }\n\n        .monthview-datetable td {\n          cursor: pointer;\n          text-align: center;\n        }\n\n        .monthview-secondary-with-event {\n          background-color: #d9edf7;\n        }\n\n        ::-webkit-scrollbar,\n        *::-webkit-scrollbar {\n          display: none;\n        }\n    "]
                 },] },
@@ -357,2 +357,4 @@ ];
         'slider': [{ type: ViewChild, args: ['monthSlider',] },],
+        'monthviewDisplayEventTemplate': [{ type: Input },],
+        'monthviewEventDetailTemplate': [{ type: Input },],
         'formatDay': [{ type: Input },],
@@ -359,0 +361,0 @@ 'formatDayHeader': [{ type: Input },],

monthview.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"MonthViewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"monthview","template":"\n        <div>\n            <ion-slides #monthSlider [options]=\"slideOption\" (ionDidChange)=\"onSlideChanged()\">\n                <ion-slide *ngFor=\"let view of views; let viewIndex=index\">\n                    <table *ngIf=\"viewIndex===currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr>\n                            <th *ngFor=\"let day of view.dates.slice(0,7)\">\n                                <small>{{day.date | date: formatDayHeader}}</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]\" (click)=\"select(view.dates[row*7+col])\"\n                                [ngClass]=\"getHighlightClass(view.dates[row*7+col])\">{{view.dates[row*7+col].label}}\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table *ngIf=\"viewIndex!==currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr class=\"text-center\">\n                            <th *ngFor=\"let day of view.dates.slice(0,7)\">\n                                <small>{{day.date | date: formatDayHeader}}</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                                {{view.dates[row*7+col].label}}\n                            </td>\n                        <tr>\n                        </tbody>\n                    </table>\n                </ion-slide>\n            </ion-slides>\n            <ion-list class=\"event-detail-container2\" 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\">All day</span>\n                    <span class=\"event-detail\">  |  {{event.title}}</span>\n                </ion-item>\n                <ion-item *ngIf=\"!selectedDate?.events\">\n                    <td class=\"no-events-label\">{{noEventsLabel}}</td>\n                </ion-item>\n            </ion-list>\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        .no-event-label {\n          font-weight: bold;\n          color: darkgrey;\n          text-align: center;\n        }\n\n        .event-detail-container {\n          border-top: 2px darkgrey solid;\n          margin-top: 262px;\n        }\n\n        .event-detail {\n          cursor: pointer;\n          white-space: nowrap;\n          text-overflow: ellipsis;\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-eventdetail-timecolumn {\n          width: 110px;\n          overflow: hidden;\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\n        @media (max-width: 750px) {\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    "]}]}],"members":{"slider":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["monthSlider"]}]}],"formatDay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatDayHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatMonthTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"eventSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"startingDayMonth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showEventDetail":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"noEventsLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"markDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onRangeChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onEventSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onTimeSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onTitleChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./calendar.service","name":"CalendarService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onSlideChanged":[{"__symbolic":"method"}],"move":[{"__symbolic":"method"}],"createDateObject":[{"__symbolic":"method"}],"getViewData":[{"__symbolic":"method"}],"getHighlightClass":[{"__symbolic":"method"}],"getRange":[{"__symbolic":"method"}],"onDataLoaded":[{"__symbolic":"method"}],"refreshView":[{"__symbolic":"method"}],"getTitle":[{"__symbolic":"method"}],"compareEvent":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"slideView":[{"__symbolic":"method"}],"updateCurrentView":[{"__symbolic":"method"}],"eventSelected":[{"__symbolic":"method"}]}}}}
+{"__symbolic":"module","version":1,"metadata":{"MonthViewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"monthview","template":"\n        <div>\n            <ion-slides #monthSlider [options]=\"slideOption\" (ionDidChange)=\"onSlideChanged()\">\n                <ion-slide *ngFor=\"let view of views; let viewIndex=index\">\n                    <table *ngIf=\"viewIndex===currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr>\n                            <th *ngFor=\"let day of view.dates.slice(0,7)\">\n                                <small>{{day.date | date: formatDayHeader}}</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]\" (click)=\"select(view.dates[row*7+col])\"\n                                [ngClass]=\"getHighlightClass(view.dates[row*7+col])\">\n                                <template [ngTemplateOutlet]=\"monthviewDisplayEventTemplate\"\n                                [ngOutletContext]=\"{view: view, row: row, col: col}\">\n                                </template>\n                            </td>\n                        </tr>\n                        </tbody>\n                    </table>\n                    <table *ngIf=\"viewIndex!==currentViewIndex\" class=\"table table-bordered table-fixed monthview-datetable\">\n                        <thead>\n                        <tr class=\"text-center\">\n                            <th *ngFor=\"let day of view.dates.slice(0,7)\">\n                                <small>{{day.date | date: formatDayHeader}}</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                                {{view.dates[row*7+col].label}}\n                            </td>\n                        <tr>\n                        </tbody>\n                    </table>\n                </ion-slide>\n            </ion-slides>\n            <template [ngTemplateOutlet]=\"monthviewEventDetailTemplate\"\n            [ngOutletContext]=\"{showEventDetail:showEventDetail, selectedDate: selectedDate, noEventsLabel: noEventsLabel}\">\n            </template>\n        </div>\n    ","styles":["\n        .text-muted {\n          color: #999;\n        }\n\n        .table-fixed {\n          table-layout: fixed;\n        }\n\n        .table {\n          width: 100%;\n          max-width: 100%;\n          background-color: transparent;\n        }\n\n        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,\n        .table > tbody > tr > td, .table > tfoot > tr > td {\n          padding: 8px;\n          line-height: 20px;\n          vertical-align: top;\n        }\n\n        .table > thead > tr > th {\n          vertical-align: bottom;\n          border-bottom: 2px solid #ddd;\n        }\n\n        .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {\n          border-top: 0\n        }\n\n        .table > tbody + tbody {\n          border-top: 2px solid #ddd;\n        }\n\n        .table-bordered {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,\n        .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {\n          border-bottom-width: 2px;\n        }\n\n        .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {\n          background-color: #f9f9f9\n        }\n\n        .monthview-primary-with-event {\n          background-color: #3a87ad;\n          color: white;\n        }\n\n        .monthview-current {\n          background-color: #f0f0f0;\n        }\n\n        .monthview-selected {\n          background-color: #009900;\n          color: white;\n        }\n\n        .monthview-datetable td.monthview-disabled {\n            color: lightgrey;\n            cursor: default;\n        }\n\n        .monthview-datetable th {\n          text-align: center;\n        }\n\n        .monthview-datetable td {\n          cursor: pointer;\n          text-align: center;\n        }\n\n        .monthview-secondary-with-event {\n          background-color: #d9edf7;\n        }\n\n        ::-webkit-scrollbar,\n        *::-webkit-scrollbar {\n          display: none;\n        }\n    "]}]}],"members":{"slider":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["monthSlider"]}]}],"monthviewDisplayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"monthviewEventDetailTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatDay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatDayHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatMonthTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"eventSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"startingDayMonth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showEventDetail":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"noEventsLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"markDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onRangeChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onEventSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onTimeSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onTitleChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./calendar.service","name":"CalendarService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onSlideChanged":[{"__symbolic":"method"}],"move":[{"__symbolic":"method"}],"createDateObject":[{"__symbolic":"method"}],"getViewData":[{"__symbolic":"method"}],"getHighlightClass":[{"__symbolic":"method"}],"getRange":[{"__symbolic":"method"}],"onDataLoaded":[{"__symbolic":"method"}],"refreshView":[{"__symbolic":"method"}],"getTitle":[{"__symbolic":"method"}],"compareEvent":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"slideView":[{"__symbolic":"method"}],"updateCurrentView":[{"__symbolic":"method"}],"eventSelected":[{"__symbolic":"method"}]}}}}

package.json

 {
     "name": "ionic2-calendar",
-    "version": "0.0.18",
+    "version": "0.1.0",
     "description": "Ionic2 calendar component",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -186,2 +186,67 @@ # Ionic2-Calendar directive
 
+
+# View Customization Option
+Note: For any css class appear in the customized template, you need to specify the styles by yourself. The styles defined in the calendar component won’t be applied because of the view encapsulation.    
+
+* monthviewDisplayEventTemplate
+Type: TemplateRef<IMonthViewDisplayEventTemplateContext>    
+The template provides customized view for event displayed in the monthview
+
+        <template #template let-view="view" let-row="row" let-col="col">
+            {{view.dates[row*7+col].label}}
+        </template>
+
+        <calendar ... [monthviewDisplayEventTemplate]=“template”></calendar>
+
+* monthviewEventDetailTemplate
+Type: TemplateRef<IMonthViewEventDetailTemplateContext>    
+The template provides customized view for event detail section in the monthview
+
+        <template #template let-showEventDetail="showEventDetail" let-selectedDate="selectedDate" let-noEventsLabel="noEventsLabel">
+	    ... 
+        </template>
+
+        <calendar ... [monthviewEventDetailTemplate]=“template”></calendar>
+
+* weekviewAllDayEventTemplate
+Type: TemplateRef<IDisplayAllDayEvent>    
+The template provides customized view for all day event in the weekview
+
+        <template #template let-displayEvent="displayEvent">
+            <div class="calendar-event-inner">{{displayEvent.event.title}}</div>
+        </template>
+
+        <calendar ... [weekviewAllDayEventTemplate]=“template”></calendar>
+
+* weekviewNormalEventTemplate
+Type: TemplateRef<IDisplayEvent>    
+The template provides customized view for normal event in the weekview
+
+        <template #template let-displayEvent="displayEvent">
+            <div class="calendar-event-inner">{{displayEvent.event.title}}</div>
+        </template>
+
+        <calendar ... [weekviewNormalEventTemplate]=“template”></calendar>
+
+* dayviewAllDayEventTemplate
+Type: TemplateRef<IDisplayAllDayEvent>    
+The template provides customized view for all day event in the dayview
+
+        <template #template let-displayEvent="displayEvent">
+            <div class="calendar-event-inner">{{displayEvent.event.title}}</div>
+        </template>
+
+        <calendar ... [dayviewAllDayEventTemplate]=“template”></calendar>
+
+* dayviewNormalEventTemplate
+Type: TemplateRef<IDisplayEvent>    
+The template provides customized view for normal event in the dayview
+
+        <template #template let-displayEvent="displayEvent">
+            <div class="calendar-event-inner">{{displayEvent.event.title}}</div>
+        </template>
+
+        <calendar ... [dayviewNormalEventTemplate]=“template”></calendar>
+
+
 # EventSource
@@ -188,0 +253,0 @@

weekview.d.ts

 import { Slides } from 'ionic-angular';
-import { OnInit, OnChanges, EventEmitter, SimpleChanges } from '@angular/core';
+import { OnInit, OnChanges, EventEmitter, SimpleChanges, TemplateRef } from '@angular/core';
 import { ICalendarComponent, IDisplayEvent, IEvent, ITimeSelected, IRange, IWeekView, IWeekViewRow, IWeekViewDateRow, CalendarMode } from './calendar';
 import { CalendarService } from './calendar.service';
+import { IDisplayAllDayEvent } from "./calendar";
 export declare class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges {
@@ -9,2 +10,4 @@ private calendarService;
     class: boolean;
+    weekviewAllDayEventTemplate: TemplateRef<IDisplayAllDayEvent>;
+    weekviewNormalEventTemplate: TemplateRef<IDisplayEvent>;
     formatWeekTitle: string;
@@ -11,0 +14,0 @@ formatWeekViewDayHeader: string;

weekview.js

@@ -397,4 +397,4 @@ import { DatePipe } from '@angular/common';
                     selector: 'weekview',
-                    template: "\n            <ion-slides #weekSlider [options]=\"slideOption\" (ionDidChange)=\"onSlideChanged()\">\n                <ion-slide *ngFor=\"let view of views; let viewIndex=index\">\n                    <table class=\"table table-bordered table-fixed weekview-header\">\n                        <thead>\n                        <tr>\n                            <th class=\"calendar-hour-column\"></th>\n                            <th class=\"weekview-header text-center\" *ngFor=\"let dt of view.dates\">{{dt.date|date:\n                                formatWeekViewDayHeader}}\n                            </th>\n                        </tr>\n                        </thead>\n                    </table>\n                    <div *ngIf=\"viewIndex===currentViewIndex\">\n                        <div class=\"weekview-allday-table\">\n                            <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                            <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                                <table class=\"table table-fixed weekview-allday-content-table\">\n                                    <tbody>\n                                    <tr>\n                                        <td *ngFor=\"let day of view.dates\" class=\"calendar-cell\">\n                                            <div [ngClass]=\"{'calendar-event-wrap': day.events}\" *ngIf=\"day.events\"\n                                                 [ngStyle]=\"{height: 25*day.events.length+'px'}\">\n                                                <div *ngFor=\"let displayEvent of day.events\" class=\"calendar-event\"\n                                                     (click)=\"eventSelected(displayEvent.event)\"\n                                                     [ngStyle]=\"{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}\">\n                                                    <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n                                                </div>\n                                            </div>\n                                        </td>\n                                    </tr>\n                                    </tbody>\n                                </table>\n                            </ion-scroll>\n                        </div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                            <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                                <tbody>\n                                <tr *ngFor=\"let row of view.rows\">\n                                    <td class=\"calendar-hour-column text-center\">\n                                        {{row[0].time | date: formatHourColumn}}\n                                    </td>\n                                    <td *ngFor=\"let tm of row\" class=\"calendar-cell\" (click)=\"select(tm.time, tm.events)\">\n                                        <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                            <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\"\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                                                <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n                                            </div>\n                                        </div>\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <div *ngIf=\"viewIndex!==currentViewIndex\">\n                        <div class=\"weekview-allday-table\">\n                            <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                            <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                                <table class=\"table table-fixed weekview-allday-content-table\">\n                                    <tbody>\n                                    <tr>\n                                        <td *ngFor=\"let day of views[1].dates\" class=\"calendar-cell\">\n                                        </td>\n                                    </tr>\n                                    </tbody>\n                                </table>\n                            </ion-scroll>\n                        </div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                            <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                                <tbody>\n                                <tr *ngFor=\"let row of views[1].rows\">\n                                    <td class=\"calendar-hour-column text-center\">\n                                        {{row[0].time | date: formatHourColumn}}\n                                    </td>\n                                    <td *ngFor=\"let tm of row\" class=\"calendar-cell\">\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                </ion-slide>\n            </ion-slides>\n    ",
-                    styles: ["\n        .table-fixed {\n          table-layout: fixed;\n        }\n\n        .table {\n          width: 100%;\n          max-width: 100%;\n          background-color: transparent;\n        }\n\n        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,\n        .table > tbody > tr > td, .table > tfoot > tr > td {\n          padding: 8px;\n          line-height: 20px;\n          vertical-align: top;\n        }\n\n        .table > thead > tr > th {\n          vertical-align: bottom;\n          border-bottom: 2px solid #ddd;\n        }\n\n        .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {\n          border-top: 0\n        }\n\n        .table > tbody + tbody {\n          border-top: 2px solid #ddd;\n        }\n\n        .table-bordered {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,\n        .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {\n          border-bottom-width: 2px;\n        }\n\n        .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {\n          background-color: #f9f9f9\n        }\n\n        .calendar-hour-column {\n          width: 50px;\n          white-space: nowrap;\n        }\n\n        .calendar-event-wrap {\n          position: relative;\n          width: 100%;\n          height: 100%;\n        }\n\n        .calendar-event {\n          position: absolute;\n          padding: 2px;\n          cursor: pointer;\n          z-index: 10000;\n        }\n\n        .calendar-event-inner {\n          overflow: hidden;\n          background-color: #3a87ad;\n          color: white;\n          height: 100%;\n          width: 100%;\n          padding: 2px;\n          line-height: 15px;\n        }\n\n        .calendar-cell {\n          padding: 0 !important;\n          height: 37px;\n        }\n\n        .weekview-allday-label {\n          float: left;\n          height: 100%;\n          line-height: 50px;\n          text-align: center;\n          width: 50px;\n        }\n\n        .weekview-allday-content-wrapper {\n          margin-left: 50px;\n          overflow: hidden;\n          height: 51px;\n        }\n\n        .weekview-allday-content-table {\n          min-height: 50px;\n        }\n\n        .weekview-allday-content-table td {\n          border-left: 1px solid #ddd;\n          border-right: 1px solid #ddd;\n        }\n\n        .weekview {\n          height: 100%;\n        }\n\n        .weekview-header th {\n          overflow: hidden;\n          white-space: nowrap;\n          font-size: 14px;\n        }\n\n        .weekview-allday-table {\n          height: 50px;\n          position: relative;\n          border-bottom: 1px solid #ddd;\n          font-size: 14px;\n        }\n\n        .weekview-normal-event-container {\n          margin-top: 87px;\n          overflow: hidden;\n          left: 0;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          position: absolute;\n          font-size: 14px;\n        }\n\n        .weekview .slide-zoom {\n          height: 100%;\n        }\n\n        .weekview-allday-content-wrapper scroll-content {\n          width: 100%;\n        }\n\n        ::-webkit-scrollbar,\n        *::-webkit-scrollbar {\n          display: none;\n        }\n\n        .table > tbody > tr > td.calendar-hour-column {\n          padding-left: 0;\n          padding-right: 0;\n          vertical-align: middle;\n        }\n\n        @media (max-width: 750px) {\n          .weekview-allday-label, .calendar-hour-column {\n            width: 31px;\n            font-size: 12px;\n          }\n\n          .weekview-allday-label {\n            padding-top: 4px;\n          }\n\n          .table > tbody > tr > td.calendar-hour-column {\n            padding-left: 0;\n            padding-right: 0;\n            vertical-align: middle;\n            line-height: 12px;\n          }\n\n          .table > thead > tr > th.weekview-header {\n            padding-left: 0;\n            padding-right: 0;\n            font-size: 12px;\n          }\n\n          .weekview-allday-label {\n            line-height: 20px;\n          }\n\n          .weekview-allday-content-wrapper {\n            margin-left: 31px;\n          }\n\n          .calendar-event-inner {\n            font-size: 12px;\n          }\n        }\n    "],
+                    template: "\n        <ion-slides #weekSlider [options]=\"slideOption\" (ionDidChange)=\"onSlideChanged()\">\n            <ion-slide *ngFor=\"let view of views; let viewIndex=index\">\n                <table class=\"table table-bordered table-fixed weekview-header\">\n                    <thead>\n                    <tr>\n                        <th class=\"calendar-hour-column\"></th>\n                        <th class=\"weekview-header text-center\" *ngFor=\"let dt of view.dates\">{{dt.date|date:\n                            formatWeekViewDayHeader}}\n                        </th>\n                    </tr>\n                    </thead>\n                </table>\n                <div *ngIf=\"viewIndex===currentViewIndex\">\n                    <div class=\"weekview-allday-table\">\n                        <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                            <table class=\"table table-fixed weekview-allday-content-table\">\n                                <tbody>\n                                <tr>\n                                    <td *ngFor=\"let day of view.dates\" class=\"calendar-cell\">\n                                        <div [ngClass]=\"{'calendar-event-wrap': day.events}\" *ngIf=\"day.events\"\n                                             [ngStyle]=\"{height: 25*day.events.length+'px'}\">\n                                            <div *ngFor=\"let displayEvent of day.events\" class=\"calendar-event\"\n                                                 (click)=\"eventSelected(displayEvent.event)\"\n                                                 [ngStyle]=\"{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}\">\n                                                <template [ngTemplateOutlet]=\"weekviewAllDayEventTemplate\"\n                                                    [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                                </template>\n                                            </div>\n                                        </div>\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                        <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                            <tbody>\n                            <tr *ngFor=\"let row of view.rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{row[0].time | date: formatHourColumn}}\n                                </td>\n                                <td *ngFor=\"let tm of row\" class=\"calendar-cell\" (click)=\"select(tm.time, tm.events)\">\n                                    <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n                                        <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\"\n                                             (click)=\"eventSelected(displayEvent.event)\"\n                                             [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n                                             <template [ngTemplateOutlet]=\"weekviewNormalEventTemplate\"\n                                                 [ngOutletContext]=\"{displayEvent:displayEvent}\">\n                                             </template>\n                                        </div>\n                                    </div>\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n                <div *ngIf=\"viewIndex!==currentViewIndex\">\n                    <div class=\"weekview-allday-table\">\n                        <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n                        <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n                            <table class=\"table table-fixed weekview-allday-content-table\">\n                                <tbody>\n                                <tr>\n                                    <td *ngFor=\"let day of views[1].dates\" class=\"calendar-cell\">\n                                    </td>\n                                </tr>\n                                </tbody>\n                            </table>\n                        </ion-scroll>\n                    </div>\n                    <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n                        <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n                            <tbody>\n                            <tr *ngFor=\"let row of views[1].rows\">\n                                <td class=\"calendar-hour-column text-center\">\n                                    {{row[0].time | date: formatHourColumn}}\n                                </td>\n                                <td *ngFor=\"let tm of row\" class=\"calendar-cell\">\n                                </td>\n                            </tr>\n                            </tbody>\n                        </table>\n                    </ion-scroll>\n                </div>\n            </ion-slide>\n        </ion-slides>\n    ",
+                    styles: ["\n        .table-fixed {\n          table-layout: fixed;\n        }\n\n        .table {\n          width: 100%;\n          max-width: 100%;\n          background-color: transparent;\n        }\n\n        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,\n        .table > tbody > tr > td, .table > tfoot > tr > td {\n          padding: 8px;\n          line-height: 20px;\n          vertical-align: top;\n        }\n\n        .table > thead > tr > th {\n          vertical-align: bottom;\n          border-bottom: 2px solid #ddd;\n        }\n\n        .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {\n          border-top: 0\n        }\n\n        .table > tbody + tbody {\n          border-top: 2px solid #ddd;\n        }\n\n        .table-bordered {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,\n        .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {\n          border: 1px solid #ddd;\n        }\n\n        .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {\n          border-bottom-width: 2px;\n        }\n\n        .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {\n          background-color: #f9f9f9\n        }\n\n        .calendar-hour-column {\n          width: 50px;\n          white-space: nowrap;\n        }\n\n        .calendar-event-wrap {\n          position: relative;\n          width: 100%;\n          height: 100%;\n        }\n\n        .calendar-event {\n          position: absolute;\n          padding: 2px;\n          cursor: pointer;\n          z-index: 10000;\n        }\n\n        .calendar-cell {\n          padding: 0 !important;\n          height: 37px;\n        }\n\n        .weekview-allday-label {\n          float: left;\n          height: 100%;\n          line-height: 50px;\n          text-align: center;\n          width: 50px;\n        }\n\n        .weekview-allday-content-wrapper {\n          margin-left: 50px;\n          overflow: hidden;\n          height: 51px;\n        }\n\n        .weekview-allday-content-table {\n          min-height: 50px;\n        }\n\n        .weekview-allday-content-table td {\n          border-left: 1px solid #ddd;\n          border-right: 1px solid #ddd;\n        }\n\n        .weekview-header th {\n          overflow: hidden;\n          white-space: nowrap;\n          font-size: 14px;\n        }\n\n        .weekview-allday-table {\n          height: 50px;\n          position: relative;\n          border-bottom: 1px solid #ddd;\n          font-size: 14px;\n        }\n\n        .weekview-normal-event-container {\n          margin-top: 87px;\n          overflow: hidden;\n          left: 0;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          position: absolute;\n          font-size: 14px;\n        }\n\n        .weekview .slide-zoom {\n          height: 100%;\n        }\n\n        .weekview-allday-content-wrapper scroll-content {\n          width: 100%;\n        }\n\n        ::-webkit-scrollbar,\n        *::-webkit-scrollbar {\n          display: none;\n        }\n\n        .table > tbody > tr > td.calendar-hour-column {\n          padding-left: 0;\n          padding-right: 0;\n          vertical-align: middle;\n        }\n\n        @media (max-width: 750px) {\n          .weekview-allday-label, .calendar-hour-column {\n            width: 31px;\n            font-size: 12px;\n          }\n\n          .weekview-allday-label {\n            padding-top: 4px;\n          }\n\n          .table > tbody > tr > td.calendar-hour-column {\n            padding-left: 0;\n            padding-right: 0;\n            vertical-align: middle;\n            line-height: 12px;\n          }\n\n          .table > thead > tr > th.weekview-header {\n            padding-left: 0;\n            padding-right: 0;\n            font-size: 12px;\n          }\n\n          .weekview-allday-label {\n            line-height: 20px;\n          }\n\n          .weekview-allday-content-wrapper {\n            margin-left: 31px;\n          }\n        }\n    "],
                     encapsulation: ViewEncapsulation.None
@@ -409,2 +409,4 @@ },] },
         'class': [{ type: HostBinding, args: ['class.weekview',] },],
+        'weekviewAllDayEventTemplate': [{ type: Input },],
+        'weekviewNormalEventTemplate': [{ type: Input },],
         'formatWeekTitle': [{ type: Input },],
@@ -411,0 +413,0 @@ 'formatWeekViewDayHeader': [{ type: Input },],

weekview.metadata.json

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

New alerts

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

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Long strings

Supply chain risk

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

620343

increased by6.73%

Lines of code

7615

increased by7.69%

Number of lines in readme file

275

increased by30.95%

No dependency changes