@colijnit/sharedcomponents 1.0.23 → 1.0.25

package/projects/sharedcomponents/src/lib/components/date-planning/component/agenda/agenda-header.component.ts

@@ -0,0 +1,265 @@
+import {
+  AfterContentChecked,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Inject,
+  Input,
+  LOCALE_ID,
+  NgZone,
+  OnDestroy,
+  OnInit,
+  Output,
+  Renderer2, ViewEncapsulation
+} from "@angular/core";
+import {CalendarView} from "../../../../enum/calendar-view.enum";
+import {LanguageCode} from "../../../../enum/language-code.enum";
+import {Weekday} from "../../../../model/weekday.model";
+import {Week} from "../../../../model/week.model";
+import {CalendarUtils} from "../../../../utils/calendar.utils";
+import {NULL_DAY} from "../../../../model/agenda-null-objects";
+import {Day} from "../../../../model/day.model"
+import {Icon} from "../../../../enum/icon.enum";
+import {AgendaEventPerDay} from "../../../../model/agenda-event-per-day.model";
+import {DateUtils} from "../../../../utils/date-utils";
+import {IconCacheService} from "../../../../service/icon-cache.service";
+
+@Component({
+    selector: "agenda-header",
+    template: `
+        <div class="agenda-header-wrapper" *ngIf="view === viewTypes.DayView">
+            <div class="hour-label-placeholder">
+                <view-select [selectedView]="view" (selectedViewChange)="changeTheView($event)"></view-select>
+            </div>
+            <div class="week-day-label">
+                <co-icon class="pointer-hover no-user-select sub-unit-icon dark" [iconData]="iconCacheService.getIcon(icons.ArrowPointLeft)" (click)="subUnit()"></co-icon>
+                <div class="day-description" [textContent]="day.description"></div>
+                <co-icon class="pointer-hover no-user-select add-unit-icon dark" [iconData]="iconCacheService.getIcon(icons.ArrowPointRight)" (click)="addUnit()"></co-icon>
+            </div>
+        </div>
+        <div class="agenda-header-wrapper" *ngIf="view === viewTypes.WeekView">
+            <div class="hour-label-placeholder">
+                <view-select [selectedView]="view" (selectedViewChange)="changeTheView($event)"></view-select>
+            </div>
+            <div class="week-day-label" *ngFor="let weekDay of weekDays; let index = index" [class.selected]="weekDay.weekdaySelected" (click)="setUnit(weekDay)">
+                <co-icon *ngIf="index === 0 && showBackButton" class="pointer-hover no-user-select sub-unit-icon dark" [iconData]="iconCacheService.getIcon(icons.ArrowPointLeft)" (click)="subUnit()"></co-icon>
+                <div *ngIf="weekDay.newMonth" [textContent]="weekDay.weekdayMonthLong + ' ' + weekDay.weekdayYear" class="month-description"></div>
+                <div class="weekday-value" [textContent]="weekDay.weekdayDay"></div>
+                <div class="weekday-description" [textContent]="weekDay.weekdayShort"></div>
+                <co-icon *ngIf="index === 6" class="pointer-hover no-user-select add-unit-icon dark" [iconData]="iconCacheService.getIcon(icons.ArrowPointRight)" (click)="addUnit()"></co-icon>
+            </div>
+        </div>
+        <div class="agenda-header-wrapper" *ngIf="view === viewTypes.WeekSelectView">
+            <div class="week-day-label" *ngFor="let weekDay of weekDays; let index = index"
+                 [class.selected]="weekDay.weekdaySelected"
+                 [class.selectable]="weekDay.events && weekDay.events.length > 0"
+                 (click)="setUnit(weekDay)">
+                <co-icon *ngIf="index === 0 && showBackButton" class="pointer-hover no-user-select sub-unit-icon dark" [iconData]="iconCacheService.getIcon(icons.ArrowPointLeft)" (click)="subUnit()"></co-icon>
+                <div class="weekday-description" [textContent]="weekDay.weekdayShort"></div>
+                <div class="weekday-value" [textContent]="weekDay.weekdayDay + ' ' + weekDay.weekdayMonthShort"></div>
+                <co-icon *ngIf="index === 6" class="pointer-hover no-user-select add-unit-icon dark" [iconData]="iconCacheService.getIcon(icons.ArrowPointRight)" (click)="addUnit()"></co-icon>
+            </div>
+        </div>
+        <div class="agenda-header-wrapper" *ngIf="view === viewTypes.MonthView">
+            <div class="hour-label-placeholder">
+                <view-select [selectedView]="view" (selectedViewChange)="changeTheView($event)"></view-select>
+            </div>
+                <div class="week-day-label" *ngFor="let weekDay of weekDays; let index = index">
+                <co-icon *ngIf="index === 0 && showBackButton" class="pointer-hover no-user-select sub-unit-icon dark" [iconData]="iconCacheService.getIcon(icons.ArrowPointLeft)" (click)="subUnit()"></co-icon>
+                <div class="weekday-description" [textContent]="weekDay.weekdayShort"></div>
+                <co-icon *ngIf="index === 6" class="pointer-hover no-user-select add-unit-icon dark" [iconData]="iconCacheService.getIcon(icons.ArrowPointRight)" (click)="addUnit()"></co-icon>
+            </div>
+        </div>
+    `,
+  encapsulation: ViewEncapsulation.None
+})
+export class AgendaHeaderComponent implements OnInit, OnDestroy, AfterContentChecked {
+    public readonly icons: typeof Icon = Icon;
+    public readonly viewTypes: typeof CalendarView = CalendarView;
+
+    private readonly scrollbarWidth: number = 15;
+
+    @Input()
+    public set selectedDate(value: Date) {
+        this._selectedDate = new Date(value);
+        this._prepareHeaderData();
+    }
+
+    public get selectedDate(): Date {
+        return this._selectedDate;
+    }
+
+    @Input()
+    public view: CalendarView = CalendarView.WeekSelectView;
+
+    @Input()
+    public set firstAvailableDate(value: Date) {
+        if (value) {
+            this._firstAvailableDate = new Date(value);
+            this._prepareHeaderData();
+        }
+    }
+
+    public get firstAvailableDate(): Date {
+        return this._firstAvailableDate;
+    }
+
+    @Input()
+    public set eventsPerDay(value: AgendaEventPerDay[]) {
+        this._eventsPerDay = value;
+        this._prepareHeaderData();
+    }
+
+    @Output()
+    public viewChange: EventEmitter<CalendarView> = new EventEmitter<CalendarView>();
+
+    @Output()
+    public selectedDateChange: EventEmitter<Date> = new EventEmitter<Date>();
+
+    @Output()
+    public rangeChange: EventEmitter<Date> = new EventEmitter<Date>();
+
+    public weekDays: Weekday[] = [];
+    public day: Day = NULL_DAY;
+    public showBackButton: boolean = true;
+
+    private _selectedDate: Date;
+    private _firstAvailableDate: Date;
+    private _eventsPerDay: AgendaEventPerDay[] = [];
+
+    constructor(
+        @Inject(LOCALE_ID) private readonly _locale: LanguageCode,
+        private _elementRef: ElementRef,
+        private _renderer: Renderer2,
+        private _ngZone: NgZone,
+        public iconCacheService: IconCacheService
+    ) {
+    }
+
+    ngOnDestroy(): void {
+        window.removeEventListener("resize", this._onResize);
+        this._elementRef = undefined;
+    }
+
+    ngOnInit(): void {
+        this._ngZone.runOutsideAngular(() => {
+            window.addEventListener("resize", this._onResize);
+        });
+    }
+
+    ngAfterContentChecked(): void {
+        this._resizeHost();
+    }
+
+    public subUnit(): void {
+        if (this.selectedDate) {
+            const newDate: Date = new Date(this.selectedDate);
+            switch (this.view) {
+                case CalendarView.DayView:
+                    newDate.setDate(this.selectedDate.getDate() - 1);
+                    break;
+                case CalendarView.WeekView:
+                    newDate.setDate(this.selectedDate.getDate() - 7);
+                    break;
+                case CalendarView.WeekSelectView:
+                    newDate.setDate(this.selectedDate.getDate() - 7);
+                    break;
+                case CalendarView.MonthView:
+                    newDate.setMonth(this.selectedDate.getMonth() - 1);
+                    break;
+            }
+            this.selectedDate = newDate;
+            this.rangeChange.emit(this.selectedDate);
+        }
+    }
+
+    public addUnit(): void {
+        if (this.selectedDate) {
+            const newDate: Date = new Date(this.selectedDate);
+            switch (this.view) {
+                case CalendarView.DayView:
+                    newDate.setDate(this.selectedDate.getDate() + 1);
+                    break;
+                case CalendarView.WeekView:
+                    newDate.setDate(this.selectedDate.getDate() + 7);
+                    break;
+                case CalendarView.WeekSelectView:
+                    newDate.setDate(this.selectedDate.getDate() + 7);
+                    break;
+                case CalendarView.MonthView:
+                    newDate.setMonth(this.selectedDate.getMonth() + 1);
+                    break;
+            }
+            this.selectedDate = newDate;
+            this.rangeChange.emit(this.selectedDate);
+        }
+    }
+
+    public setUnit(weekDay: Weekday): void {
+        this.selectedDate = weekDay.date;
+        this.selectedDateChange.emit(this.selectedDate);
+    }
+
+    public changeTheView(view: CalendarView): void {
+        this.view = view;
+        this.viewChange.emit(view);
+        this._prepareHeaderData();
+    }
+
+    private _onResize: EventListener = async (): Promise<void> => {
+        this._resizeHost();
+    }
+
+    /**
+     * Need to resize the host component to size it's fixed positioned child through css
+     */
+    private _resizeHost(): void {
+        if (this._elementRef) {
+            this._renderer.setStyle(
+                this._elementRef.nativeElement, "width", this._elementRef.nativeElement.parentElement.clientWidth - this.scrollbarWidth + "px");
+        }
+    }
+
+    private _prepareHeaderData(): void {
+        if (this.selectedDate) {
+            switch (this.view) {
+                case CalendarView.DayView:
+                    const day: Day = new Day();
+                    day.date = new Date(this.selectedDate);
+                    const options: any = { year: "numeric", month: "long", day: "numeric" };
+                    day.description = this.selectedDate.toLocaleDateString(this._locale, options);
+                    this.day = day;
+                    break;
+                case CalendarView.WeekView:
+                    const weekView: Week = CalendarUtils.GetDaysOfWeek(this.selectedDate);
+                    this.weekDays = weekView.weekDays;
+                    if (this.firstAvailableDate) {
+                        this.showBackButton = this.weekDays.find(wd => DateUtils.DatesEqual(this.firstAvailableDate, wd.date)) === undefined;
+                    }
+                    break;
+                case CalendarView.WeekSelectView:
+                    const weekSelectView: Week = CalendarUtils.GetDaysOfWeek(this.selectedDate);
+                    this.weekDays = weekSelectView.weekDays;
+                    this.weekDays.forEach((wd: Weekday) => {
+                        const evPerDay: AgendaEventPerDay = this._eventsPerDay && this._eventsPerDay.length > 0 ? this._eventsPerDay.find(e => DateUtils.DatesEqual(e.date, wd.date)) : null;
+                        if (evPerDay) {
+                            wd.events = evPerDay.events;
+                        } else {
+                            wd.weekdaySelected = false;
+                        }
+                    });
+                    if (this.firstAvailableDate) {
+                        this.showBackButton = this.weekDays.find(wd => DateUtils.DatesEqual(this.firstAvailableDate, wd.date)) === undefined;
+                    }
+                    break;
+                case CalendarView.MonthView:
+                    const weekOfMonth: Week = CalendarUtils.GetDaysOfWeek(this.selectedDate);
+                    this.weekDays = weekOfMonth.weekDays;
+                    if (this.firstAvailableDate) {
+                        this.showBackButton = this.weekDays.find(wd => DateUtils.DatesEqual(this.firstAvailableDate, wd.date)) === undefined;
+                    }
+                    break;
+            }
+        }
+    }
+}

