git init v2

src/app/pages/agenda/agenda.component.html

@@ -0,0 +1,84 @@
+<div class="container">
+  <div class="heading">
+    <button
+      appearance="primary"
+      iconStart="@tui.chevron-left"
+      size="m"
+      tuiIconButton
+      (click)="previousDay()"
+      type="button">
+    </button>
+    <h1 class="date" (click)="toggleCalendar()">{{ getDate() }}</h1>
+    <button
+      appearance="primary"
+      iconStart="@tui.chevron-right"
+      size="m"
+      tuiIconButton
+      (click)="nextDay()"
+      type="button">
+    </button>
+  </div>
+  <div class="calendar" *ngIf="showCalendar">
+    <tui-calendar
+      [value]="value"
+      (dayClick)="onDayClick($event)"
+    />
+  </div>
+  <div class="toolbar">
+    <button
+      *ngIf="today.getDate() != selectedDate.getDate()"
+      appearance="secondary"
+      size="m"
+      tuiButton
+      (click)="setToday()"
+      type="button">
+      Vandaag
+    </button>
+    <button
+      appearance="secondary"
+      size="m"
+      tuiButton
+      (click)="isModalOpen = true"
+      type="button">
+      <tui-icon
+        icon="@tui.plus"
+        [style.height.rem]="1"
+      />
+      Afspraak maken
+    </button>
+  </div>
+  <div class="content">
+    <div class="agenda-container">
+      <div *ngFor="let hour of timeSlots" class="time-slot">
+        <span class="time">{{ hour.toString().padStart(2, '0') }}:00</span>
+
+        <div *ngFor="let appointment of getAppointmentsForHour(hour)"
+             class="appointment"
+             (click)="selectAppointment(appointment)"
+             [ngClass]="{ 'large': (getAppointmentHeight(appointment) > 50) }"
+             [ngStyle]="getInlineStyles(appointment)">
+
+          <strong>{{ appointment.title }}</strong>
+          <span class="appointment-time" *ngIf="appointment.customer">
+            <tui-icon icon="@tui.user" [style.font-size.rem]="1"></tui-icon>
+            {{ appointment.customer.firstName }} {{ appointment.customer.lastName }}</span>
+          <span class="appointment-time">
+            <tui-icon icon="@tui.clock" [style.font-size.rem]="1"></tui-icon>
+            {{ getFormattedTime(appointment.startHour, appointment.startMinute) }}
+            - {{ getFormattedTime(appointment.endHour, appointment.endMinute) }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<app-modal title="Nieuwe afspraak" (close)="closeNewItemModal()" *ngIf="isModalOpen">
+  <app-new-item [testForm]="appointmentForm" (appointmentAddedEvent)="registerAppointment($event)"></app-new-item>
+</app-modal>
+
+<app-modal title="{{selectedAppointment.title}}" (close)="selectedAppointment = undefined"
+           *ngIf="selectedAppointment != undefined">
+  <app-details [appointment]="selectedAppointment" (appointmentDeleted)="appointmentIsDeleted($event)"
+               (appointmentEdited)="appointmentIsEdited($event)"></app-details>
+</app-modal>