在Angular5中自定义日历？

<div class="calendar">
  <div class="header">
    <button (click)="prevMonth()">Previous</button>
    <h2>{{ currentMonth }}</h2>
    <button (click)="nextMonth()">Next</button>
  </div>
  <div class="weekdays">
    <div *ngFor="let day of weekdays" class="weekday">{{ day }}</div>
  </div>
  <div class="days">
    <div *ngFor="let date of dates" class="day" [ngClass]="{ 'selected': date === selectedDate }" (click)="selectDate(date)">{{ date }}</div>
  </div>
</div>

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'custom-calendar',
  templateUrl: './custom-calendar.component.html',
  styleUrls: ['./custom-calendar.component.css']
})
export class CustomCalendarComponent {
  currentMonth: string;
  weekdays: string[];
  dates: number[];
  selectedDate: number;

  constructor() {
    this.currentMonth = 'January';
    this.weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    this.dates = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31];
    this.selectedDate = null;
  }

  prevMonth() {
    // Logic to go to the previous month
  }

  nextMonth() {
    // Logic to go to the next month
  }

  selectDate(date: number) {
    this.selectedDate = date;
    // Emit the dateSelected event
    this.dateSelected.emit(date);
  }
}

<custom-calendar (dateSelected)="handleDateSelected($event)"></custom-calendar>
<p>Selected Date: {{ selectedDate }}</p>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  selectedDate: number;

  handleDateSelected(date: number) {
    this.selectedDate = date;
  }
}