ionic3-calendar3
Version:
Ionic3 calendar component
1 lines • 50.9 kB
JSON
[{"__symbolic":"module","version":3,"metadata":{"WeekViewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"weekview","template":"\n <ion-slides #weekSlider [loop]=\"true\" [dir]=\"dir\" [spaceBetween]=\"spaceBetween\" (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 <ng-template [ngTemplateOutlet]=\"weekviewAllDayEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{day:day, eventTemplate:weekviewAllDayEventTemplate}\">\n </ng-template>\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <init-position-scroll class=\"weekview-normal-event-container\" [initPosition]=\"initScrollPosition\" [emitEvent]=\"preserveScrollPosition\" (onScroll)=\"setScrollPosition($event)\">\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let row of views[0].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td *ngFor=\"let tm of row\" class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n <ng-template [ngTemplateOutlet]=\"weekviewNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts, eventTemplate:weekviewNormalEventTemplate}\">\n </ng-template>\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-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 <init-position-scroll class=\"weekview-normal-event-container\" [initPosition]=\"initScrollPosition\">\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let row of views[0].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td *ngFor=\"let tm of row\" class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-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 <ng-template [ngTemplateOutlet]=\"weekviewAllDayEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{day:day, eventTemplate:weekviewAllDayEventTemplate}\">\n </ng-template>\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <init-position-scroll class=\"weekview-normal-event-container\" [initPosition]=\"initScrollPosition\" [emitEvent]=\"preserveScrollPosition\" (onScroll)=\"setScrollPosition($event)\">\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let row of views[1].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td *ngFor=\"let tm of row\" class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n <ng-template [ngTemplateOutlet]=\"weekviewNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts, eventTemplate:weekviewNormalEventTemplate}\">\n </ng-template>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-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 <init-position-scroll class=\"weekview-normal-event-container\" [initPosition]=\"initScrollPosition\">\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let row of views[1].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td *ngFor=\"let tm of row\" class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-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 <ng-template [ngTemplateOutlet]=\"weekviewAllDayEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{day:day, eventTemplate:weekviewAllDayEventTemplate}\">\n </ng-template>\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <init-position-scroll class=\"weekview-normal-event-container\" [initPosition]=\"initScrollPosition\" [emitEvent]=\"preserveScrollPosition\" (onScroll)=\"setScrollPosition($event)\">\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let row of views[2].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td *ngFor=\"let tm of row\" class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n <ng-template [ngTemplateOutlet]=\"weekviewNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts, eventTemplate:weekviewNormalEventTemplate}\">\n </ng-template>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-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 <init-position-scroll class=\"weekview-normal-event-container\" [initPosition]=\"initScrollPosition\">\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let row of views[2].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td *ngFor=\"let tm of row\" class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-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 border-left: 1px solid #ddd; \n }\n\n [dir=\"rtl\"] .weekview-allday-label {\n float: right;\n border-right: 1px solid #ddd;\n }\n\n .weekview-allday-content-wrapper {\n margin-left: 50px;\n overflow: hidden;\n height: 51px;\n }\n\n [dir=\"rtl\"] .weekview-allday-content-wrapper {\n margin-left: 0;\n margin-right: 50px;\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 [dir=\"rtl\"] .weekview-allday-content-wrapper {\n margin-left: 0;\n margin-right: 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"}}]}],"weekviewAllDayEventSectionTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekviewNormalEventSectionTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatWeekTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatWeekViewDayHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatHourColumn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"startingDayWeek":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"allDayLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hourParts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"eventSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"markDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"locale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dateFormatter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dir":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollToHour":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"preserveScrollPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"lockSwipeToPrev":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"lockSwipes":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"startHour":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"endHour":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"spaceBetween":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hourSegments":[{"__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"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onSlideChanged":[{"__symbolic":"method"}],"move":[{"__symbolic":"method"}],"getHourColumnLabels":[{"__symbolic":"method"}],"getViewData":[{"__symbolic":"method"}],"getRange":[{"__symbolic":"method"}],"onDataLoaded":[{"__symbolic":"method"}],"refreshView":[{"__symbolic":"method"}],"getTitle":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"placeEvents":[{"__symbolic":"method"}],"placeAllDayEvents":[{"__symbolic":"method"}],"overlap":[{"__symbolic":"method"}],"calculatePosition":[{"__symbolic":"method"}],"eventSelected":[{"__symbolic":"method"}],"setScrollPosition":[{"__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\" [dir]=\"dir\" [spaceBetween]=\"spaceBetween\" (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 <ng-template [ngTemplateOutlet]=\"weekviewAllDayEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{day:day, eventTemplate:weekviewAllDayEventTemplate}\">\n </ng-template>\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <init-position-scroll class=\"weekview-normal-event-container\" [initPosition]=\"initScrollPosition\" [emitEvent]=\"preserveScrollPosition\" (onScroll)=\"setScrollPosition($event)\">\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let row of views[0].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td *ngFor=\"let tm of row\" class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n <ng-template [ngTemplateOutlet]=\"weekviewNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts, eventTemplate:weekviewNormalEventTemplate}\">\n </ng-template>\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-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 <init-position-scroll class=\"weekview-normal-event-container\" [initPosition]=\"initScrollPosition\">\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let row of views[0].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td *ngFor=\"let tm of row\" class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-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 <ng-template [ngTemplateOutlet]=\"weekviewAllDayEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{day:day, eventTemplate:weekviewAllDayEventTemplate}\">\n </ng-template>\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <init-position-scroll class=\"weekview-normal-event-container\" [initPosition]=\"initScrollPosition\" [emitEvent]=\"preserveScrollPosition\" (onScroll)=\"setScrollPosition($event)\">\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let row of views[1].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td *ngFor=\"let tm of row\" class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n <ng-template [ngTemplateOutlet]=\"weekviewNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts, eventTemplate:weekviewNormalEventTemplate}\">\n </ng-template>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-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 <init-position-scroll class=\"weekview-normal-event-container\" [initPosition]=\"initScrollPosition\">\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let row of views[1].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td *ngFor=\"let tm of row\" class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-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 <ng-template [ngTemplateOutlet]=\"weekviewAllDayEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{day:day, eventTemplate:weekviewAllDayEventTemplate}\">\n </ng-template>\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <init-position-scroll class=\"weekview-normal-event-container\" [initPosition]=\"initScrollPosition\" [emitEvent]=\"preserveScrollPosition\" (onScroll)=\"setScrollPosition($event)\">\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let row of views[2].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td *ngFor=\"let tm of row\" class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n <ng-template [ngTemplateOutlet]=\"weekviewNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts, eventTemplate:weekviewNormalEventTemplate}\">\n </ng-template>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-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 <init-position-scroll class=\"weekview-normal-event-container\" [initPosition]=\"initScrollPosition\">\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let row of views[2].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td *ngFor=\"let tm of row\" class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-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 border-left: 1px solid #ddd; \n }\n\n [dir=\"rtl\"] .weekview-allday-label {\n float: right;\n border-right: 1px solid #ddd;\n }\n\n .weekview-allday-content-wrapper {\n margin-left: 50px;\n overflow: hidden;\n height: 51px;\n }\n\n [dir=\"rtl\"] .weekview-allday-content-wrapper {\n margin-left: 0;\n margin-right: 50px;\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 [dir=\"rtl\"] .weekview-allday-content-wrapper {\n margin-left: 0;\n margin-right: 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"}}]}],"weekviewAllDayEventSectionTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekviewNormalEventSectionTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatWeekTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatWeekViewDayHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatHourColumn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"startingDayWeek":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"allDayLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hourParts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"eventSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"markDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"locale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dateFormatter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dir":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollToHour":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"preserveScrollPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"lockSwipeToPrev":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"lockSwipes":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"startHour":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"endHour":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"spaceBetween":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hourSegments":[{"__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"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onSlideChanged":[{"__symbolic":"method"}],"move":[{"__symbolic":"method"}],"getHourColumnLabels":[{"__symbolic":"metho