Work in progress betreft het tonen van afspraken naast elkaar

src/app/components/week-view/week-view.component.html

@@ -0,0 +1,34 @@
+<div class="calendar-container">
+  <div class="calendar-header">
+    <div class="time-column-header"></div>
+    <div *ngFor="let day of days" class="day-header">
+      {{ getDayLabel(day) }}
+    </div>
+  </div>
+
+  <div class="calendar-body">
+    <div class="time-column">
+      <div *ngFor="let hour of hours" class="hour-label">{{ hour }}</div>
+    </div>
+    <div class="week-grid">
+
+
+      <div *ngFor="let day of days" class="day-column">
+        <div *ngFor="let hour of hours" class="hour-cell">
+          <div
+            class="appointments-wrapper"
+            [ngClass]="{ 'multiple': searchAppointments(day, hour).length > 1 }">
+
+            <component-appointment
+              *ngFor="let appointment of searchAppointments(day, hour)"
+              [appointment]="appointment"
+              size="medium"
+              (onClick)="emitAppointment($event)">
+            </component-appointment>
+
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>