ionic3-calendar3
Version:
Ionic3 calendar component
1 lines • 39.3 kB
JSON
[{"__symbolic":"module","version":3,"metadata":{"IEvent":{"__symbolic":"interface"},"IRange":{"__symbolic":"interface"},"IView":{"__symbolic":"interface"},"IDayView":{"__symbolic":"interface"},"IDayViewRow":{"__symbolic":"interface"},"IMonthView":{"__symbolic":"interface"},"IMonthViewRow":{"__symbolic":"interface"},"IWeekView":{"__symbolic":"interface"},"IWeekViewDateRow":{"__symbolic":"interface"},"IWeekViewRow":{"__symbolic":"interface"},"IDisplayEvent":{"__symbolic":"interface"},"IDisplayAllDayEvent":{"__symbolic":"interface"},"ICalendarComponent":{"__symbolic":"interface"},"ITimeSelected":{"__symbolic":"interface"},"IMonthViewDisplayEventTemplateContext":{"__symbolic":"interface"},"IMonthViewEventDetailTemplateContext":{"__symbolic":"interface"},"IWeekViewAllDayEventSectionTemplateContext":{"__symbolic":"interface"},"IWeekViewNormalEventSectionTemplateContext":{"__symbolic":"interface"},"IDayViewAllDayEventSectionTemplateContext":{"__symbolic":"interface"},"IDayViewNormalEventSectionTemplateContext":{"__symbolic":"interface"},"IDateFormatter":{"__symbolic":"interface"},"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 <ng-template #monthviewDefaultDisplayEventTemplate let-view=\"view\" let-row=\"row\" let-col=\"col\">\n {{view.dates[row*7+col].label}}\n </ng-template>\n <ng-template #monthviewDefaultEventDetailTemplate let-showEventDetail=\"showEventDetail\" let-selectedDate=\"selectedDate\" let-noEventsLabel=\"noEventsLabel\">\n <ion-list class=\"event-detail-container\" has-bouncing=\"false\" *ngIf=\"showEventDetail\" overflow-scroll=\"false\">\n <ion-item *ngFor=\"let event of selectedDate?.events\" (click)=\"eventSelected(event)\">\n <span *ngIf=\"!event.allDay\" class=\"monthview-eventdetail-timecolumn\">{{event.startTime|date: 'HH:mm'}}\n -\n {{event.endTime|date: 'HH:mm'}}\n </span>\n <span *ngIf=\"event.allDay\" class=\"monthview-eventdetail-timecolumn\">{{allDayLabel}}</span>\n <span class=\"event-detail\"> | {{event.title}}</span>\n </ion-item>\n <ion-item *ngIf=\"selectedDate?.events.length==0\">\n <div class=\"no-events-label\">{{noEventsLabel}}</div>\n </ion-item>\n </ion-list>\n </ng-template>\n <ng-template #defaultAllDayEventTemplate let-displayEvent=\"displayEvent\">\n <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n </ng-template>\n <ng-template #defaultNormalEventTemplate let-displayEvent=\"displayEvent\">\n <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n </ng-template>\n <ng-template #defaultWeekViewAllDayEventSectionTemplate let-day=\"day\" let-eventTemplate=\"eventTemplate\">\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 <ng-template [ngTemplateOutlet]=\"eventTemplate\"\n [ngTemplateOutletContext]=\"{displayEvent:displayEvent}\">\n </ng-template>\n </div>\n </div>\n </ng-template>\n <ng-template #defaultDayViewAllDayEventSectionTemplate let-allDayEvents=\"allDayEvents\" let-eventTemplate=\"eventTemplate\">\n <div *ngFor=\"let displayEvent of 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 <ng-template [ngTemplateOutlet]=\"eventTemplate\"\n [ngTemplateOutletContext]=\"{displayEvent:displayEvent}\">\n </ng-template>\n </div>\n </ng-template>\n <ng-template #defaultNormalEventSectionTemplate let-tm=\"tm\" let-hourParts=\"hourParts\" let-eventTemplate=\"eventTemplate\">\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 <ng-template [ngTemplateOutlet]=\"eventTemplate\"\n [ngTemplateOutletContext]=\"{displayEvent:displayEvent}\">\n </ng-template>\n </div>\n </div>\n </ng-template>\n\n <div [ngSwitch]=\"calendarMode\" class=\"{{calendarMode}}view-container\">\n <monthview *ngSwitchCase=\"'month'\"\n [formatDay]=\"formatDay\"\n [formatDayHeader]=\"formatDayHeader\"\n [formatMonthTitle]=\"formatMonthTitle\"\n [startingDayMonth]=\"startingDayMonth\"\n [showEventDetail]=\"showEventDetail\"\n [noEventsLabel]=\"noEventsLabel\"\n [autoSelect]=\"autoSelect\"\n [eventSource]=\"eventSource\"\n [markDisabled]=\"markDisabled\"\n [monthviewDisplayEventTemplate]=\"monthviewDisplayEventTemplate||monthviewDefaultDisplayEventTemplate\"\n [monthviewInactiveDisplayEventTemplate]=\"monthviewInactiveDisplayEventTemplate||monthviewDefaultDisplayEventTemplate\"\n [monthviewEventDetailTemplate]=\"monthviewEventDetailTemplate||monthviewDefaultEventDetailTemplate\"\n [locale]=\"locale\"\n [dateFormatter]=\"dateFormatter\"\n [dir]=\"dir\"\n [lockSwipeToPrev]=\"lockSwipeToPrev\"\n [lockSwipes]=\"lockSwipes\"\n [spaceBetween]=\"spaceBetween\" \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 [hourSegments]=\"hourSegments\"\n [eventSource]=\"eventSource\"\n [markDisabled]=\"markDisabled\"\n [weekviewAllDayEventTemplate]=\"weekviewAllDayEventTemplate||defaultAllDayEventTemplate\"\n [weekviewNormalEventTemplate]=\"weekviewNormalEventTemplate||defaultNormalEventTemplate\"\n [weekviewAllDayEventSectionTemplate]=\"weekviewAllDayEventSectionTemplate||defaultWeekViewAllDayEventSectionTemplate\"\n [weekviewNormalEventSectionTemplate]=\"weekviewNormalEventSectionTemplate||defaultNormalEventSectionTemplate\"\n [locale]=\"locale\"\n [dateFormatter]=\"dateFormatter\"\n [dir]=\"dir\"\n [scrollToHour]=\"scrollToHour\"\n [preserveScrollPosition]=\"preserveScrollPosition\"\n [lockSwipeToPrev]=\"lockSwipeToPrev\"\n [lockSwipes]=\"lockSwipes\"\n [startHour]=\"startHour\"\n [endHour]=\"endHour\"\n [spaceBetween]=\"spaceBetween\"\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 [hourSegments]=\"hourSegments\"\n [eventSource]=\"eventSource\"\n [markDisabled]=\"markDisabled\"\n [dayviewAllDayEventTemplate]=\"dayviewAllDayEventTemplate||defaultAllDayEventTemplate\"\n [dayviewNormalEventTemplate]=\"dayviewNormalEventTemplate||defaultNormalEventTemplate\" \n [dayviewAllDayEventSectionTemplate]=\"dayviewAllDayEventSectionTemplate||defaultDayViewAllDayEventSectionTemplate\" \n [dayviewNormalEventSectionTemplate]=\"dayviewNormalEventSectionTemplate||defaultNormalEventSectionTemplate\"\n [locale]=\"locale\"\n [dateFormatter]=\"dateFormatter\"\n [dir]=\"dir\"\n [scrollToHour]=\"scrollToHour\"\n [preserveScrollPosition]=\"preserveScrollPosition\"\n [lockSwipeToPrev]=\"lockSwipeToPrev\"\n [lockSwipes]=\"lockSwipes\"\n [startHour]=\"startHour\"\n [endHour]=\"endHour\"\n [spaceBetween]=\"spaceBetween\"\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"}}]}],"timeInterval":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"autoSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"markDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"monthviewDisplayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"monthviewInactiveDisplayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"monthviewEventDetailTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekviewAllDayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekviewNormalEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dayviewAllDayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dayviewNormalEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"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"}}]}],"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"}}]}],"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"}}]}],"locale":[{"__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"}}]}],"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"}],"loadEvents":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"IEvent":{"__symbolic":"interface"},"IRange":{"__symbolic":"interface"},"IView":{"__symbolic":"interface"},"IDayView":{"__symbolic":"interface"},"IDayViewRow":{"__symbolic":"interface"},"IMonthView":{"__symbolic":"interface"},"IMonthViewRow":{"__symbolic":"interface"},"IWeekView":{"__symbolic":"interface"},"IWeekViewDateRow":{"__symbolic":"interface"},"IWeekViewRow":{"__symbolic":"interface"},"IDisplayEvent":{"__symbolic":"interface"},"IDisplayAllDayEvent":{"__symbolic":"interface"},"ICalendarComponent":{"__symbolic":"interface"},"ITimeSelected":{"__symbolic":"interface"},"IMonthViewDisplayEventTemplateContext":{"__symbolic":"interface"},"IMonthViewEventDetailTemplateContext":{"__symbolic":"interface"},"IWeekViewAllDayEventSectionTemplateContext":{"__symbolic":"interface"},"IWeekViewNormalEventSectionTemplateContext":{"__symbolic":"interface"},"IDayViewAllDayEventSectionTemplateContext":{"__symbolic":"interface"},"IDayViewNormalEventSectionTemplateContext":{"__symbolic":"interface"},"IDateFormatter":{"__symbolic":"interface"},"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 <ng-template #monthviewDefaultDisplayEventTemplate let-view=\"view\" let-row=\"row\" let-col=\"col\">\n {{view.dates[row*7+col].label}}\n </ng-template>\n <ng-template #monthviewDefaultEventDetailTemplate let-showEventDetail=\"showEventDetail\" let-selectedDate=\"selectedDate\" let-noEventsLabel=\"noEventsLabel\">\n <ion-list class=\"event-detail-container\" has-bouncing=\"false\" *ngIf=\"showEventDetail\" overflow-scroll=\"false\">\n <ion-item *ngFor=\"let event of selectedDate?.events\" (click)=\"eventSelected(event)\">\n <span *ngIf=\"!event.allDay\" class=\"monthview-eventdetail-timecolumn\">{{event.startTime|date: 'HH:mm'}}\n -\n {{event.endTime|date: 'HH:mm'}}\n </span>\n <span *ngIf=\"event.allDay\" class=\"monthview-eventdetail-timecolumn\">{{allDayLabel}}</span>\n <span class=\"event-detail\"> | {{event.title}}</span>\n </ion-item>\n <ion-item *ngIf=\"selectedDate?.events.length==0\">\n <div class=\"no-events-label\">{{noEventsLabel}}</div>\n </ion-item>\n </ion-list>\n </ng-template>\n <ng-template #defaultAllDayEventTemplate let-displayEvent=\"displayEvent\">\n <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n </ng-template>\n <ng-template #defaultNormalEventTemplate let-displayEvent=\"displayEvent\">\n <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n </ng-template>\n <ng-template #defaultWeekViewAllDayEventSectionTemplate let-day=\"day\" let-eventTemplate=\"eventTemplate\">\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 <ng-template [ngTemplateOutlet]=\"eventTemplate\"\n [ngTemplateOutletContext]=\"{displayEvent:displayEvent}\">\n </ng-template>\n </div>\n </div>\n </ng-template>\n <ng-template #defaultDayViewAllDayEventSectionTemplate let-allDayEvents=\"allDayEvents\" let-eventTemplate=\"eventTemplate\">\n <div *ngFor=\"let displayEvent of 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 <ng-template [ngTemplateOutlet]=\"eventTemplate\"\n [ngTemplateOutletContext]=\"{displayEvent:displayEvent}\">\n </ng-template>\n </div>\n </ng-template>\n <ng-template #defaultNormalEventSectionTemplate let-tm=\"tm\" let-hourParts=\"hourParts\" let-eventTemplate=\"eventTemplate\">\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 <ng-template [ngTemplateOutlet]=\"eventTemplate\"\n [ngTemplateOutletContext]=\"{displayEvent:displayEvent}\">\n </ng-template>\n </div>\n </div>\n </ng-template>\n\n <div [ngSwitch]=\"calendarMode\" class=\"{{calendarMode}}view-container\">\n <monthview *ngSwitchCase=\"'month'\"\n [formatDay]=\"formatDay\"\n [formatDayHeader]=\"formatDayHeader\"\n [formatMonthTitle]=\"formatMonthTitle\"\n [startingDayMonth]=\"startingDayMonth\"\n [showEventDetail]=\"showEventDetail\"\n [noEventsLabel]=\"noEventsLabel\"\n [autoSelect]=\"autoSelect\"\n [eventSource]=\"eventSource\"\n [markDisabled]=\"markDisabled\"\n [monthviewDisplayEventTemplate]=\"monthviewDisplayEventTemplate||monthviewDefaultDisplayEventTemplate\"\n [monthviewInactiveDisplayEventTemplate]=\"monthviewInactiveDisplayEventTemplate||monthviewDefaultDisplayEventTemplate\"\n [monthviewEventDetailTemplate]=\"monthviewEventDetailTemplate||monthviewDefaultEventDetailTemplate\"\n [locale]=\"locale\"\n [dateFormatter]=\"dateFormatter\"\n [dir]=\"dir\"\n [lockSwipeToPrev]=\"lockSwipeToPrev\"\n [lockSwipes]=\"lockSwipes\"\n [spaceBetween]=\"spaceBetween\" \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 [hourSegments]=\"hourSegments\"\n [eventSource]=\"eventSource\"\n [markDisabled]=\"markDisabled\"\n [weekviewAllDayEventTemplate]=\"weekviewAllDayEventTemplate||defaultAllDayEventTemplate\"\n [weekviewNormalEventTemplate]=\"weekviewNormalEventTemplate||defaultNormalEventTemplate\"\n [weekviewAllDayEventSectionTemplate]=\"weekviewAllDayEventSectionTemplate||defaultWeekViewAllDayEventSectionTemplate\"\n [weekviewNormalEventSectionTemplate]=\"weekviewNormalEventSectionTemplate||defaultNormalEventSectionTemplate\"\n [locale]=\"locale\"\n [dateFormatter]=\"dateFormatter\"\n [dir]=\"dir\"\n [scrollToHour]=\"scrollToHour\"\n [preserveScrollPosition]=\"preserveScrollPosition\"\n [lockSwipeToPrev]=\"lockSwipeToPrev\"\n [lockSwipes]=\"lockSwipes\"\n [startHour]=\"startHour\"\n [endHour]=\"endHour\"\n [spaceBetween]=\"spaceBetween\"\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 [hourSegments]=\"hourSegments\"\n [eventSource]=\"eventSource\"\n [markDisabled]=\"markDisabled\"\n [dayviewAllDayEventTemplate]=\"dayviewAllDayEventTemplate||defaultAllDayEventTemplate\"\n [dayviewNormalEventTemplate]=\"dayviewNormalEventTemplate||defaultNormalEventTemplate\" \n [dayviewAllDayEventSectionTemplate]=\"dayviewAllDayEventSectionTemplate||defaultDayViewAllDayEventSectionTemplate\" \n [dayviewNormalEventSectionTemplate]=\"dayviewNormalEventSectionTemplate||defaultNormalEventSectionTemplate\"\n [locale]=\"locale\"\n [dateFormatter]=\"dateFormatter\"\n [dir]=\"dir\"\n [scrollToHour]=\"scrollToHour\"\n [preserveScrollPosition]=\"preserveScrollPosition\"\n [lockSwipeToPrev]=\"lockSwipeToPrev\"\n [lockSwipes]=\"lockSwipes\"\n [startHour]=\"startHour\"\n [endHour]=\"endHour\"\n [spaceBetween]=\"spaceBetween\"\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"}}]}],"timeInterval":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"autoSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"markDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"monthviewDisplayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"monthviewInactiveDisplayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"monthviewEventDetailTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekviewAllDayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekviewNormalEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dayviewAllDayEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dayviewNormalEventTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"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"}}]}],"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"}}]}],"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"}}]}],"locale":[{"__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"}}]}],"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"}],"loadEvents":[{"__symbolic":"method"}]}}}}]