Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

ionic2-calendar

Package Overview
Dependencies
Maintainers
1
Versions
95
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ionic2-calendar - npm Package Compare versions

Comparing version 0.2.5 to 0.2.6

27

calendar.d.ts

@@ -94,2 +94,28 @@ import { EventEmitter, OnInit, TemplateRef } from '@angular/core';

}
export interface IDateFormatter {
formatMonthViewDay?: {
(date: Date): string;
};
formatMonthViewDayHeader?: {
(date: Date): string;
};
formatMonthViewTitle?: {
(date: Date): string;
};
formatWeekViewDayHeader?: {
(date: Date): string;
};
formatWeekViewTitle?: {
(date: Date): string;
};
formatWeekViewHourColumn?: {
(date: Date): string;
};
formatDayViewTitle?: {
(date: Date): string;
};
formatDayViewHourColumn?: {
(date: Date): string;
};
}
export declare type CalendarMode = 'day' | 'month' | 'week';

@@ -131,2 +157,3 @@ export declare type QueryMode = 'local' | 'remote';

dayviewNormalEventTemplate: TemplateRef<IDisplayEvent>;
dateFormatter: IDateFormatter;
onCurrentDateChanged: EventEmitter<Date>;

@@ -133,0 +160,0 @@ onRangeChanged: EventEmitter<IRange>;

3

calendar.js

@@ -90,3 +90,3 @@ import { Component, EventEmitter, Input, Output, Inject, LOCALE_ID } from '@angular/core';

