@colijnit/sharedcomponents 261.1.0 → 261.1.2

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

@@ -0,0 +1,405 @@
+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 day-view" *ngIf="view === viewTypes.DayView">
+        <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 days-around" *ngIf="view === viewTypes.DaysAround">
+        <div class="month-description" *ngIf="weekDays?.length > 0">
+          {{ (selectedDate | date: 'MMMM') + ' ' + selectedDate.getFullYear() + ' ' + ('WEEK' | sharedLocalize)+ ': ' +  getWeekNumber(selectedDate) }}
+        </div>
+        <div class="week-day-label days-around" *ngFor="let weekDay of weekDays; let index = index"
+             [class.selected]="weekDay.weekdaySelected" (click)="setUnit(weekDay)">
+          <co-icon *ngIf="showBackButton && index === 0" class="pointer-hover no-user-select sub-unit-icon dark"
+                   [iconData]="iconCacheService.getIcon(icons.ArrowPointLeft)" (click)="subUnit()"></co-icon>
+          <div class="weekday-value day"
+               [textContent]="capitalizeString(weekDay.weekdayShort)"></div>
+          <div class="weekday-value date"
+               [textContent]="weekDay.weekdayDay"></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 three-days-view" *ngIf="view === viewTypes.ThreeDaysView">
+        <div class="hour-label-placeholder" *ngIf="viewSelection">
+          <view-select [selectedView]="view" (selectedViewChange)="changeTheView($event)"></view-select>
+        </div>
+        <div class="week-view-header-wrapper">
+          <div class="week-day-label" *ngFor="let weekDay of weekDays; let index = index"
+               [class.selected]="weekDay.weekdaySelected">
+            <co-icon *ngIf="showBackButton && index === 0" class="pointer-hover no-user-select sub-unit-icon dark"
+                     [iconData]="iconCacheService.getIcon(icons.ArrowPointLeft)" (click)="subUnit()"></co-icon>
+            <div *ngIf="weekDay.newMonth"
+                 class="month-description">
+              <span [textContent]="(selectedDate | date: 'MMMM') + ' ' + selectedDate.getFullYear() + ' ' + ('WEEK' | sharedLocalize)+ ': ' +  getWeekNumber(selectedDate) "> </span>
+            </div>
+            <div class="weekday-value"
+                 [textContent]="capitalizeString(weekDay.weekdayLong) + ' ' + weekDay.weekdayDay + ' ' + capitalizeString(weekDay.weekdayMonthLong) + ' ' + weekDay.weekdayYear "></div>
+            <co-icon *ngIf="index === 2" class="pointer-hover no-user-select add-unit-icon dark"
+                     [iconData]="iconCacheService.getIcon(icons.ArrowPointRight)" (click)="addUnit()"></co-icon>
+
+          </div>
+        </div>
+
+      </div>
+      <div class="agenda-header-wrapper week-view" *ngIf="view === viewTypes.WeekView">
+        <div class="hour-label-placeholder" *ngIf="viewSelection">
+          <view-select [selectedView]="view" (selectedViewChange)="changeTheView($event)"></view-select>
+        </div>
+          <div class="week-view-header-wrapper">
+        <div class="week-day-label" *ngFor="let weekDay of weekDays; let index = index"
+             [class.selected]="weekDay.weekdaySelected" (click)="setUnit(weekDay)">
+          <co-icon *ngIf="showBackButton && index === 0" class="pointer-hover no-user-select sub-unit-icon dark"
+                   [iconData]="iconCacheService.getIcon(icons.ArrowPointLeft)" (click)="subUnit()"></co-icon>
+          <div *ngIf="weekDay.newMonth"
+               class="month-description">
+            <span [textContent]="(selectedDate | date: 'MMMM') + ' ' + selectedDate.getFullYear() + ' ' + ('WEEK' | sharedLocalize)+ ': ' +  getWeekNumber(selectedDate) "> </span>
+          </div>
+          <div class="weekday-value">
+                <span [textContent]="capitalizeString(weekDay.weekdayLong)"></span>
+                <span [textContent]="weekDay.weekdayDay + ' ' + capitalizeString(weekDay.weekdayMonthLong) + ' ' + weekDay.weekdayYear"></span>
+          </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>
+
+      <div class="agenda-header-wrapper work-week-view" *ngIf="view === viewTypes.WeekWorkView">
+        <div class="hour-label-placeholder" *ngIf="viewSelection">
+          <view-select [selectedView]="view" (selectedViewChange)="changeTheView($event)"></view-select>
+        </div>
+        <div class="week-view-header-wrapper">
+          <div class="week-day-label" *ngFor="let weekDay of weekDays; let index = index"
+               [class.selected]="weekDay.weekdaySelected">
+            <co-icon *ngIf="showBackButton && index === 0" class="pointer-hover no-user-select sub-unit-icon dark"
+                     [iconData]="iconCacheService.getIcon(icons.ArrowPointLeft)" (click)="subUnit()"></co-icon>
+            <div *ngIf="weekDay.newMonth"
+                 class="month-description">
+              <span [textContent]="(selectedDate | date: 'MMMM') + ' ' + selectedDate.getFullYear() + ' ' + ('WEEK' | sharedLocalize)+ ': ' +  getWeekNumber(selectedDate) "> </span>
+            </div>
+            <div class="weekday-value">
+              <span [textContent]="capitalizeString(weekDay.weekdayLong)"></span>
+              <span [textContent]="weekDay.weekdayDay + ' ' + capitalizeString(weekDay.weekdayMonthLong) + ' ' + weekDay.weekdayYear"></span>
+            </div>
+            <co-icon *ngIf="index === 4" class="pointer-hover no-user-select add-unit-icon dark"
+                     [iconData]="iconCacheService.getIcon(icons.ArrowPointRight)" (click)="addUnit()"></co-icon>
+
+          </div>
+        </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="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;
+
+    public today: Date = new Date();
+
+    @Input()
+    public set selectedDate(value: Date) {
+        this._selectedDate = new Date(value);
+        this._prepareHeaderData();
+    }
+
+    public get selectedDate(): Date {
+        return this._selectedDate;
+    }
+
+    @Input()
+    public view: CalendarView;
+
+    @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();
+    }
+
+    @Input()
+    public viewSelection: boolean;
+
+    @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.DaysAround:
+                  newDate.setDate(this.selectedDate.getDate() - 1);
+                  break;
+                case CalendarView.ThreeDaysView:
+                  newDate.setDate(this.selectedDate.getDate() - 3);
+                  break;
+                case CalendarView.WeekView:
+                    newDate.setDate(this.selectedDate.getDate() - 7);
+                    break;
+                case CalendarView.WeekWorkView:
+                    newDate.setDate(this.selectedDate.getDate() - 5);
+                    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.DaysAround:
+                    newDate.setDate(this.selectedDate.getDate() + 1);
+                    break;
+                case CalendarView.ThreeDaysView:
+                    newDate.setDate(this.selectedDate.getDate() + 3);
+                    break;
+                case CalendarView.WeekView:
+                    newDate.setDate(this.selectedDate.getDate() + 7);
+                    break;
+                case CalendarView.WeekWorkView:
+                    newDate.setDate(this.selectedDate.getDate() + 5);
+                    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.DaysAround:
+                    const weekAroundView: Week = CalendarUtils.GetDaysAround(this.selectedDate);
+                    this.weekDays = weekAroundView.weekDays;
+                    if (this.firstAvailableDate) {
+                      this.showBackButton = this.weekDays.find(wd => DateUtils.DatesEqual(this.firstAvailableDate, wd.date)) === undefined;
+                    }
+                    break;
+                case CalendarView.ThreeDaysView:
+                const threeDaysView: Week = CalendarUtils.GetThreeDays(this.selectedDate);
+                this.weekDays = threeDaysView.weekDays;
+                if (this.firstAvailableDate) {
+                  this.showBackButton = this.weekDays.find(wd => DateUtils.DatesEqual(this.firstAvailableDate, wd.date)) === undefined;
+                }
+                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.WeekWorkView:
+                const weekWorkView: Week = CalendarUtils.GetWorkDaysOfWeek(this.selectedDate);
+                this.weekDays = weekWorkView.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;
+            }
+        }
+    }
+
+    public capitalizeString(label: string): string {
+      return label[0].toUpperCase() + label.slice(1);
+    }
+
+    public getWeekNumber(date: Date): number {
+        // Copy date so we don’t modify the original
+        const target = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+
+        // ISO week starts on Monday (1) and ends on Sunday (7)
+        // Set to nearest Thursday: current date + 4 - current day number
+        const dayNum = target.getUTCDay() || 7;
+        target.setUTCDate(target.getUTCDate() + 4 - dayNum);
+
+        // Calculate week number
+        const yearStart = new Date(Date.UTC(target.getUTCFullYear(), 0, 1));
+        const weekNo = Math.ceil((((target.getTime() - yearStart.getTime()) / 86400000) + 1) / 7);
+
+        return weekNo;
+    }
+}

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-select-event.component.ts

