Work in progress betreft het tonen van afspraken naast elkaar

src/app/components/datepicker/datepicker.component.ts

@@ -0,0 +1,98 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {DatePipe, NgForOf, NgIf} from '@angular/common';
+
+@Component({
+  selector: 'datepicker',
+  imports: [
+    NgForOf,
+    DatePipe,
+    NgIf
+  ],
+  templateUrl: './datepicker.component.html',
+  styleUrl: './datepicker.component.scss'
+})
+export class DatepickerComponent implements OnInit {
+  @Input() currentDate = new Date(); // startmaand
+  secondDate = new Date();  // tweede maand
+
+  calendars: any[][] = [[], []];
+  selectedDate: Date | null = null;
+  @Output() onSelectedDate: EventEmitter<Date> = new EventEmitter();
+
+  ngOnInit() {
+    this.updateSecondDate();
+    this.generateCalendars();
+  }
+
+  updateSecondDate() {
+    this.secondDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + 1, 1);
+  }
+
+  generateCalendars() {
+    this.calendars[0] = this.generateCalendar(this.currentDate);
+    this.calendars[1] = this.generateCalendar(this.secondDate);
+  }
+
+  generateCalendar(date: Date) {
+    const year = date.getFullYear();
+    const month = date.getMonth();
+
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+
+    let day = new Date(firstDay);
+    day.setDate(day.getDate() - ((day.getDay() + 6) % 7)); // maandag starten
+
+    const calendar: any[] = [];
+
+    while (day <= lastDay || day.getDay() !== 1) {
+      const week = {
+        number: this.getWeekNumber(day),
+        days: []
+      };
+
+      for (let i = 0; i < 7; i++) {
+        week.days.push(new Date(day));
+        day.setDate(day.getDate() + 1);
+      }
+
+      calendar.push(week);
+    }
+
+    return calendar;
+  }
+
+  getWeekNumber(d: Date): number {
+    const date = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
+    const dayNum = date.getUTCDay() || 7;
+    date.setUTCDate(date.getUTCDate() + 4 - dayNum);
+    const yearStart = new Date(Date.UTC(date.getUTCFullYear(), 0, 1));
+    return Math.ceil((((+date - +yearStart) / 86400000) + 1) / 7);
+  }
+
+  selectDate(date: Date) {
+    this.selectedDate = date;
+    this.onSelectedDate.emit(date);
+  }
+
+  isToday(date: Date): boolean {
+    const today = new Date();
+    return date.toDateString() === today.toDateString();
+  }
+
+  isSelected(date: Date): boolean {
+    return this.selectedDate?.toDateString() === date.toDateString();
+  }
+
+  goToPreviousMonth() {
+    this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() - 1, 1);
+    this.updateSecondDate();
+    this.generateCalendars();
+  }
+
+  goToNextMonth() {
+    this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + 1, 1);
+    this.updateSecondDate();
+    this.generateCalendars();
+  }
+}