package/projects/sharedcomponents/src/lib/components/date-planning/component/agenda/agenda-hour-cell.component.ts

@@ -0,0 +1,38 @@
+import {Component, Input, ViewEncapsulation} from "@angular/core";
+
+@Component({
+    selector: "agenda-hour-cell",
+    template: `
+        <div class="row-per-half-hour">
+            <agenda-half-hour-cell [date]="date" [showLabel]="onlyLabels && !noLabels"></agenda-half-hour-cell>
+            <agenda-half-hour-cell [date]="datePlushalfHour"></agenda-half-hour-cell>
+        </div>
+    `,
+  encapsulation: ViewEncapsulation.None
+})
+export class AgendaHourCellComponent {
+    @Input()
+    public onlyLabels: boolean = false;
+
+    @Input()
+    public noLabels: boolean = false;
+
+    @Input()
+    public set date(value: Date) {
+        this._date = value;
+        this._setNextHalfHour();
+    }
+
+    public get date(): Date {
+        return this._date;
+    }
+
+    public datePlushalfHour: Date;
+
+    private _date: Date;
+
+    private _setNextHalfHour(): void {
+        this.datePlushalfHour = new Date(this._date);
+        this.datePlushalfHour.setMinutes(this.datePlushalfHour.getMinutes() + 30);
+    }
+}

