Enhance calendar functionality: display year in month header, highlight past dates, and update date selection logic

src/app/components/calendar-month/calendar-month.html

@@ -1,5 +1,5 @@
 <div class="calendar">
-	<h3>{{ getMonthName() }}</h3>
+	<h3>{{ getMonthName() }} {{ year }}</h3>
 	<div class="row header">
 		<p class="day">L</p>
 		<p class="day">M</p>
@@ -16,7 +16,7 @@
 			@if (day === null) {
 			<p class="day empty"></p>
 			} @else {
-			<p [class.start]="selectedDates.isStart(day)" [class.end]="selectedDates.isEnd(day)" [class.selected]="selectedDates.isSelected(day)"
+			<p [class.past]="day < getNow()" [class.start]="selectedDates.isStart(day)" [class.end]="selectedDates.isEnd(day)" [class.selected]="selectedDates.isSelected(day)"
 				[class]="selectedDates.getClasses(day)" class="day number" [matTooltip]="selectedDates.getTooltip(day)" [matTooltipShowDelay]="500">{{ day.getDate() }}</p>
 			}
 			}

src/app/components/calendar-month/calendar-month.scss

@@ -101,3 +101,7 @@
 .other {
 	background-color: #ff9b9b;
 }
+
+.past {
+	color: #b0b0b0;
+}

src/app/components/calendar-month/calendar-month.ts

@@ -16,6 +16,12 @@ export class CalendarMonth implements OnInit {
 	@Input({ required: true })
 	year!: number;
 
+	getNow(): Date {
+		const now = new Date();
+		now.setHours(0, 0, 0, 0);
+		return now;
+	}
+
 	currentMonth: Date = new Date();
 
 	weeksInAMonth: Month = [];

src/app/components/calendar-year/calendar-year.html

@@ -7,10 +7,10 @@
 		</div>
 	</div>
 	}
-	@for (month of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; track $index) {
+	@for (month of months; track $index) {
 	<mat-card>
 		<mat-card-content>
-			<app-calendar-month [monthIndex]="month" [year]="year" [selectedDates]="selectedDates"></app-calendar-month>
+			<app-calendar-month [monthIndex]="month" [year]="getYear(month)" [selectedDates]="selectedDates"></app-calendar-month>
 		</mat-card-content>
 	</mat-card>
 	}

src/app/components/calendar-year/calendar-year.ts

@@ -2,7 +2,7 @@ import { Component, OnInit, effect, signal } from '@angular/core';
 import { UserInputService } from '../../services/user-input-service';
 import { MatCard, MatCardContent } from '@angular/material/card';
 import { CalendarMonth } from "../calendar-month/calendar-month";
-import { CalendarService, SelectedDates, VacationsNumber } from '../../services/calendar-service';
+import { CalendarService, SelectedDates } from '../../services/calendar-service';
 import { CommonModule } from '@angular/common';
 
 @Component({
@@ -16,7 +16,7 @@ export class CalendarYear implements OnInit {
 
 	constructor(private userInput: UserInputService, private calendarService: CalendarService) {
 		effect(() => {
-			this.selectedDates = this.calendarService.getSelectedDatesForYear(this.year);
+			this.selectedDates = this.calendarService.getSelectedDatesForYear();
 			const vacationData = this.userInput.vacationNumberSignal();
 			this.isLoading.set(true);
 			// Simulate server-side calculation with a small delay
@@ -31,9 +31,15 @@ export class CalendarYear implements OnInit {
 
 	protected selectedDates: SelectedDates = new SelectedDates();
 
-	protected year: number = 2026;
+	getYear(monthIndex: number): number {
+		const offset = new Date().getMonth() <= monthIndex ? 0 : 1;
+		return new Date().getFullYear() + offset;
+	}
+
+	// months starting from actual date
+	protected months: number[] = Array.from({ length: 12 }, (_, i) => (new Date().getMonth() + i) % 12);
 
 	ngOnInit(): void {
-		this.selectedDates = this.calendarService.getSelectedDatesForYear(this.year);
+		this.selectedDates = this.calendarService.getSelectedDatesForYear();
 	}
 }