Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
ionic2-calendar
Advanced tools
ionic2-calendar - npm Package Compare versions
Comparing version 0.2.3 to 0.2.4
@@ -121,2 +121,3 @@ import { EventEmitter, OnInit, TemplateRef } from '@angular/core'; | ||
| step: Step; | ||
| autoSelect: boolean; | ||
| markDisabled: (date: Date) => boolean; | ||
@@ -123,0 +124,0 @@ monthviewDisplayEventTemplate: TemplateRef<IMonthViewDisplayEventTemplateContext>; |
@@ -29,2 +29,3 @@ import { Component, EventEmitter, Input, Output, Inject, LOCALE_ID } from '@angular/core'; | ||
| this.step = Step.Hour; | ||
| this.autoSelect = true; | ||
| this.onCurrentDateChanged = new EventEmitter(); | ||
@@ -54,2 +55,10 @@ this.onRangeChanged = new EventEmitter(); | ||
| var _this = this; | ||
| if (this.autoSelect) { | ||
| if (this.autoSelect.toString() === 'false') { | ||
| this.autoSelect = false; | ||
| } | ||
| else { | ||
| this.autoSelect = true; | ||
| } | ||
| } | ||
| this.hourParts = 60 / this.step; | ||
@@ -83,3 +92,3 @@ this.calendarService.queryMode = this.queryMode; | ||
| selector: 'calendar', | ||
| template: "\n <template #monthviewDefaultDisplayEventTemplate let-view=\"view\" let-row=\"row\" let-col=\"col\">\n {{view.dates[row*7+col].label}}\n </template>\n <template #monthviewDefaultEventDetailTemplate let-showEventDetail=\"showEventDetail\" let-selectedDate=\"selectedDate\" let-noEventsLabel=\"noEventsLabel\">\n <ion-list class=\"event-detail-container\" has-bouncing=\"false\" *ngIf=\"showEventDetail\" overflow-scroll=\"false\">\n <ion-item *ngFor=\"let event of selectedDate?.events\" (click)=\"eventSelected(event)\">\n <span *ngIf=\"!event.allDay\" class=\"monthview-eventdetail-timecolumn\">{{event.startTime|date: 'HH:mm'}}\n -\n {{event.endTime|date: 'HH:mm'}}\n </span>\n <span *ngIf=\"event.allDay\" class=\"monthview-eventdetail-timecolumn\">All day</span>\n <span class=\"event-detail\"> | {{event.title}}</span>\n </ion-item>\n <ion-item *ngIf=\"selectedDate?.events.length==0\">\n <div class=\"no-events-label\">{{noEventsLabel}}</div>\n </ion-item>\n </ion-list>\n </template>\n <template #defaultAllDayEventTemplate let-displayEvent=\"displayEvent\">\n <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n </template>\n <template #defaultNormalEventTemplate let-displayEvent=\"displayEvent\">\n <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n </template>\n\n <div [ngSwitch]=\"calendarMode\" class=\"{{calendarMode}}view-container\">\n <monthview *ngSwitchCase=\"'month'\"\n [formatDay]=\"formatDay\"\n [formatDayHeader]=\"formatDayHeader\"\n [formatMonthTitle]=\"formatMonthTitle\"\n [startingDayMonth]=\"startingDayMonth\"\n [showEventDetail]=\"showEventDetail\"\n [noEventsLabel]=\"noEventsLabel\"\n [eventSource]=\"eventSource\"\n [markDisabled]=\"markDisabled\"\n [monthviewDisplayEventTemplate]=\"monthviewDisplayEventTemplate||monthviewDefaultDisplayEventTemplate\"\n [monthviewEventDetailTemplate]=\"monthviewEventDetailTemplate||monthviewDefaultEventDetailTemplate\"\n [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\">All day</span>\n <span class=\"event-detail\"> | {{event.title}}</span>\n </ion-item>\n <ion-item *ngIf=\"selectedDate?.events.length==0\">\n <div class=\"no-events-label\">{{noEventsLabel}}</div>\n </ion-item>\n </ion-list>\n </template>\n <template #defaultAllDayEventTemplate let-displayEvent=\"displayEvent\">\n <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n </template>\n <template #defaultNormalEventTemplate let-displayEvent=\"displayEvent\">\n <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n </template>\n\n <div [ngSwitch]=\"calendarMode\" class=\"{{calendarMode}}view-container\">\n <monthview *ngSwitchCase=\"'month'\"\n [formatDay]=\"formatDay\"\n [formatDayHeader]=\"formatDayHeader\"\n [formatMonthTitle]=\"formatMonthTitle\"\n [startingDayMonth]=\"startingDayMonth\"\n [showEventDetail]=\"showEventDetail\"\n [noEventsLabel]=\"noEventsLabel\"\n [autoSelect]=\"autoSelect\"\n [eventSource]=\"eventSource\"\n [markDisabled]=\"markDisabled\"\n [monthviewDisplayEventTemplate]=\"monthviewDisplayEventTemplate||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 "], | ||
@@ -111,2 +120,3 @@ providers: [CalendarService] | ||
| 'step': [{ type: Input },], | ||
| 'autoSelect': [{ type: Input },], | ||
| 'markDisabled': [{ type: Input },], | ||
@@ -113,0 +123,0 @@ 'monthviewDisplayEventTemplate': [{ type: Input },], |
@@ -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\">All day</span>\n <span class=\"event-detail\"> | {{event.title}}</span>\n </ion-item>\n <ion-item *ngIf=\"selectedDate?.events.length==0\">\n <div class=\"no-events-label\">{{noEventsLabel}}</div>\n </ion-item>\n </ion-list>\n </template>\n <template #defaultAllDayEventTemplate let-displayEvent=\"displayEvent\">\n <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n </template>\n <template #defaultNormalEventTemplate let-displayEvent=\"displayEvent\">\n <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n </template>\n\n <div [ngSwitch]=\"calendarMode\" class=\"{{calendarMode}}view-container\">\n <monthview *ngSwitchCase=\"'month'\"\n [formatDay]=\"formatDay\"\n [formatDayHeader]=\"formatDayHeader\"\n [formatMonthTitle]=\"formatMonthTitle\"\n [startingDayMonth]=\"startingDayMonth\"\n [showEventDetail]=\"showEventDetail\"\n [noEventsLabel]=\"noEventsLabel\"\n [eventSource]=\"eventSource\"\n [markDisabled]=\"markDisabled\"\n [monthviewDisplayEventTemplate]=\"monthviewDisplayEventTemplate||monthviewDefaultDisplayEventTemplate\"\n [monthviewEventDetailTemplate]=\"monthviewEventDetailTemplate||monthviewDefaultEventDetailTemplate\"\n [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"}}]}],"markDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"monthviewDisplayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"monthviewEventDetailTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekviewAllDayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekviewNormalEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dayviewAllDayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dayviewNormalEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onCurrentDateChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onRangeChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onEventSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onTimeSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onTitleChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","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\">All day</span>\n <span class=\"event-detail\"> | {{event.title}}</span>\n </ion-item>\n <ion-item *ngIf=\"selectedDate?.events.length==0\">\n <div class=\"no-events-label\">{{noEventsLabel}}</div>\n </ion-item>\n </ion-list>\n </template>\n <template #defaultAllDayEventTemplate let-displayEvent=\"displayEvent\">\n <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n </template>\n <template #defaultNormalEventTemplate let-displayEvent=\"displayEvent\">\n <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n </template>\n\n <div [ngSwitch]=\"calendarMode\" class=\"{{calendarMode}}view-container\">\n <monthview *ngSwitchCase=\"'month'\"\n [formatDay]=\"formatDay\"\n [formatDayHeader]=\"formatDayHeader\"\n [formatMonthTitle]=\"formatMonthTitle\"\n [startingDayMonth]=\"startingDayMonth\"\n [showEventDetail]=\"showEventDetail\"\n [noEventsLabel]=\"noEventsLabel\"\n [autoSelect]=\"autoSelect\"\n [eventSource]=\"eventSource\"\n [markDisabled]=\"markDisabled\"\n [monthviewDisplayEventTemplate]=\"monthviewDisplayEventTemplate||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"}}]}],"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"}]}}}} |
@@ -318,3 +318,3 @@ import { DatePipe } from '@angular/common'; | ||
| 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\"\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\" (click)=\"select(tm.time, tm.events)\">\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\"\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px', left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n <template [ngTemplateOutlet]=\"dayviewNormalEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n *ngIf=\"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\"\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\" (click)=\"select(tm.time, tm.events)\">\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\"\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px', left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n <template [ngTemplateOutlet]=\"dayviewNormalEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n *ngIf=\"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\"\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\" (click)=\"select(tm.time, tm.events)\">\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\"\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px', left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n <template [ngTemplateOutlet]=\"dayviewNormalEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n *ngIf=\"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\">\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 "], | ||
@@ -321,0 +321,0 @@ encapsulation: ViewEncapsulation.None |
@@ -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\"\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\" (click)=\"select(tm.time, tm.events)\">\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\"\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px', left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n <template [ngTemplateOutlet]=\"dayviewNormalEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n *ngIf=\"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\"\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\" (click)=\"select(tm.time, tm.events)\">\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\"\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px', left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n <template [ngTemplateOutlet]=\"dayviewNormalEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n *ngIf=\"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\"\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\" (click)=\"select(tm.time, tm.events)\">\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\"\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px', left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n <template [ngTemplateOutlet]=\"dayviewNormalEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\"\n *ngIf=\"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\">\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"}}}}}}} |
@@ -18,2 +18,3 @@ import { OnInit, OnChanges, EventEmitter, SimpleChanges, TemplateRef } from '@angular/core'; | ||
| noEventsLabel: string; | ||
| autoSelect: boolean; | ||
| markDisabled: (date: Date) => boolean; | ||
@@ -20,0 +21,0 @@ locale: string; |
@@ -7,2 +7,3 @@ import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core'; | ||
| this.calendarService = calendarService; | ||
| this.autoSelect = true; | ||
| this.onRangeChanged = new EventEmitter(); | ||
@@ -74,6 +75,3 @@ this.onEventSelected = new EventEmitter(); | ||
| this.direction = direction; | ||
| if (this.moveOnSelected) { | ||
| this.moveOnSelected = false; | ||
| } | ||
| else { | ||
| if (!this.moveOnSelected) { | ||
| var adjacentDate = this.calendarService.getAdjacentCalendarDate(this.mode, direction); | ||
@@ -84,2 +82,3 @@ this.calendarService.setCurrentDate(adjacentDate); | ||
| this.direction = 0; | ||
| this.moveOnSelected = false; | ||
| }; | ||
@@ -249,20 +248,19 @@ MonthViewComponent.prototype.createDateObject = function (date, format) { | ||
| } | ||
| var findSelected = false; | ||
| for (var r = 0; r < 42; r += 1) { | ||
| if (dates[r].selected) { | ||
| this.selectedDate = dates[r]; | ||
| findSelected = true; | ||
| break; | ||
| if (this.autoSelect) { | ||
| var findSelected = false; | ||
| for (var r = 0; r < 42; r += 1) { | ||
| if (dates[r].selected) { | ||
| this.selectedDate = dates[r]; | ||
| findSelected = true; | ||
| break; | ||
| } | ||
| } | ||
| if (findSelected) { | ||
| break; | ||
| this.onTimeSelected.emit({ | ||
| selectedTime: this.selectedDate.date, | ||
| events: this.selectedDate.events, | ||
| disabled: this.selectedDate.disabled | ||
| }); | ||
| } | ||
| } | ||
| if (findSelected) { | ||
| this.onTimeSelected.emit({ | ||
| selectedTime: this.selectedDate.date, | ||
| events: this.selectedDate.events, | ||
| disabled: this.selectedDate.disabled | ||
| }); | ||
| } | ||
| }; | ||
@@ -340,3 +338,3 @@ ; | ||
| } | ||
| if (selectedDayDifference >= 0 && selectedDayDifference < 42 && !view.dates[selectedDayDifference].disabled) { | ||
| if (selectedDayDifference >= 0 && selectedDayDifference < 42 && !view.dates[selectedDayDifference].disabled && (this.autoSelect || this.moveOnSelected)) { | ||
| view.dates[selectedDayDifference].selected = true; | ||
@@ -364,3 +362,3 @@ this.selectedDate = view.dates[selectedDayDifference]; | ||
| 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]\" (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 {{views[0].dates[row*7+col].label}}\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]\" (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 {{views[1].dates[row*7+col].label}}\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]\" (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 {{views[2].dates[row*7+col].label}}\n </td>\n <tr>\n </tbody>\n </table>\n </ion-slide>\n </ion-slides>\n <template [ngTemplateOutlet]=\"monthviewEventDetailTemplate\"\n [ngOutletContext]=\"{showEventDetail:showEventDetail, selectedDate: selectedDate, noEventsLabel: noEventsLabel}\">\n </template>\n </div>\n ", | ||
| 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 {{views[0].dates[row*7+col].label}}\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 {{views[1].dates[row*7+col].label}}\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 {{views[2].dates[row*7+col].label}}\n </td>\n <tr>\n </tbody>\n </table>\n </ion-slide>\n </ion-slides>\n <template [ngTemplateOutlet]=\"monthviewEventDetailTemplate\"\n [ngOutletContext]=\"{showEventDetail:showEventDetail, selectedDate: selectedDate, noEventsLabel: noEventsLabel}\">\n </template>\n </div>\n ", | ||
| styles: ["\n .text-muted {\n color: #999;\n }\n\n .table-fixed {\n table-layout: fixed;\n }\n\n .table {\n width: 100%;\n max-width: 100%;\n background-color: transparent;\n }\n\n .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,\n .table > tbody > tr > td, .table > tfoot > tr > td {\n padding: 8px;\n line-height: 20px;\n vertical-align: top;\n }\n\n .table > thead > tr > th {\n vertical-align: bottom;\n border-bottom: 2px solid #ddd;\n }\n\n .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {\n border-top: 0\n }\n\n .table > tbody + tbody {\n border-top: 2px solid #ddd;\n }\n\n .table-bordered {\n border: 1px solid #ddd;\n }\n\n .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,\n .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {\n border: 1px solid #ddd;\n }\n\n .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {\n border-bottom-width: 2px;\n }\n\n .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {\n background-color: #f9f9f9\n }\n\n .monthview-primary-with-event {\n background-color: #3a87ad;\n color: white;\n }\n\n .monthview-current {\n background-color: #f0f0f0;\n }\n\n .monthview-selected {\n background-color: #009900;\n color: white;\n }\n\n .monthview-datetable td.monthview-disabled {\n color: lightgrey;\n cursor: default;\n }\n\n .monthview-datetable th {\n text-align: center;\n }\n\n .monthview-datetable td {\n cursor: pointer;\n text-align: center;\n }\n\n .monthview-secondary-with-event {\n background-color: #d9edf7;\n }\n\n ::-webkit-scrollbar,\n *::-webkit-scrollbar {\n display: none;\n }\n "] | ||
@@ -383,2 +381,3 @@ },] }, | ||
| 'noEventsLabel': [{ type: Input },], | ||
| 'autoSelect': [{ type: Input },], | ||
| 'markDisabled': [{ type: Input },], | ||
@@ -385,0 +384,0 @@ 'locale': [{ type: Input },], |
@@ -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]\" (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 {{views[0].dates[row*7+col].label}}\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]\" (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 {{views[1].dates[row*7+col].label}}\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]\" (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 {{views[2].dates[row*7+col].label}}\n </td>\n <tr>\n </tbody>\n </table>\n </ion-slide>\n </ion-slides>\n <template [ngTemplateOutlet]=\"monthviewEventDetailTemplate\"\n [ngOutletContext]=\"{showEventDetail:showEventDetail, selectedDate: selectedDate, noEventsLabel: noEventsLabel}\">\n </template>\n </div>\n ","styles":["\n .text-muted {\n color: #999;\n }\n\n .table-fixed {\n table-layout: fixed;\n }\n\n .table {\n width: 100%;\n max-width: 100%;\n background-color: transparent;\n }\n\n .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,\n .table > tbody > tr > td, .table > tfoot > tr > td {\n padding: 8px;\n line-height: 20px;\n vertical-align: top;\n }\n\n .table > thead > tr > th {\n vertical-align: bottom;\n border-bottom: 2px solid #ddd;\n }\n\n .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {\n border-top: 0\n }\n\n .table > tbody + tbody {\n border-top: 2px solid #ddd;\n }\n\n .table-bordered {\n border: 1px solid #ddd;\n }\n\n .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,\n .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {\n border: 1px solid #ddd;\n }\n\n .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {\n border-bottom-width: 2px;\n }\n\n .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {\n background-color: #f9f9f9\n }\n\n .monthview-primary-with-event {\n background-color: #3a87ad;\n color: white;\n }\n\n .monthview-current {\n background-color: #f0f0f0;\n }\n\n .monthview-selected {\n background-color: #009900;\n color: white;\n }\n\n .monthview-datetable td.monthview-disabled {\n color: lightgrey;\n cursor: default;\n }\n\n .monthview-datetable th {\n text-align: center;\n }\n\n .monthview-datetable td {\n cursor: pointer;\n text-align: center;\n }\n\n .monthview-secondary-with-event {\n background-color: #d9edf7;\n }\n\n ::-webkit-scrollbar,\n *::-webkit-scrollbar {\n display: none;\n }\n "]}]}],"members":{"slider":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["monthSlider"]}]}],"monthviewDisplayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"monthviewEventDetailTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatDay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatDayHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatMonthTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"eventSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"startingDayMonth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showEventDetail":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"noEventsLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"markDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"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 {{views[0].dates[row*7+col].label}}\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 {{views[1].dates[row*7+col].label}}\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 {{views[2].dates[row*7+col].label}}\n </td>\n <tr>\n </tbody>\n </table>\n </ion-slide>\n </ion-slides>\n <template [ngTemplateOutlet]=\"monthviewEventDetailTemplate\"\n [ngOutletContext]=\"{showEventDetail:showEventDetail, selectedDate: selectedDate, noEventsLabel: noEventsLabel}\">\n </template>\n </div>\n ","styles":["\n .text-muted {\n color: #999;\n }\n\n .table-fixed {\n table-layout: fixed;\n }\n\n .table {\n width: 100%;\n max-width: 100%;\n background-color: transparent;\n }\n\n .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,\n .table > tbody > tr > td, .table > tfoot > tr > td {\n padding: 8px;\n line-height: 20px;\n vertical-align: top;\n }\n\n .table > thead > tr > th {\n vertical-align: bottom;\n border-bottom: 2px solid #ddd;\n }\n\n .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {\n border-top: 0\n }\n\n .table > tbody + tbody {\n border-top: 2px solid #ddd;\n }\n\n .table-bordered {\n border: 1px solid #ddd;\n }\n\n .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,\n .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {\n border: 1px solid #ddd;\n }\n\n .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {\n border-bottom-width: 2px;\n }\n\n .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {\n background-color: #f9f9f9\n }\n\n .monthview-primary-with-event {\n background-color: #3a87ad;\n color: white;\n }\n\n .monthview-current {\n background-color: #f0f0f0;\n }\n\n .monthview-selected {\n background-color: #009900;\n color: white;\n }\n\n .monthview-datetable td.monthview-disabled {\n color: lightgrey;\n cursor: default;\n }\n\n .monthview-datetable th {\n text-align: center;\n }\n\n .monthview-datetable td {\n cursor: pointer;\n text-align: center;\n }\n\n .monthview-secondary-with-event {\n background-color: #d9edf7;\n }\n\n ::-webkit-scrollbar,\n *::-webkit-scrollbar {\n display: none;\n }\n "]}]}],"members":{"slider":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["monthSlider"]}]}],"monthviewDisplayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"monthviewEventDetailTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatDay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatDayHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatMonthTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"eventSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"startingDayMonth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showEventDetail":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"noEventsLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"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"}]}}}} |
| { | ||
| "name": "ionic2-calendar", | ||
| "version": "0.2.3", | ||
| "version": "0.2.4", | ||
| "description": "Ionic2 calendar component", | ||
@@ -40,3 +40,3 @@ "keywords": [ | ||
| "@angular/platform-server": "2.2.1", | ||
| "ionic-angular": "2.0.0-rc.5", | ||
| "ionic-angular": "2.1.0", | ||
| "rxjs": "5.0.0-beta.12", | ||
@@ -43,0 +43,0 @@ "zone.js": "0.6.26", |
@@ -13,3 +13,3 @@ # Ionic2-Calendar directive | ||
| version 0.1.x depends on Ionic 2.0.0-rc.1 ~ Ionic 2.0.0-rc.4 | ||
| version 0.2.x depends on Ionic 2.0.0-rc.5 (rc.5 has breaking change on the slide API) | ||
| 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. | ||
@@ -130,2 +130,5 @@ | ||
| Default value: 60 | ||
| * autoSelect | ||
| If set to true, the current calendar date will be auto selected when calendar is loaded or swiped in the month view. | ||
| Default value: true | ||
| * markDisabled | ||
@@ -132,0 +135,0 @@ The callback function used to determine if the time should be marked as disabled. |
@@ -410,3 +410,3 @@ import { DatePipe } from '@angular/common'; | ||
| 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\"\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\" (click)=\"select(tm.time, tm.events)\">\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\"\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n <template [ngTemplateOutlet]=\"weekviewNormalEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <div *ngIf=\"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\"\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\" (click)=\"select(tm.time, tm.events)\">\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\"\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n <template [ngTemplateOutlet]=\"weekviewNormalEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <div *ngIf=\"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\"\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\" (click)=\"select(tm.time, tm.events)\">\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\"\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n <template [ngTemplateOutlet]=\"weekviewNormalEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <div *ngIf=\"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\">\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 "], | ||
@@ -413,0 +413,0 @@ encapsulation: ViewEncapsulation.None |
@@ -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\"\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\" (click)=\"select(tm.time, tm.events)\">\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\"\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n <template [ngTemplateOutlet]=\"weekviewNormalEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <div *ngIf=\"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\"\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\" (click)=\"select(tm.time, tm.events)\">\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\"\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n <template [ngTemplateOutlet]=\"weekviewNormalEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <div *ngIf=\"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\"\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\" (click)=\"select(tm.time, tm.events)\">\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\"\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n <template [ngTemplateOutlet]=\"weekviewNormalEventTemplate\"\n [ngOutletContext]=\"{displayEvent:displayEvent}\">\n </template>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <div *ngIf=\"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\">\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"}}}}}}} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.38%
998940
- Lines of code
- increased by0.26%
12925
- Number of lines in readme file
- increased by1.03%
295
No dependency changes