package/projects/sharedcomponents/src/lib/components/date-planning/component/agenda/agenda-hour-view-labels.component.ts

@@ -0,0 +1,50 @@
+import {Component, Input, ViewEncapsulation} from "@angular/core";
+
+@Component({
+    selector: "agenda-hour-view-labels",
+    template: `
+        <div class="row-per-hour" *ngFor="let dateByTheHour of datesByTheHour">
+            <div>
+                <agenda-hour-cell [date]="dateByTheHour" onlyLabels [noLabels]="noLabels"></agenda-hour-cell>
+            </div>
+        </div>
+    `,
+  encapsulation: ViewEncapsulation.None
+})
+export class AgendaHourViewLabelsComponent {
+
+    @Input()
+    public set date(value: Date) {
+        this._date = new Date(value);
+        this._date.setDate(1);
+        this._date.setMonth(1);
+        this._date.setFullYear(1);
+        this._prepareViewData();
+    }
+
+    @Input()
+    public noLabels: boolean = false;
+
+    public readonly datesByTheHour: Date[] = [];
+
+    public get date(): Date {
+        return this._date;
+    }
+
+    private _date: Date = new Date();
+
+    // fixme remove ctrl + c, ctrl + v code duplication with AgendaHourViewComponent._prepareViewData()
+    private _prepareViewData(): void {
+        this.datesByTheHour.length = 0;
+        if (this.date) {
+            let newDate: Date = new Date(this.date);
+            newDate.setHours(0, 0, 0, 0);
+            this.datesByTheHour.push(newDate);
+            for (let i: number = 0; i < 23; i++) {
+                newDate = new Date(newDate);
+                newDate.setHours(newDate.getHours() + 1);
+                this.datesByTheHour.push(newDate);
+            }
+        }
+    }
+}