@@ -0,0 +1,39 @@
+import {Component, EventEmitter, Input, Output} from "@angular/core";
+import {AgendaEvent} from "../../../../model/agenda-event.model";
+import {NULL_AGENDA_EVENT} from "../../../../model/agenda-null-objects";
+import {Icon} from "../../../../enum/icon.enum";
+import {IconCacheService} from "../../../../service/icon-cache.service";
+
+@Component({
+    selector: "agenda-select-event",
+    template: `
+        <div class="week-select-item" (click)="checkEvent($event)">
+            <co-icon [iconData]="iconCacheService.getIcon(icons.ArrowPointRight)" class="select-icon action-color" *ngIf="!event.checked"></co-icon>
+            <co-icon [iconData]="iconCacheService.getIcon(icons.ArrowPointRight)" class="select-icon action-color" *ngIf="event.checked"></co-icon>
+            <div class="moment-name">
+                <small>{{ event.date | date: 'EEEE d MMMM' | uppercase }}</small>
+                <h2>{{ event.description }}</h2>
+            </div>
+        </div>
+    `
+})
+export class AgendaSelectEventComponent {
+    public readonly icons: typeof Icon = Icon;
+
+    @Input()
+    public event: AgendaEvent = NULL_AGENDA_EVENT;
+
+    @Output()
+    public eventChecked: EventEmitter<AgendaEvent> = new EventEmitter<AgendaEvent>();
+
+    constructor(
+      public iconCacheService: IconCacheService
+    ) {
+    }
+
+    public checkEvent(event: MouseEvent): void {
+        this.event.checked = !this.event.checked;
+        this.eventChecked.emit(this.event);
+    }
+
+}