在角度日历视图中获取日期范围

npm install --save angular-calendar date-fns

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CalendarModule, DateAdapter } from 'angular-calendar';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CalendarModule.forRoot({
      provide: DateAdapter,
      useFactory: adapterFactory,
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component } from '@angular/core';
import { CalendarView } from 'angular-calendar';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <h1>{{ viewDate | date }}</h1>
      <button (click)="viewDate = viewDate | calendarPreviousView:view:locale">Previous</button>
      <button (click)="viewDate = viewDate | calendarNextView:view:locale">Next</button>
      <div *ngIf="view === CalendarView.Month">
        <p>Month start: {{ viewDate | startOfMonth | date }}</p>
        <p>Month end: {{ viewDate | endOfMonth | date }}</p>
      </div>
    </div>
  `,
  styles: []
})
export class AppComponent {
  view: CalendarView = CalendarView.Month;
  viewDate: Date = new Date();

  getMonthRange() {
    const start = startOfMonth(this.viewDate);
    const end = endOfMonth(this.viewDate);
    console.log(`Month starts on: ${start}, ends on: ${end}`);
  }
}