package/projects/sharedcomponents/src/lib/components/date-planning/component/agenda/agenda-hour-view.component.ts

@@ -0,0 +1,46 @@
+import {Component, Input, ViewEncapsulation} from "@angular/core";
+
+@Component({
+    selector: "agenda-hour-view",
+    template: `
+        <div class="row-per-hour" *ngFor="let dateByTheHour of datesByTheHour">
+            <div fxLayout="row">
+                <agenda-hour-cell [date]="dateByTheHour"></agenda-hour-cell>
+            </div>
+        </div>
+        <ng-content></ng-content>
+    `,
+  encapsulation: ViewEncapsulation.None
+})
+export class AgendaHourViewComponent {
+
+    @Input()
+    public set date(value: Date) {
+        this._date = new Date(value);
+        this._prepareViewData();
+    }
+
+    public readonly datesByTheHour: Date[] = [];
+
+    public get date(): Date {
+        return this._date;
+    }
+
+    private _date: Date = new Date();
+
+    // fixme remove ctrl + c, ctrl + v code duplication with AgendaHourViewLabelsComponent._prepareViewData()
+    private _prepareViewData(): void {
+        this.datesByTheHour.length = 0;
+        if (this.date) {
+            let newDate: Date = new Date(this.date);
+            newDate.setHours(0, 0, 0, 0);
+            this.datesByTheHour.push(newDate);
+            for (let i: number = 0; i < 23; i++) {
+                newDate = new Date(newDate);
+                newDate.setHours(newDate.getHours() + 1);
+                this.datesByTheHour.push(newDate);
+            }
+        }
+    }
+
+}

package/projects/sharedcomponents/src/lib/components/date-planning/component/agenda/agenda-month-view.component.ts

