ionic3-calendar3
Version:
Ionic3 calendar component
1 lines • 41.8 kB
JSON
[{"__symbolic":"module","version":3,"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\" [dir]=\"dir\" [spaceBetween]=\"spaceBetween\" (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 <ng-template [ngTemplateOutlet]=\"dayviewAllDayEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{allDayEvents:views[0].allDayEvents,eventTemplate:dayviewAllDayEventTemplate}\">\n </ng-template>\n </td>\n <td class=\"calendar-cell\" *ngIf=\"0!==currentViewIndex\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <init-position-scroll *ngIf=\"0===currentViewIndex\" class=\"dayview-normal-event-container\" [initPosition]=\"initScrollPosition\" [emitEvent]=\"preserveScrollPosition\" (onScroll)=\"setScrollPosition($event)\">\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let tm of views[0].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n <ng-template [ngTemplateOutlet]=\"dayviewNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts, eventTemplate:dayviewNormalEventTemplate}\">\n </ng-template>\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-scroll>\n <init-position-scroll *ngIf=\"0!==currentViewIndex\" class=\"dayview-normal-event-container\" [initPosition]=\"initScrollPosition\">\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let tm of views[0].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-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 <ng-template [ngTemplateOutlet]=\"dayviewAllDayEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{allDayEvents:views[1].allDayEvents,eventTemplate:dayviewAllDayEventTemplate}\">\n </ng-template>\n </td>\n <td class=\"calendar-cell\" *ngIf=\"1!==currentViewIndex\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <init-position-scroll *ngIf=\"1===currentViewIndex\" class=\"dayview-normal-event-container\" [initPosition]=\"initScrollPosition\" [emitEvent]=\"preserveScrollPosition\" (onScroll)=\"setScrollPosition($event)\">\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let tm of views[1].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n <ng-template [ngTemplateOutlet]=\"dayviewNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts, eventTemplate:dayviewNormalEventTemplate}\">\n </ng-template>\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-scroll>\n <init-position-scroll *ngIf=\"1!==currentViewIndex\" class=\"dayview-normal-event-container\" [initPosition]=\"initScrollPosition\">\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let tm of views[1].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-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 <ng-template [ngTemplateOutlet]=\"dayviewAllDayEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{allDayEvents:views[2].allDayEvents,eventTemplate:dayviewAllDayEventTemplate}\">\n </ng-template>\n </td>\n <td class=\"calendar-cell\" *ngIf=\"2!==currentViewIndex\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <init-position-scroll *ngIf=\"2===currentViewIndex\" class=\"dayview-normal-event-container\" [initPosition]=\"initScrollPosition\" [emitEvent]=\"preserveScrollPosition\" (onScroll)=\"setScrollPosition($event)\">\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let tm of views[2].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n <ng-template [ngTemplateOutlet]=\"dayviewNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts, eventTemplate:dayviewNormalEventTemplate}\">\n </ng-template>\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-scroll>\n <init-position-scroll *ngIf=\"2!==currentViewIndex\" class=\"dayview-normal-event-container\" [initPosition]=\"initScrollPosition\">\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let tm of views[2].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-scroll>\n </ion-slide>\n </ion-slides>\n ","styles":["\n .table-fixed {\n table-layout: fixed;\n }\n\n .table {\n width: 100%;\n max-width: 100%;\n background-color: transparent;\n }\n\n .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,\n .table > tbody > tr > td, .table > tfoot > tr > td {\n padding: 8px;\n line-height: 20px;\n vertical-align: top;\n }\n\n .table > thead > tr > th {\n vertical-align: bottom;\n border-bottom: 2px solid #ddd;\n }\n\n .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {\n border-top: 0\n }\n\n .table > tbody + tbody {\n border-top: 2px solid #ddd;\n }\n\n .table-bordered {\n border: 1px solid #ddd;\n }\n\n .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,\n .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {\n border: 1px solid #ddd;\n }\n\n .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {\n border-bottom-width: 2px;\n }\n\n .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {\n background-color: #f9f9f9\n }\n\n .calendar-hour-column {\n width: 50px;\n white-space: nowrap;\n }\n\n .calendar-event-wrap {\n position: relative;\n width: 100%;\n height: 100%;\n }\n\n .calendar-event {\n position: absolute;\n padding: 2px;\n cursor: pointer;\n z-index: 10000;\n }\n\n .calendar-cell {\n padding: 0 !important;\n height: 37px;\n }\n\n .dayview-allday-label {\n float: left;\n height: 100%;\n line-height: 50px;\n text-align: center;\n width: 50px;\n border-left: 1px solid #ddd;\n }\n\n [dir=\"rtl\"] .dayview-allday-label {\n border-right: 1px solid #ddd;\n float: right;\n }\n\n .dayview-allday-content-wrapper {\n margin-left: 50px;\n overflow: hidden;\n height: 51px;\n }\n\n [dir=\"rtl\"] .dayview-allday-content-wrapper {\n margin-left: 0;\n margin-right: 50px;\n }\n\n .dayview-allday-content-table {\n min-height: 50px;\n }\n\n .dayview-allday-content-table td {\n border-left: 1px solid #ddd;\n border-right: 1px solid #ddd;\n }\n\n .dayview-allday-table {\n height: 50px;\n position: relative;\n border-bottom: 1px solid #ddd;\n font-size: 14px;\n }\n\n .dayview-normal-event-container {\n margin-top: 50px;\n overflow: hidden;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n position: absolute;\n font-size: 14px;\n }\n\n .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 [dir=\"rtl\"] .dayview-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":["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"}}]}],"dayviewAllDayEventSectionTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dayviewNormalEventSectionTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatHourColumn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatDayTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"allDayLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hourParts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"eventSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"markDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"locale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dateFormatter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"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":{"DayViewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dayview","template":"\n <ion-slides #daySlider [loop]=\"true\" [dir]=\"dir\" [spaceBetween]=\"spaceBetween\" (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 <ng-template [ngTemplateOutlet]=\"dayviewAllDayEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{allDayEvents:views[0].allDayEvents,eventTemplate:dayviewAllDayEventTemplate}\">\n </ng-template>\n </td>\n <td class=\"calendar-cell\" *ngIf=\"0!==currentViewIndex\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <init-position-scroll *ngIf=\"0===currentViewIndex\" class=\"dayview-normal-event-container\" [initPosition]=\"initScrollPosition\" [emitEvent]=\"preserveScrollPosition\" (onScroll)=\"setScrollPosition($event)\">\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let tm of views[0].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n <ng-template [ngTemplateOutlet]=\"dayviewNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts, eventTemplate:dayviewNormalEventTemplate}\">\n </ng-template>\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-scroll>\n <init-position-scroll *ngIf=\"0!==currentViewIndex\" class=\"dayview-normal-event-container\" [initPosition]=\"initScrollPosition\">\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let tm of views[0].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-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 <ng-template [ngTemplateOutlet]=\"dayviewAllDayEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{allDayEvents:views[1].allDayEvents,eventTemplate:dayviewAllDayEventTemplate}\">\n </ng-template>\n </td>\n <td class=\"calendar-cell\" *ngIf=\"1!==currentViewIndex\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <init-position-scroll *ngIf=\"1===currentViewIndex\" class=\"dayview-normal-event-container\" [initPosition]=\"initScrollPosition\" [emitEvent]=\"preserveScrollPosition\" (onScroll)=\"setScrollPosition($event)\">\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let tm of views[1].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n <ng-template [ngTemplateOutlet]=\"dayviewNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts, eventTemplate:dayviewNormalEventTemplate}\">\n </ng-template>\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-scroll>\n <init-position-scroll *ngIf=\"1!==currentViewIndex\" class=\"dayview-normal-event-container\" [initPosition]=\"initScrollPosition\">\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let tm of views[1].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-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 <ng-template [ngTemplateOutlet]=\"dayviewAllDayEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{allDayEvents:views[2].allDayEvents,eventTemplate:dayviewAllDayEventTemplate}\">\n </ng-template>\n </td>\n <td class=\"calendar-cell\" *ngIf=\"2!==currentViewIndex\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <init-position-scroll *ngIf=\"2===currentViewIndex\" class=\"dayview-normal-event-container\" [initPosition]=\"initScrollPosition\" [emitEvent]=\"preserveScrollPosition\" (onScroll)=\"setScrollPosition($event)\">\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let tm of views[2].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n <ng-template [ngTemplateOutlet]=\"dayviewNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts, eventTemplate:dayviewNormalEventTemplate}\">\n </ng-template>\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-scroll>\n <init-position-scroll *ngIf=\"2!==currentViewIndex\" class=\"dayview-normal-event-container\" [initPosition]=\"initScrollPosition\">\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let tm of views[2].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-scroll>\n </ion-slide>\n </ion-slides>\n ","styles":["\n .table-fixed {\n table-layout: fixed;\n }\n\n .table {\n width: 100%;\n max-width: 100%;\n background-color: transparent;\n }\n\n .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,\n .table > tbody > tr > td, .table > tfoot > tr > td {\n padding: 8px;\n line-height: 20px;\n vertical-align: top;\n }\n\n .table > thead > tr > th {\n vertical-align: bottom;\n border-bottom: 2px solid #ddd;\n }\n\n .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {\n border-top: 0\n }\n\n .table > tbody + tbody {\n border-top: 2px solid #ddd;\n }\n\n .table-bordered {\n border: 1px solid #ddd;\n }\n\n .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,\n .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {\n border: 1px solid #ddd;\n }\n\n .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {\n border-bottom-width: 2px;\n }\n\n .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {\n background-color: #f9f9f9\n }\n\n .calendar-hour-column {\n width: 50px;\n white-space: nowrap;\n }\n\n .calendar-event-wrap {\n position: relative;\n width: 100%;\n height: 100%;\n }\n\n .calendar-event {\n position: absolute;\n padding: 2px;\n cursor: pointer;\n z-index: 10000;\n }\n\n .calendar-cell {\n padding: 0 !important;\n height: 37px;\n }\n\n .dayview-allday-label {\n float: left;\n height: 100%;\n line-height: 50px;\n text-align: center;\n width: 50px;\n border-left: 1px solid #ddd;\n }\n\n [dir=\"rtl\"] .dayview-allday-label {\n border-right: 1px solid #ddd;\n float: right;\n }\n\n .dayview-allday-content-wrapper {\n margin-left: 50px;\n overflow: hidden;\n height: 51px;\n }\n\n [dir=\"rtl\"] .dayview-allday-content-wrapper {\n margin-left: 0;\n margin-right: 50px;\n }\n\n .dayview-allday-content-table {\n min-height: 50px;\n }\n\n .dayview-allday-content-table td {\n border-left: 1px solid #ddd;\n border-right: 1px solid #ddd;\n }\n\n .dayview-allday-table {\n height: 50px;\n position: relative;\n border-bottom: 1px solid #ddd;\n font-size: 14px;\n }\n\n .dayview-normal-event-container {\n margin-top: 50px;\n overflow: hidden;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n position: absolute;\n font-size: 14px;\n }\n\n .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 [dir=\"rtl\"] .dayview-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":["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"}}]}],"dayviewAllDayEventSectionTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dayviewNormalEventSectionTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatHourColumn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formatDayTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"allDayLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hourParts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"eventSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"markDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"locale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dateFormatter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"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"}}}}}}}]