Event Calender using Angular

//  src/app/components/calendar/calendar.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MonthViewComponent } from '../month-view/month-view.component';

@Component({
    selector: 'app-calendar',
    standalone: true,
    imports: [CommonModule, MonthViewComponent],
    templateUrl: './calendar.component.html',
    styleUrls: ['./calendar.component.css'],
})
export class CalendarComponent {
    currentDate = new Date();

    changeMonth(offset: number) {
        this.currentDate = new Date(
            this.currentDate.setMonth(this.currentDate.getMonth() + offset)
        );
    }
}

//  src/app/components/event-list/event-list.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
    selector: 'app-event-list',
    standalone: true,
    imports: [CommonModule],
    templateUrl: './event-list.component.html',
    styleUrls: ['./event-list.component.css'],
})
export class EventListComponent {
    @Input() events!: string[];
    @Output() removeEvent = new EventEmitter<string>();

    onRemoveEvent(event: string) {
        this.removeEvent.emit(event);
    }
}

//src/app/components/month-view/month-view.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { EventListComponent } from '../event-list/event-list.component';
import { EventService } from '../../services/event.service';

@Component({
    selector: 'app-month-view',
    standalone: true,
    imports: [CommonModule, EventListComponent],
    templateUrl: './month-view.component.html',
    styleUrls: ['./month-view.component.css'],
})
export class MonthViewComponent implements OnInit {
    @Input() date!: Date;
    days: Date[] = [];
    events: { [key: string]: string[] } = {};
    selectedDate: Date | null = null;

    constructor(private eventService: EventService) { }

    ngOnInit() {
        this.days = this.getDaysInMonth();
        this.loadEvents();
    }

    ngOnChanges() {
        this.days = this.getDaysInMonth();
        this.loadEvents();
    }
    selectDate(day: Date) {
        this.selectedDate = day;
    }
    getDaysInMonth(): Date[] {
        const days = [];
        const year = this.date.getFullYear();
        const month = this.date.getMonth();
        const numDays = new Date(year, month + 1, 0).getDate();

        for (let i = 1; i <= numDays; i++) {
            days.push(new Date(year, month, i));
        }

        return days;
    }

    loadEvents() {
        this.days.forEach((day) => {
            const dateString = day.toISOString().split('T')[0];
            this.events[dateString] = this.eventService.getEvents(dateString);
        });
    }

    addEvent(day: Date) {
        const event = prompt('Enter event:');
        if (event) {
            const dateString = day.toISOString().split('T')[0];
            this.eventService.addEvent(dateString, event);
            this.loadEvents();
        }
    }

    removeEvent(day: Date, event: string) {
        const dateString = day.toISOString().split('T')[0];
        this.eventService.removeEvent(dateString, event);
        this.loadEvents();
    }
    checkEvent(day: Date) {
        const dateString = day.toISOString().split('T')[0];
        const arr = this.eventService.getEvents(dateString);
        return arr.length;
    }
}

//src/app/services/event.service.ts
import { Injectable } from '@angular/core';

@Injectable({
    providedIn: 'root',
})
export class EventService {
    private storageKey = 'events';

    constructor() {
        this.loadEvents();
    }

    private events: { [key: string]: string[] } = {};

    private saveEvents() {
        localStorage.setItem(this.storageKey, JSON.stringify(this.events));
    }

    private loadEvents() {
        const storedEvents = localStorage.getItem(this.storageKey);
        if (storedEvents) {
            this.events = JSON.parse(storedEvents);
        }
    }

    addEvent(date: string, event: string) {
        if (!this.events[date]) {
            this.events[date] = [];
        }
        this.events[date].push(event);
        this.saveEvents();
    }

    getEvents(date: string): string[] {
        return this.events[date] || [];
    }

    removeEvent(date: string, event: string) {
        if (this.events[date]) {
            this.events[date] = this.events[date].filter((e) => e !== event);
            if (this.events[date].length === 0) {
                delete this.events[date];
            }
            this.saveEvents();
        }
    }
}

// src/app/app.component.ts
import { Component } from '@angular/core';
import { CalendarComponent } from './components/calendar/calendar.component';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [CalendarComponent],
    template: '<app-calendar></app-calendar>',
    styleUrls: ['./app.component.css'],
})
export class AppComponent { }