@@ -0,0 +1,65 @@
+import {Component, ViewEncapsulation} from "@angular/core";
+import { AgendaBaseViewComponent } from "./agenda-base-view.component";
+import {NULL_MONTH} from "../../../../model/agenda-null-objects";
+import {Month} from "../../../../model/month.model";
+import {Weekday} from "../../../../model/weekday.model";
+import {Week} from "../../../../model/week.model";
+import {DateUtils} from "../../../../utils/date-utils";
+import {CalendarUtils} from "../../../../utils/calendar.utils";
+
+
+@Component({
+    selector: "agenda-month-view",
+    template: `
+        <div class="view-wrapper">
+            <div class="hour-view-labels-wrapper"></div>
+            <div class="weeks">
+                <div class="week" *ngFor="let week of weeks" fxLayout="row">
+                    <div class="week-day" *ngFor="let weekDay of week.weekDays" [class.not-in-month]="!weekDay.inView">
+                        <div class="day" [textContent]="weekDay.weekdayDay"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `,
+  encapsulation: ViewEncapsulation.None
+})
+export class AgendaMonthViewComponent extends AgendaBaseViewComponent {
+
+    public month: Month = NULL_MONTH;
+
+    public firstWeekDays: Weekday[] = [];
+
+    public weeks: Week[] = [];
+
+    protected prepareViewData(): void {
+        const month: Month = new Month();
+        if (this.selectedDate) {
+            const day: Date = DateUtils.GetFirstDayOfMonth(this.selectedDate);
+            const endOfMonth: Date = DateUtils.GetLastDayOfMonth(this.selectedDate);
+            let oneMoreIteration: boolean = false;
+            let continueLoop: boolean = true;
+
+            while (continueLoop) {
+                if (oneMoreIteration) {
+                    continueLoop = false;
+                }
+                const week: Week = CalendarUtils.GetDaysOfWeek(day);
+                const len: number = week.weekDays.length;
+                for (let i: number = 0; i < len; i++) {
+                    week.weekDays[i].events = this.getEventsFromDate(week.weekDays[i].date);
+                    week.weekDays[i].inView = week.weekDays[i].date.getMonth() === this.selectedDate.getMonth();
+                }
+                month.weeks.push(week);
+                day.setDate(day.getDate() + 7);
+                if (day.getTime() >= endOfMonth.getTime()) {
+                    oneMoreIteration = true;
+                }
+            }
+            this.month = month;
+            this.firstWeekDays = this.month.firstWeek.weekDays;
+            this.weeks = month.weeks;
+        }
+    }
+
+}

package/projects/sharedcomponents/src/lib/components/date-planning/component/agenda/agenda-view.component.ts

@@ -0,0 +1,38 @@
+import {Component, EventEmitter, Input, Output, ViewEncapsulation} from "@angular/core";
+import {CalendarView} from "../../../../enum/calendar-view.enum";
+import {AgendaEvent} from "../../../../model/agenda-event.model";
+import {AgendaEventPerDay} from "../../../../model/agenda-event-per-day.model";
+
+@Component({
+    selector: "agenda-view",
+    template: `
+        <div class="view-wrapper mini-scrollbar" [ngSwitch]="view">
+            <agenda-day-view *ngSwitchCase="viewTypes.DayView"
+                [selectedDate]="selectedDate" [eventsPerDay]="eventsPerDay" (eventChecked)="eventChecked.emit($event)"></agenda-day-view>
+            <agenda-week-view *ngSwitchCase="viewTypes.WeekView"
+                [view]="view" [selectedDate]="selectedDate" [eventsPerDay]="eventsPerDay" (eventChecked)="eventChecked.emit($event)"></agenda-week-view>
+            <agenda-week-select-view *ngSwitchCase="viewTypes.WeekSelectView"
+                [view]="view" [selectedDate]="selectedDate" [eventsPerDay]="eventsPerDay" (eventChecked)="eventChecked.emit($event)"></agenda-week-select-view>
+            <agenda-month-view *ngSwitchCase="viewTypes.MonthView"
+                [selectedDate]="selectedDate" [eventsPerDay]="eventsPerDay" (eventChecked)="eventChecked.emit($event)"></agenda-month-view>
+        </div>
+    `,
+  encapsulation: ViewEncapsulation.None
+})
+export class AgendaViewComponent {
+
+    @Input()
+    public view: CalendarView = CalendarView.WeekView;
+
+    @Input()
+    public selectedDate: Date;
+
+    @Input()
+    public eventsPerDay: AgendaEventPerDay[] = [];
+
+    @Output()
+    public readonly eventChecked: EventEmitter<AgendaEvent> = new EventEmitter<AgendaEvent>();
+
+    public readonly viewTypes: typeof CalendarView = CalendarView;
+
+}

package/projects/sharedcomponents/src/lib/components/date-planning/component/agenda/agenda-week-select-view.component.ts