selector: 'calendar',
template: "\n <template #monthviewDefaultDisplayEventTemplate let-view=\"view\" let-row=\"row\" let-col=\"col\">\n {{view.dates[row*7+col].label}}\n </template>\n <template #monthviewDefaultEventDetailTemplate let-showEventDetail=\"showEventDetail\" let-selectedDate=\"selectedDate\" let-noEventsLabel=\"noEventsLabel\">\n <ion-list class=\"event-detail-container\" has-bouncing=\"false\" *ngIf=\"showEventDetail\" overflow-scroll=\"false\">\n <ion-item *ngFor=\"let event of selectedDate?.events\" (click)=\"eventSelected(event)\">\n <span *ngIf=\"!event.allDay\" class=\"monthview-eventdetail-timecolumn\">{{event.startTime|date: 'HH:mm'}}\n -\n {{event.endTime|date: 'HH:mm'}}\n </span>\n <span *ngIf=\"event.allDay\" class=\"monthview-eventdetail-timecolumn\">{{allDayLabel}}</span>\n <span class=\"event-detail\"> | {{event.title}}</span>\n </ion-item>\n <ion-item *ngIf=\"selectedDate?.events.length==0\">\n <div class=\"no-events-label\">{{noEventsLabel}}</div>\n </ion-item>\n </ion-list>\n </template>\n <template #defaultAllDayEventTemplate let-displayEvent=\"displayEvent\">\n <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n </template>\n <template #defaultNormalEventTemplate let-displayEvent=\"displayEvent\">\n <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n </template>\n\n <div [ngSwitch]=\"calendarMode\" class=\"{{calendarMode}}view-container\">\n <monthview *ngSwitchCase=\"'month'\"\n [formatDay]=\"formatDay\"\n [formatDayHeader]=\"formatDayHeader\"\n [formatMonthTitle]=\"formatMonthTitle\"\n [startingDayMonth]=\"startingDayMonth\"\n [showEventDetail]=\"showEventDetail\"\n [noEventsLabel]=\"noEventsLabel\"\n [autoSelect]=\"autoSelect\"\n [eventSource]=\"eventSource\"\n [markDisabled]=\"markDisabled\"\n [monthviewDisplayEventTemplate]=\"monthviewDisplayEventTemplate||monthviewDefaultDisplayEventTemplate\"\n [monthviewInactiveDisplayEventTemplate]=\"monthviewInactiveDisplayEventTemplate||monthviewDefaultDisplayEventTemplate\"\n [monthviewEventDetailTemplate]=\"monthviewEventDetailTemplate||monthviewDefaultEventDetailTemplate\"\n [locale]=\"locale\"\n (onRangeChanged)=\"rangeChanged($event)\"\n (onEventSelected)=\"eventSelected($event)\"\n (onTimeSelected)=\"timeSelected($event)\"\n (onTitleChanged)=\"titleChanged($event)\">\n </monthview>\n <weekview *ngSwitchCase=\"'week'\"\n [formatWeekTitle]=\"formatWeekTitle\"\n [formatWeekViewDayHeader]=\"formatWeekViewDayHeader\"\n [formatHourColumn]=\"formatHourColumn\"\n [startingDayWeek]=\"startingDayWeek\"\n [allDayLabel]=\"allDayLabel\"\n [hourParts]=\"hourParts\"\n [eventSource]=\"eventSource\"\n [markDisabled]=\"markDisabled\"\n [weekviewAllDayEventTemplate]=\"weekviewAllDayEventTemplate||defaultAllDayEventTemplate\"\n [weekviewNormalEventTemplate]=\"weekviewNormalEventTemplate||defaultNormalEventTemplate\"\n [locale]=\"locale\"\n (onRangeChanged)=\"rangeChanged($event)\"\n (onEventSelected)=\"eventSelected($event)\"\n (onTimeSelected)=\"timeSelected($event)\"\n (onTitleChanged)=\"titleChanged($event)\">\n </weekview>\n <dayview *ngSwitchCase=\"'day'\"\n [formatDayTitle]=\"formatDayTitle\"\n [formatHourColumn]=\"formatHourColumn\"\n [allDayLabel]=\"allDayLabel\"\n [hourParts]=\"hourParts\"\n [eventSource]=\"eventSource\"\n [markDisabled]=\"markDisabled\"\n [dayviewAllDayEventTemplate]=\"dayviewAllDayEventTemplate||defaultAllDayEventTemplate\"\n [dayviewNormalEventTemplate]=\"dayviewNormalEventTemplate||defaultNormalEventTemplate\"\n [locale]=\"locale\"\n (onRangeChanged)=\"rangeChanged($event)\"\n (onEventSelected)=\"eventSelected($event)\"\n (onTimeSelected)=\"timeSelected($event)\"\n (onTitleChanged)=\"titleChanged($event)\">\n </dayview>\n </div>\n ",
template: "\n <template #monthviewDefaultDisplayEventTemplate let-view=\"view\" let-row=\"row\" let-col=\"col\">\n {{view.dates[row*7+col].label}}\n </template>\n <template #monthviewDefaultEventDetailTemplate let-showEventDetail=\"showEventDetail\" let-selectedDate=\"selectedDate\" let-noEventsLabel=\"noEventsLabel\">\n <ion-list class=\"event-detail-container\" has-bouncing=\"false\" *ngIf=\"showEventDetail\" overflow-scroll=\"false\">\n <ion-item *ngFor=\"let event of selectedDate?.events\" (click)=\"eventSelected(event)\">\n <span *ngIf=\"!event.allDay\" class=\"monthview-eventdetail-timecolumn\">{{event.startTime|date: 'HH:mm'}}\n -\n {{event.endTime|date: 'HH:mm'}}\n </span>\n <span *ngIf=\"event.allDay\" class=\"monthview-eventdetail-timecolumn\">{{allDayLabel}}</span>\n <span class=\"event-detail\"> | {{event.title}}</span>\n </ion-item>\n <ion-item *ngIf=\"selectedDate?.events.length==0\">\n <div class=\"no-events-label\">{{noEventsLabel}}</div>\n </ion-item>\n </ion-list>\n </template>\n <template #defaultAllDayEventTemplate let-displayEvent=\"displayEvent\">\n <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n </template>\n <template #defaultNormalEventTemplate let-displayEvent=\"displayEvent\">\n <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n </template>\n\n <div [ngSwitch]=\"calendarMode\" class=\"{{calendarMode}}view-container\">\n <monthview *ngSwitchCase=\"'month'\"\n [formatDay]=\"formatDay\"\n [formatDayHeader]=\"formatDayHeader\"\n [formatMonthTitle]=\"formatMonthTitle\"\n [startingDayMonth]=\"startingDayMonth\"\n [showEventDetail]=\"showEventDetail\"\n [noEventsLabel]=\"noEventsLabel\"\n [autoSelect]=\"autoSelect\"\n [eventSource]=\"eventSource\"\n [markDisabled]=\"markDisabled\"\n [monthviewDisplayEventTemplate]=\"monthviewDisplayEventTemplate||monthviewDefaultDisplayEventTemplate\"\n [monthviewInactiveDisplayEventTemplate]=\"monthviewInactiveDisplayEventTemplate||monthviewDefaultDisplayEventTemplate\"\n [monthviewEventDetailTemplate]=\"monthviewEventDetailTemplate||monthviewDefaultEventDetailTemplate\"\n [locale]=\"locale\"\n [dateFormatter]=\"dateFormatter\"\n (onRangeChanged)=\"rangeChanged($event)\"\n (onEventSelected)=\"eventSelected($event)\"\n (onTimeSelected)=\"timeSelected($event)\"\n (onTitleChanged)=\"titleChanged($event)\">\n </monthview>\n <weekview *ngSwitchCase=\"'week'\"\n [formatWeekTitle]=\"formatWeekTitle\"\n [formatWeekViewDayHeader]=\"formatWeekViewDayHeader\"\n [formatHourColumn]=\"formatHourColumn\"\n [startingDayWeek]=\"startingDayWeek\"\n [allDayLabel]=\"allDayLabel\"\n [hourParts]=\"hourParts\"\n [eventSource]=\"eventSource\"\n [markDisabled]=\"markDisabled\"\n [weekviewAllDayEventTemplate]=\"weekviewAllDayEventTemplate||defaultAllDayEventTemplate\"\n [weekviewNormalEventTemplate]=\"weekviewNormalEventTemplate||defaultNormalEventTemplate\"\n [locale]=\"locale\"\n [dateFormatter]=\"dateFormatter\"\n (onRangeChanged)=\"rangeChanged($event)\"\n (onEventSelected)=\"eventSelected($event)\"\n (onTimeSelected)=\"timeSelected($event)\"\n (onTitleChanged)=\"titleChanged($event)\">\n </weekview>\n <dayview *ngSwitchCase=\"'day'\"\n [formatDayTitle]=\"formatDayTitle\"\n [formatHourColumn]=\"formatHourColumn\"\n [allDayLabel]=\"allDayLabel\"\n [hourParts]=\"hourParts\"\n [eventSource]=\"eventSource\"\n [markDisabled]=\"markDisabled\"\n [dayviewAllDayEventTemplate]=\"dayviewAllDayEventTemplate||defaultAllDayEventTemplate\"\n [dayviewNormalEventTemplate]=\"dayviewNormalEventTemplate||defaultNormalEventTemplate\"\n [locale]=\"locale\"\n [dateFormatter]=\"dateFormatter\"\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 "],

@@ -127,2 +127,3 @@ providers: [CalendarService]

'dayviewNormalEventTemplate': [{ type: Input },],
'dateFormatter': [{ type: Input },],
'onCurrentDateChanged': [{ type: Output },],

@@ -129,0 +130,0 @@ 'onRangeChanged': [{ type: Output },],

2

calendar.metadata.json

@@ -1,1 +0,1 @@

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

9

dayview.d.ts
import { Slides } from 'ionic-angular';
import { OnInit, OnChanges, EventEmitter, SimpleChanges, TemplateRef } from '@angular/core';
import { ICalendarComponent, IDayView, IDayViewRow, IDisplayEvent, IEvent, ITimeSelected, IRange, CalendarMode } from './calendar';
import { ICalendarComponent, IDayView, IDayViewRow, IDisplayEvent, IEvent, ITimeSelected, IRange, CalendarMode, IDateFormatter } from './calendar';
import { CalendarService } from './calendar.service';

@@ -19,2 +19,3 @@ import { IDisplayAllDayEvent } from "./calendar";

locale: string;
dateFormatter: IDateFormatter;
onRangeChanged: EventEmitter<IRange>;