@@ -0,0 +1,63 @@
+import {Component, Input, ViewEncapsulation} from "@angular/core";
+import {AgendaBaseViewComponent} from "./agenda-base-view.component";
+import {NULL_WEEK} from "../../../../model/agenda-null-objects";
+import {CalendarUtils} from "../../../../utils/calendar.utils";
+import {Icon} from "../../../../enum/icon.enum";
+import {CalendarView} from "../../../../enum/calendar-view.enum";
+import {Week} from "../../../../model/week.model";
+
+@Component({
+    selector: "agenda-week-select-view",
+    template: `
+        <div class="view-wrapper week-select-view">
+            <div class="week-day" *ngFor="let weekDay of week.weekDays">
+                <div class="week-select-container" *ngIf="weekDay.weekdaySelected">
+                    <div class="week-select-left">
+                        <h3 [textContent]="'AGENDA_CHOOSE_DELIVERY_PERIOD'"></h3>
+                        <div class="week-select-list mini-scrollbar">
+                            <agenda-events
+                                    [halfHourHeight]="40"
+                                    [events]="weekDay.events"
+                                    (eventChecked)="eventChecked.emit($event)"
+                                    [view]="view"
+                            ></agenda-events>
+                            <div class="no-events-banner" *ngIf="weekDay.events.length === 0">
+                                <p [textContent]="'AGENDA_NO_PERIODS_AVAILABLE'"></p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="week-select-right">
+                        <h3 [textContent]="'AGENDA_FOR_EVERY_PERIOD'"></h3>
+                        <ul>
+                            <li><co-icon [iconData]="iconCacheService.getIcon(icons.CheckRound)" class="small action-color moment-icon"></co-icon><span [textContent]="'AGENDA_FOR_EVERY_PERIOD_REASON1'"></span></li>
+                            <li><co-icon [iconData]="iconCacheService.getIcon(icons.CheckRound)" class="small action-color moment-icon"></co-icon><span [textContent]="'AGENDA_FOR_EVERY_PERIOD_REASON2'"></span></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `,
+  encapsulation: ViewEncapsulation.None
+})
+export class AgendaWeekSelectViewComponent extends AgendaBaseViewComponent {
+
+    @Input()
+    public view: CalendarView = CalendarView.WeekSelectView;
+
+    public week: Week = NULL_WEEK;
+
+    public readonly icons: typeof Icon = Icon;
+
+    protected prepareViewData(): void {
+        if (this.selectedDate) {
+            // get the events
+            const week: Week = CalendarUtils.GetDaysOfWeek(this.selectedDate);
+            const len: number = week.weekDays.length;
+            for (let i: number = 0; i < len; i++) {
+                week.weekDays[i].events = this.getEventsFromDate(week.weekDays[i].date);
+            }
+            this.week = week;
+        }
+    }
+
+}

package/projects/sharedcomponents/src/lib/components/date-planning/component/agenda/agenda-week-view.component.ts

@@ -0,0 +1,46 @@
+import {Component, Input, ViewEncapsulation} from "@angular/core";
+import {NULL_WEEK} from "../../../../model/agenda-null-objects";
+import {CalendarUtils} from "../../../../utils/calendar.utils";
+import {CalendarView} from "../../../../enum/calendar-view.enum";
+import {Week} from "../../../../model/week.model";
+import {AgendaBaseViewComponent} from "./agenda-base-view.component";
+
+
+@Component({
+    selector: "agenda-week-view",
+    template: `
+        <div class="view-wrapper">
+            <agenda-hour-view-labels [date]="selectedDate"></agenda-hour-view-labels>
+            <div class="week-day" *ngFor="let weekDay of week.weekDays">
+                <agenda-hour-view [date]="weekDay.date">
+                    <agenda-events
+                        [halfHourHeight]="40"
+                        [events]="weekDay.events"
+                        (eventChecked)="eventChecked.emit($event)"
+                        [view]="view"
+                ></agenda-events>
+                </agenda-hour-view>
+            </div>
+        </div>
+    `,
+  encapsulation: ViewEncapsulation.None
+})
+export class AgendaWeekViewComponent extends AgendaBaseViewComponent /*implements OnInit, OnDestroy*/ {
+
+    @Input()
+    public view: CalendarView = CalendarView.WeekView;
+
+    public week: Week = NULL_WEEK;
+
+    protected prepareViewData(): void {
+        if (this.selectedDate) {
+            // get the events
+            const week: Week = CalendarUtils.GetDaysOfWeek(this.selectedDate);
+            const len: number = week.weekDays.length;
+            for (let i: number = 0; i < len; i++) {
+                week.weekDays[i].events = this.getEventsFromDate(week.weekDays[i].date);
+            }
+            this.week = week;
+        }
+    }
+}