@@ -36,4 +37,9 @@ onEventSelected: EventEmitter<IEvent>;

private currentDateChangedFromParentSubscription;
private hourColumnLabels;
private formatTitle;
private formatHourColumnLabel;
constructor(calendarService: CalendarService);
logStart(): void;
ngOnInit(): void;
logEndTime(): void;
ngAfterViewInit(): void;

@@ -45,2 +51,3 @@ ngOnChanges(changes: SimpleChanges): void;

static createDateObjects(startTime: Date): IDayViewRow[];
private getHourColumnLabels();
getViewData(startTime: Date): IDayView;

@@ -47,0 +54,0 @@ getRange(currentDate: Date): IRange;

39

dayview.js

@@ -23,5 +23,28 @@ import { DatePipe } from '@angular/common';

}
DayViewComponent.prototype.logStart = function () {
console.log('start:' + new Date().getTime());
};
DayViewComponent.prototype.ngOnInit = function () {
var _this = this;
this.logStart();
if (this.dateFormatter && this.dateFormatter.formatDayViewTitle) {
this.formatTitle = this.dateFormatter.formatDayViewTitle;
}
else {
var datePipe = new DatePipe(this.locale);
this.formatTitle = function (date) {
return datePipe.transform(date, this.formatDayTitle);
};
}
if (this.dateFormatter && this.dateFormatter.formatDayViewHourColumn) {
this.formatHourColumnLabel = this.dateFormatter.formatDayViewHourColumn;
}
else {
var datePipe = new DatePipe(this.locale);
this.formatHourColumnLabel = function (date) {
return datePipe.transform(date, this.formatHourColumn);
};
}
this.refreshView();
this.hourColumnLabels = this.getHourColumnLabels();
this.inited = true;

@@ -31,3 +54,7 @@ this.currentDateChangedFromParentSubscription = this.calendarService.currentDateChangedFromParent$.subscribe(function (currentDate) {

});
this.logEndTime();
};
DayViewComponent.prototype.logEndTime = function () {
console.log('end:' + new Date().getTime());
};
DayViewComponent.prototype.ngAfterViewInit = function () {

@@ -97,2 +124,9 @@ var title = this.getTitle();

};
DayViewComponent.prototype.getHourColumnLabels = function () {
var hourColumnLabels = [];
for (var hour = 0, length_1 = this.views[0].rows.length; hour < length_1; hour += 1) {
hourColumnLabels.push(this.formatHourColumnLabel(this.views[0].rows[hour].time));
}
return hourColumnLabels;
};
DayViewComponent.prototype.getViewData = function (startTime) {

@@ -205,3 +239,3 @@ return {

var startingDate = this.range.startTime;
return new DatePipe(this.locale).transform(startingDate, this.formatDayTitle);
return this.formatTitle(startingDate);
};

@@ -322,3 +356,3 @@ DayViewComponent.compareEventByStartOffset = function (eventA, eventB) {

selector: 'dayview',
template: "\n <ion-slides #daySlider [loop]=\"true\" (ionSlideDidChange)=\"onSlideChanged()\">\n <ion-slide>\n <div class=\"dayview-allday-table\">\n <div class=\"dayview-allday-label\">{{allDayLabel}}</div>\n <ion-scroll scrollY=\"true\" zoom=\"false\" class=\"dayview-allday-content-wrapper\">\n <table class=\"table table-bordered dayview-allday-content-table\">\n <tbody>\n <tr>\n <td class=\"calendar-cell\" [ngClass]=\"{'calendar-event-wrap':views[0].allDayEvents.length>0}\"\n [ngStyle]=\"{height: 25*views[0].allDayEvents.length+'px'}\"\n *ngIf=\"0===currentViewIndex\">\n <div *ngFor=\"let displayEvent of views[0].allDayEvents; let eventIndex=index\"\n class=\"calendar-event\" tappable\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: 25*eventIndex+'px',width: '100%',height:'25px'}\">\n <template [ngTemplateOutlet]=\"dayviewAllDayEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </td>\n <td class=\"calendar-cell\" *ngIf=\"0!==currentViewIndex\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <ion-scroll scrollY=\"true\" class=\"dayview-normal-event-container\">\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n *ngIf=\"0===currentViewIndex\">\n <tbody>\n <tr *ngFor=\"let tm of views[0].rows\">\n <td class=\"calendar-hour-column text-center\">\n {{tm.time | date: formatHourColumn}}\n </td>\n <td class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px', left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n <template [ngTemplateOutlet]=\"dayviewNormalEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n *ngIf=\"0!==currentViewIndex\">\n <tbody>\n <tr *ngFor=\"let tm of views[0].rows\">\n <td class=\"calendar-hour-column text-center\">\n {{tm.time | date: formatHourColumn}}\n </td>\n <td class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </ion-slide>\n <ion-slide>\n <div class=\"dayview-allday-table\">\n <div class=\"dayview-allday-label\">{{allDayLabel}}</div>\n <ion-scroll scrollY=\"true\" zoom=\"false\" class=\"dayview-allday-content-wrapper\">\n <table class=\"table table-bordered dayview-allday-content-table\">\n <tbody>\n <tr>\n <td class=\"calendar-cell\" [ngClass]=\"{'calendar-event-wrap':views[1].allDayEvents.length>0}\"\n [ngStyle]=\"{height: 25*views[1].allDayEvents.length+'px'}\"\n *ngIf=\"1===currentViewIndex\">\n <div *ngFor=\"let displayEvent of views[1].allDayEvents; let eventIndex=index\"\n class=\"calendar-event\" tappable\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: 25*eventIndex+'px',width: '100%',height:'25px'}\">\n <template [ngTemplateOutlet]=\"dayviewAllDayEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </td>\n <td class=\"calendar-cell\" *ngIf=\"1!==currentViewIndex\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <ion-scroll scrollY=\"true\" class=\"dayview-normal-event-container\">\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n *ngIf=\"1===currentViewIndex\">\n <tbody>\n <tr *ngFor=\"let tm of views[1].rows\">\n <td class=\"calendar-hour-column text-center\">\n {{tm.time | date: formatHourColumn}}\n </td>\n <td class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px', left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n <template [ngTemplateOutlet]=\"dayviewNormalEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n *ngIf=\"1!==currentViewIndex\">\n <tbody>\n <tr *ngFor=\"let tm of views[1].rows\">\n <td class=\"calendar-hour-column text-center\">\n {{tm.time | date: formatHourColumn}}\n </td>\n <td class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </ion-slide>\n <ion-slide>\n <div class=\"dayview-allday-table\">\n <div class=\"dayview-allday-label\">{{allDayLabel}}</div>\n <ion-scroll scrollY=\"true\" zoom=\"false\" class=\"dayview-allday-content-wrapper\">\n <table class=\"table table-bordered dayview-allday-content-table\">\n <tbody>\n <tr>\n <td class=\"calendar-cell\" [ngClass]=\"{'calendar-event-wrap':views[2].allDayEvents.length>0}\"\n [ngStyle]=\"{height: 25*views[2].allDayEvents.length+'px'}\"\n *ngIf=\"2===currentViewIndex\">\n <div *ngFor=\"let displayEvent of views[2].allDayEvents; let eventIndex=index\"\n class=\"calendar-event\" tappable\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: 25*eventIndex+'px',width: '100%',height:'25px'}\">\n <template [ngTemplateOutlet]=\"dayviewAllDayEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </td>\n <td class=\"calendar-cell\" *ngIf=\"2!==currentViewIndex\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <ion-scroll scrollY=\"true\" class=\"dayview-normal-event-container\">\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n *ngIf=\"2===currentViewIndex\">\n <tbody>\n <tr *ngFor=\"let tm of views[2].rows\">\n <td class=\"calendar-hour-column text-center\">\n {{tm.time | date: formatHourColumn}}\n </td>\n <td class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px', left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n <template [ngTemplateOutlet]=\"dayviewNormalEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n *ngIf=\"2!==currentViewIndex\">\n <tbody>\n <tr *ngFor=\"let tm of views[2].rows\">\n <td class=\"calendar-hour-column text-center\">\n {{tm.time | date: formatHourColumn}}\n </td>\n <td class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </ion-slide>\n </ion-slides>\n ",
template: "\n <ion-slides #daySlider [loop]=\"true\" (ionSlideDidChange)=\"onSlideChanged()\">\n <ion-slide>\n <div class=\"dayview-allday-table\">\n <div class=\"dayview-allday-label\">{{allDayLabel}}</div>\n <ion-scroll scrollY=\"true\" zoom=\"false\" class=\"dayview-allday-content-wrapper\">\n <table class=\"table table-bordered dayview-allday-content-table\">\n <tbody>\n <tr>\n <td class=\"calendar-cell\" [ngClass]=\"{'calendar-event-wrap':views[0].allDayEvents.length>0}\"\n [ngStyle]=\"{height: 25*views[0].allDayEvents.length+'px'}\"\n *ngIf=\"0===currentViewIndex\">\n <div *ngFor=\"let displayEvent of views[0].allDayEvents; let eventIndex=index\"\n class=\"calendar-event\" tappable\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: 25*eventIndex+'px',width: '100%',height:'25px'}\">\n <template [ngTemplateOutlet]=\"dayviewAllDayEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </td>\n <td class=\"calendar-cell\" *ngIf=\"0!==currentViewIndex\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <ion-scroll scrollY=\"true\" class=\"dayview-normal-event-container\">\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n *ngIf=\"0===currentViewIndex\">\n <tbody>\n <tr *ngFor=\"let tm of views[0].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px', left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n <template [ngTemplateOutlet]=\"dayviewNormalEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n *ngIf=\"0!==currentViewIndex\">\n <tbody>\n <tr *ngFor=\"let tm of views[0].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </ion-slide>\n <ion-slide>\n <div class=\"dayview-allday-table\">\n <div class=\"dayview-allday-label\">{{allDayLabel}}</div>\n <ion-scroll scrollY=\"true\" zoom=\"false\" class=\"dayview-allday-content-wrapper\">\n <table class=\"table table-bordered dayview-allday-content-table\">\n <tbody>\n <tr>\n <td class=\"calendar-cell\" [ngClass]=\"{'calendar-event-wrap':views[1].allDayEvents.length>0}\"\n [ngStyle]=\"{height: 25*views[1].allDayEvents.length+'px'}\"\n *ngIf=\"1===currentViewIndex\">\n <div *ngFor=\"let displayEvent of views[1].allDayEvents; let eventIndex=index\"\n class=\"calendar-event\" tappable\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: 25*eventIndex+'px',width: '100%',height:'25px'}\">\n <template [ngTemplateOutlet]=\"dayviewAllDayEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </td>\n <td class=\"calendar-cell\" *ngIf=\"1!==currentViewIndex\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <ion-scroll scrollY=\"true\" class=\"dayview-normal-event-container\">\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n *ngIf=\"1===currentViewIndex\">\n <tbody>\n <tr *ngFor=\"let tm of views[1].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px', left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n <template [ngTemplateOutlet]=\"dayviewNormalEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n *ngIf=\"1!==currentViewIndex\">\n <tbody>\n <tr *ngFor=\"let tm of views[1].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </ion-slide>\n <ion-slide>\n <div class=\"dayview-allday-table\">\n <div class=\"dayview-allday-label\">{{allDayLabel}}</div>\n <ion-scroll scrollY=\"true\" zoom=\"false\" class=\"dayview-allday-content-wrapper\">\n <table class=\"table table-bordered dayview-allday-content-table\">\n <tbody>\n <tr>\n <td class=\"calendar-cell\" [ngClass]=\"{'calendar-event-wrap':views[2].allDayEvents.length>0}\"\n [ngStyle]=\"{height: 25*views[2].allDayEvents.length+'px'}\"\n *ngIf=\"2===currentViewIndex\">\n <div *ngFor=\"let displayEvent of views[2].allDayEvents; let eventIndex=index\"\n class=\"calendar-event\" tappable\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: 25*eventIndex+'px',width: '100%',height:'25px'}\">\n <template [ngTemplateOutlet]=\"dayviewAllDayEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </td>\n <td class=\"calendar-cell\" *ngIf=\"2!==currentViewIndex\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <ion-scroll scrollY=\"true\" class=\"dayview-normal-event-container\">\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n *ngIf=\"2===currentViewIndex\">\n <tbody>\n <tr *ngFor=\"let tm of views[2].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px', left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n <template [ngTemplateOutlet]=\"dayviewNormalEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n *ngIf=\"2!==currentViewIndex\">\n <tbody>\n <tr *ngFor=\"let tm of views[2].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\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 "],

@@ -343,2 +377,3 @@ encapsulation: ViewEncapsulation.None

'locale': [{ type: Input },],
'dateFormatter': [{ type: Input },],
'onRangeChanged': [{ type: Output },],

@@ -345,0 +380,0 @@ 'onEventSelected': [{ type: Output },],

2

dayview.metadata.json

@@ -1,1 +0,1 @@

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

10

monthview.d.ts
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 { ICalendarComponent, IEvent, IMonthView, IMonthViewRow, ITimeSelected, IRange, CalendarMode, IDateFormatter } from './calendar';
import { CalendarService } from './calendar.service';

@@ -22,2 +22,3 @@ import { IMonthViewDisplayEventTemplateContext } from "./calendar";

locale: string;
dateFormatter: IDateFormatter;
onRangeChanged: EventEmitter<IRange>;

@@ -37,4 +38,8 @@ onEventSelected: EventEmitter<IEvent>;

private currentDateChangedFromParentSubscription;
private formatDayLabel;
private formatDayHeaderLabel;
private formatTitle;
constructor(calendarService: CalendarService);
ngOnInit(): void;
logStart(): void;
ngOnDestroy(): void;

@@ -45,3 +50,3 @@ ngOnChanges(changes: SimpleChanges): void;

move(direction: number): void;
createDateObject(date: Date, format: string): IMonthViewRow;
createDateObject(date: Date): IMonthViewRow;
static getDates(startDate: Date, n: number): Date[];

@@ -52,2 +57,3 @@ getViewData(startTime: Date): IMonthView;

onDataLoaded(): void;
logEndTime(): void;
refreshView(): void;

@@ -54,0 +60,0 @@ getTitle(): string;

47

monthview.js

@@ -22,2 +22,30 @@ import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';

var _this = this;
this.logStart();
if (this.dateFormatter && this.dateFormatter.formatMonthViewDay) {
this.formatDayLabel = this.dateFormatter.formatMonthViewDay;
}
else {
var dayLabelDatePipe = new DatePipe('en-US');
this.formatDayLabel = function (date) {
return dayLabelDatePipe.transform(date, this.formatDay);
};
}
if (this.dateFormatter && this.dateFormatter.formatMonthViewDayHeader) {
this.formatDayHeaderLabel = this.dateFormatter.formatMonthViewDayHeader;
}
else {
var datePipe = new DatePipe(this.locale);
this.formatDayHeaderLabel = function (date) {
return datePipe.transform(date, this.formatDayHeader);
};
}
if (this.dateFormatter && this.dateFormatter.formatMonthViewTitle) {
this.formatTitle = this.dateFormatter.formatMonthViewTitle;
}
else {
var datePipe = new DatePipe(this.locale);
this.formatTitle = function (date) {
return datePipe.transform(date, this.formatMonthTitle);
};
}
this.refreshView();

@@ -28,3 +56,7 @@ this.inited = true;

});
this.logEndTime();
};
MonthViewComponent.prototype.logStart = function () {
console.log('start:' + new Date().getTime());
};
MonthViewComponent.prototype.ngOnDestroy = function () {

@@ -84,3 +116,3 @@ if (this.currentDateChangedFromParentSubscription) {

};
MonthViewComponent.prototype.createDateObject = function (date, format) {
MonthViewComponent.prototype.createDateObject = function (date) {
var disabled = false;

@@ -93,3 +125,3 @@ if (this.markDisabled) {

events: [],
label: new DatePipe('en-US').transform(date, format),
label: this.formatDayLabel(date),
secondary: false,

@@ -113,3 +145,3 @@ disabled: disabled

for (var i = 0; i < 42; i++) {
var dateObject = this.createDateObject(dates[i], this.formatDay);
var dateObject = this.createDateObject(dates[i]);
dateObject.secondary = dates[i].getMonth() !== month;

@@ -120,3 +152,3 @@ days[i] = dateObject;

for (var i = 0; i < 7; i++) {
dayHeaders.push(new DatePipe(this.locale).transform(days[i].date, this.formatDayHeader));
dayHeaders.push(this.formatDayHeaderLabel(days[i].date));
}

@@ -268,4 +300,8 @@ return {

}
this.logEndTime();
};
;
MonthViewComponent.prototype.logEndTime = function () {
console.log('end:' + new Date().getTime());
};
MonthViewComponent.prototype.refreshView = function () {

@@ -283,3 +319,3 @@ this.range = this.getRange(this.calendarService.currentDate);

var currentViewStartDate = this.range.startTime, date = currentViewStartDate.getDate(), month = (currentViewStartDate.getMonth() + (date !== 1 ? 1 : 0)) % 12, year = currentViewStartDate.getFullYear() + (date !== 1 && month === 0 ? 1 : 0), headerDate = new Date(year, month, 1);
return new DatePipe(this.locale).transform(headerDate, this.formatMonthTitle);
return this.formatTitle(headerDate);
};

@@ -387,2 +423,3 @@ MonthViewComponent.prototype.compareEvent = function (event1, event2) {

'locale': [{ type: Input },],
'dateFormatter': [{ type: Input },],
'onRangeChanged': [{ type: Output },],

@@ -389,0 +426,0 @@ 'onEventSelected': [{ type: Output },],

2

monthview.metadata.json

@@ -1,1 +0,1 @@

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

2

package.json
{
"name": "ionic2-calendar",
"version": "0.2.5",
"version": "0.2.6",
"description": "Ionic2 calendar component",

@@ -5,0 +5,0 @@ "keywords": [

52

README.md

@@ -14,2 +14,3 @@ # Ionic2-Calendar directive

version 0.2.x depends on Ionic 2.0.0-rc.5 (rc.5 has breaking change on the slide API) and 2.0.0 final version onwards.
version 0.3.x depends on Ionic 3.1.1 version onwards.

@@ -143,2 +144,38 @@

* dateFormatter
The custom date formatter to transform date to text.
If the custom date formatter is not set, the default Angular DatePipe is used.
The format method in dateFormatter is optional, if omitted, the default Angular DatePipe is used.
<calendar ... [dateFormatter]="calendar.dateFormatter"></calendar>
calendar = {
dateFormatter: {
formatMonthViewDay: function(date:Date) {
return date.getDate().toString();
},
formatMonthViewDayHeader: function(date:Date) {
return ‘testMDH’;
},
formatMonthViewTitle: function(date:Date) {
return 'testMT';
},
formatWeekViewDayHeader: function(date:Date) {
return ‘testWDH’;
},
formatWeekViewTitle: function(date:Date) {
return 'testWT’;
},
formatWeekViewHourColumn: function(date:Date) {
return 'testWH’;
},
formatDayViewHourColumn: function(date:Date) {
return 'testDH’;
},
formatDayViewTitle: function(date:Date) {
return 'testDT’;
}
}
};
* onCurrentDateChanged

@@ -302,2 +339,17 @@ The callback function triggered when the date that is currently viewed changes.

# Performance Tuning
In the CPU profile, the default Intl based localization code occupies a big portion of the execution time. If you don’t need localization on certain parts, you can use the custom dateFormatter to override the date transform method. For example, the date in month view usually doesn’t require localization, you could use below code to just display the date part. If the month view day header doesn’t need to include the date, you could also use a string array containing static labels to save the date calculation.
```
<calendar ... [dateFormatter]="calendar.dateFormatter"></calendar>
calendar = {
dateFormatter: {
formatMonthViewDay: function(date:Date) {
return date.getDate().toString();
}
}
};
```
# Known issue

@@ -304,0 +356,0 @@ This component updates the ion-slide dynamically so that only 3 looped slides are needed.

10

weekview.d.ts
import { Slides } from 'ionic-angular';
import { OnInit, OnChanges, EventEmitter, SimpleChanges, TemplateRef } from '@angular/core';
import { ICalendarComponent, IDisplayEvent, IEvent, ITimeSelected, IRange, IWeekView, IWeekViewRow, IWeekViewDateRow, CalendarMode } from './calendar';
import { ICalendarComponent, IDisplayEvent, IEvent, ITimeSelected, IRange, IWeekView, IWeekViewRow, IWeekViewDateRow, CalendarMode, IDateFormatter } from './calendar';
import { CalendarService } from './calendar.service';

@@ -21,2 +21,3 @@ import { IDisplayAllDayEvent } from "./calendar";

locale: string;
dateFormatter: IDateFormatter;
onRangeChanged: EventEmitter<IRange>;

@@ -34,4 +35,10 @@ onEventSelected: EventEmitter<IEvent>;

private currentDateChangedFromParentSubscription;
private hourColumnLabels;
private formatDayHeader;
private formatTitle;
private formatHourColumnLabel;
constructor(calendarService: CalendarService);
logStart(): void;
ngOnInit(): void;
logEndTime(): void;
ngAfterViewInit(): void;

@@ -44,2 +51,3 @@ ngOnChanges(changes: SimpleChanges): void;

static getDates(startTime: Date, n: number): IWeekViewDateRow[];
private getHourColumnLabels();
getViewData(startTime: Date): IWeekView;

@@ -46,0 +54,0 @@ getRange(currentDate: Date): IRange;

50

weekview.js

@@ -19,5 +19,37 @@ import { DatePipe } from '@angular/common';

}
WeekViewComponent.prototype.logStart = function () {
console.log('start:' + new Date().getTime());
};
WeekViewComponent.prototype.ngOnInit = function () {
var _this = this;
this.logStart();
if (this.dateFormatter && this.dateFormatter.formatWeekViewDayHeader) {
this.formatDayHeader = this.dateFormatter.formatWeekViewDayHeader;
}
else {
var datePipe = new DatePipe(this.locale);
this.formatDayHeader = function (date) {
return datePipe.transform(date, this.formatWeekViewDayHeader);
};
}
if (this.dateFormatter && this.dateFormatter.formatWeekViewTitle) {
this.formatTitle = this.dateFormatter.formatWeekViewTitle;
}
else {
var datePipe = new DatePipe(this.locale);
this.formatTitle = function (date) {
return datePipe.transform(date, this.formatWeekTitle);
};
}
if (this.dateFormatter && this.dateFormatter.formatWeekViewHourColumn) {
this.formatHourColumnLabel = this.dateFormatter.formatWeekViewHourColumn;
}
else {
var datePipe = new DatePipe(this.locale);
this.formatHourColumnLabel = function (date) {
return datePipe.transform(date, this.formatHourColumn);
};
}
this.refreshView();
this.hourColumnLabels = this.getHourColumnLabels();
this.inited = true;

@@ -27,3 +59,7 @@ this.currentDateChangedFromParentSubscription = this.calendarService.currentDateChangedFromParent$.subscribe(function (currentDate) {

});
this.logEndTime();
};
WeekViewComponent.prototype.logEndTime = function () {
console.log('end:' + new Date().getTime());
};
WeekViewComponent.prototype.ngAfterViewInit = function () {

@@ -110,2 +146,9 @@ var title = this.getTitle();

};
WeekViewComponent.prototype.getHourColumnLabels = function () {
var hourColumnLabels = [];
for (var hour = 0, length_1 = this.views[0].rows.length; hour < length_1; hour += 1) {
hourColumnLabels.push(this.formatHourColumnLabel(this.views[0].rows[hour][0].time));
}
return hourColumnLabels;
};
WeekViewComponent.prototype.getViewData = function (startTime) {

@@ -115,3 +158,3 @@ var dates = WeekViewComponent.getDates(startTime, 7);

for (var i = 0; i < 7; i++) {
dayHeaders.push(new DatePipe(this.locale).transform(dates[i].date, this.formatWeekViewDayHeader));
dayHeaders.push(this.formatDayHeader(dates[i].date));
}

@@ -285,3 +328,3 @@ return {

WeekViewComponent.prototype.getTitle = function () {
var firstDayOfWeek = this.range.startTime, weekFormat = '$n', weekNumberIndex = this.formatWeekTitle.indexOf(weekFormat), title = new DatePipe(this.locale).transform(firstDayOfWeek, this.formatWeekTitle);
var firstDayOfWeek = this.range.startTime, weekFormat = '$n', weekNumberIndex = this.formatWeekTitle.indexOf(weekFormat), title = this.formatTitle(firstDayOfWeek);
if (weekNumberIndex !== -1) {

@@ -415,3 +458,3 @@ var weekNumber = String(WeekViewComponent.getISO8601WeekNumber(firstDayOfWeek));

selector: 'weekview',
template: "\n <ion-slides #weekSlider [loop]=\"true\" (ionSlideDidChange)=\"onSlideChanged()\">\n <ion-slide>\n <table class=\"table table-bordered table-fixed weekview-header\">\n <thead>\n <tr>\n <th class=\"calendar-hour-column\"></th>\n <th class=\"weekview-header text-center\" *ngFor=\"let dayHeader of views[0].dayHeaders\">{{dayHeader}}\n </th>\n </tr>\n </thead>\n </table>\n <div *ngIf=\"0===currentViewIndex\">\n <div class=\"weekview-allday-table\">\n <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n <table class=\"table table-fixed weekview-allday-content-table\">\n <tbody>\n <tr>\n <td *ngFor=\"let day of views[0].dates\" class=\"calendar-cell\">\n <div [ngClass]=\"{'calendar-event-wrap': day.events}\" *ngIf=\"day.events\"\n [ngStyle]=\"{height: 25*day.events.length+'px'}\">\n <div *ngFor=\"let displayEvent of day.events\" class=\"calendar-event\" tappable\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}\">\n <template [ngTemplateOutlet]=\"weekviewAllDayEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let row of views[0].rows\">\n <td class=\"calendar-hour-column text-center\">\n {{row[0].time | date: formatHourColumn}}\n </td>\n <td *ngFor=\"let tm of row\" class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n <template [ngTemplateOutlet]=\"weekviewNormalEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <div *ngIf=\"0!==currentViewIndex\">\n <div class=\"weekview-allday-table\">\n <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n <table class=\"table table-fixed weekview-allday-content-table\">\n <tbody>\n <tr>\n <td *ngFor=\"let day of views[0].dates\" class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let row of views[0].rows\">\n <td class=\"calendar-hour-column text-center\">\n {{row[0].time | date: formatHourColumn}}\n </td>\n <td *ngFor=\"let tm of row\" class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n </ion-slide>\n <ion-slide>\n <table class=\"table table-bordered table-fixed weekview-header\">\n <thead>\n <tr>\n <th class=\"calendar-hour-column\"></th>\n <th class=\"weekview-header text-center\" *ngFor=\"let dayHeader of views[1].dayHeaders\">{{dayHeader}}\n </th>\n </tr>\n </thead>\n </table>\n <div *ngIf=\"1===currentViewIndex\">\n <div class=\"weekview-allday-table\">\n <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n <table class=\"table table-fixed weekview-allday-content-table\">\n <tbody>\n <tr>\n <td *ngFor=\"let day of views[1].dates\" class=\"calendar-cell\">\n <div [ngClass]=\"{'calendar-event-wrap': day.events}\" *ngIf=\"day.events\"\n [ngStyle]=\"{height: 25*day.events.length+'px'}\">\n <div *ngFor=\"let displayEvent of day.events\" class=\"calendar-event\" tappable\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}\">\n <template [ngTemplateOutlet]=\"weekviewAllDayEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let row of views[1].rows\">\n <td class=\"calendar-hour-column text-center\">\n {{row[0].time | date: formatHourColumn}}\n </td>\n <td *ngFor=\"let tm of row\" class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n <template [ngTemplateOutlet]=\"weekviewNormalEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <div *ngIf=\"1!==currentViewIndex\">\n <div class=\"weekview-allday-table\">\n <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n <table class=\"table table-fixed weekview-allday-content-table\">\n <tbody>\n <tr>\n <td *ngFor=\"let day of views[1].dates\" class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let row of views[1].rows\">\n <td class=\"calendar-hour-column text-center\">\n {{row[0].time | date: formatHourColumn}}\n </td>\n <td *ngFor=\"let tm of row\" class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n </ion-slide>\n <ion-slide>\n <table class=\"table table-bordered table-fixed weekview-header\">\n <thead>\n <tr>\n <th class=\"calendar-hour-column\"></th>\n <th class=\"weekview-header text-center\" *ngFor=\"let dayHeader of views[2].dayHeaders\">{{dayHeader}}\n </th>\n </tr>\n </thead>\n </table>\n <div *ngIf=\"2===currentViewIndex\">\n <div class=\"weekview-allday-table\">\n <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n <table class=\"table table-fixed weekview-allday-content-table\">\n <tbody>\n <tr>\n <td *ngFor=\"let day of views[2].dates\" class=\"calendar-cell\">\n <div [ngClass]=\"{'calendar-event-wrap': day.events}\" *ngIf=\"day.events\"\n [ngStyle]=\"{height: 25*day.events.length+'px'}\">\n <div *ngFor=\"let displayEvent of day.events\" class=\"calendar-event\" tappable\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}\">\n <template [ngTemplateOutlet]=\"weekviewAllDayEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let row of views[2].rows\">\n <td class=\"calendar-hour-column text-center\">\n {{row[0].time | date: formatHourColumn}}\n </td>\n <td *ngFor=\"let tm of row\" class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n <template [ngTemplateOutlet]=\"weekviewNormalEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <div *ngIf=\"2!==currentViewIndex\">\n <div class=\"weekview-allday-table\">\n <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n <table class=\"table table-fixed weekview-allday-content-table\">\n <tbody>\n <tr>\n <td *ngFor=\"let day of views[2].dates\" class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let row of views[2].rows\">\n <td class=\"calendar-hour-column text-center\">\n {{row[0].time | date: formatHourColumn}}\n </td>\n <td *ngFor=\"let tm of row\" class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n </ion-slide>\n </ion-slides>\n ",
template: "\n <ion-slides #weekSlider [loop]=\"true\" (ionSlideDidChange)=\"onSlideChanged()\">\n <ion-slide>\n <table class=\"table table-bordered table-fixed weekview-header\">\n <thead>\n <tr>\n <th class=\"calendar-hour-column\"></th>\n <th class=\"weekview-header text-center\" *ngFor=\"let dayHeader of views[0].dayHeaders\">{{dayHeader}}\n </th>\n </tr>\n </thead>\n </table>\n <div *ngIf=\"0===currentViewIndex\">\n <div class=\"weekview-allday-table\">\n <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n <table class=\"table table-fixed weekview-allday-content-table\">\n <tbody>\n <tr>\n <td *ngFor=\"let day of views[0].dates\" class=\"calendar-cell\">\n <div [ngClass]=\"{'calendar-event-wrap': day.events}\" *ngIf=\"day.events\"\n [ngStyle]=\"{height: 25*day.events.length+'px'}\">\n <div *ngFor=\"let displayEvent of day.events\" class=\"calendar-event\" tappable\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}\">\n <template [ngTemplateOutlet]=\"weekviewAllDayEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let row of views[0].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td *ngFor=\"let tm of row\" class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n <template [ngTemplateOutlet]=\"weekviewNormalEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <div *ngIf=\"0!==currentViewIndex\">\n <div class=\"weekview-allday-table\">\n <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n <table class=\"table table-fixed weekview-allday-content-table\">\n <tbody>\n <tr>\n <td *ngFor=\"let day of views[0].dates\" class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let row of views[0].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td *ngFor=\"let tm of row\" class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n </ion-slide>\n <ion-slide>\n <table class=\"table table-bordered table-fixed weekview-header\">\n <thead>\n <tr>\n <th class=\"calendar-hour-column\"></th>\n <th class=\"weekview-header text-center\" *ngFor=\"let dayHeader of views[1].dayHeaders\">{{dayHeader}}\n </th>\n </tr>\n </thead>\n </table>\n <div *ngIf=\"1===currentViewIndex\">\n <div class=\"weekview-allday-table\">\n <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n <table class=\"table table-fixed weekview-allday-content-table\">\n <tbody>\n <tr>\n <td *ngFor=\"let day of views[1].dates\" class=\"calendar-cell\">\n <div [ngClass]=\"{'calendar-event-wrap': day.events}\" *ngIf=\"day.events\"\n [ngStyle]=\"{height: 25*day.events.length+'px'}\">\n <div *ngFor=\"let displayEvent of day.events\" class=\"calendar-event\" tappable\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}\">\n <template [ngTemplateOutlet]=\"weekviewAllDayEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let row of views[1].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td *ngFor=\"let tm of row\" class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n <template [ngTemplateOutlet]=\"weekviewNormalEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <div *ngIf=\"1!==currentViewIndex\">\n <div class=\"weekview-allday-table\">\n <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n <table class=\"table table-fixed weekview-allday-content-table\">\n <tbody>\n <tr>\n <td *ngFor=\"let day of views[1].dates\" class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let row of views[1].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td *ngFor=\"let tm of row\" class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n </ion-slide>\n <ion-slide>\n <table class=\"table table-bordered table-fixed weekview-header\">\n <thead>\n <tr>\n <th class=\"calendar-hour-column\"></th>\n <th class=\"weekview-header text-center\" *ngFor=\"let dayHeader of views[2].dayHeaders\">{{dayHeader}}\n </th>\n </tr>\n </thead>\n </table>\n <div *ngIf=\"2===currentViewIndex\">\n <div class=\"weekview-allday-table\">\n <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n <table class=\"table table-fixed weekview-allday-content-table\">\n <tbody>\n <tr>\n <td *ngFor=\"let day of views[2].dates\" class=\"calendar-cell\">\n <div [ngClass]=\"{'calendar-event-wrap': day.events}\" *ngIf=\"day.events\"\n [ngStyle]=\"{height: 25*day.events.length+'px'}\">\n <div *ngFor=\"let displayEvent of day.events\" class=\"calendar-event\" tappable\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}\">\n <template [ngTemplateOutlet]=\"weekviewAllDayEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let row of views[2].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td *ngFor=\"let tm of row\" class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n <template [ngTemplateOutlet]=\"weekviewNormalEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <div *ngIf=\"2!==currentViewIndex\">\n <div class=\"weekview-allday-table\">\n <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n <table class=\"table table-fixed weekview-allday-content-table\">\n <tbody>\n <tr>\n <td *ngFor=\"let day of views[2].dates\" class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <ion-scroll scrollY=\"true\" class=\"weekview-normal-event-container\" zoom=\"false\">\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let row of views[2].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\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 "],

@@ -438,2 +481,3 @@ encapsulation: ViewEncapsulation.None

'locale': [{ type: Input },],
'dateFormatter': [{ type: Input },],
'onRangeChanged': [{ type: Output },],

@@ -440,0 +484,0 @@ 'onEventSelected': [{ type: Output },],

2

weekview.metadata.json

@@ -1,1 +0,1 @@

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

Sorry, the diff of this file is not supported yet

calendar.module.js.map

Sorry, the diff of this file is not supported yet

calendar.ngfactory.ts

Sorry, the diff of this file is too big to display

dayview.js.map

Sorry, the diff of this file is not supported yet

dayview.ngfactory.ts

Sorry, the diff of this file is too big to display

monthview.js.map

Sorry, the diff of this file is not supported yet

monthview.ngfactory.ts

Sorry, the diff of this file is too big to display

weekview.js.map

Sorry, the diff of this file is not supported yet

weekview.ngfactory.ts

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc