Angular日历获取当前星期，前几周和下几周

Question

我正在尝试在我的角度应用程序中实现mattlewis92的角度日历（here）。

我正在尝试检索一周中的当前日期。例如：开始日期：10-20-2019和结束日期：10-26-2019。使用这个日期，我将调用一个API，它将在星期几列表的下面列出任务。然后，我有两个按钮：“上一个”和“下一个”，它们应该检索下一个和上个星期的日期，它将调用API并显示相应的星期任务。我无法从代码中获取星期几。

分别单击按钮时，有什么可以帮助我获取当前星期日期以及上星期和下星期的日期吗？

请在下面找到我正在尝试的代码。

import {
  Component,
  ChangeDetectionStrategy,
  ViewChild,
  TemplateRef, OnInit,EventEmitter
} from '@angular/core';
import {
  startOfDay,
  endOfDay,
  addHours,
  startOfMonth,
  subWeeks,
  addWeeks,
  endOfMonth,
  startOfWeek,
  endOfWeek
  
} from 'date-fns';


import { Subject } from 'rxjs';
import {
  CalendarEvent,
  CalendarEventTimesChangedEvent,
  CalendarView,
  CalendarUtils,
  CalendarMonthViewDay
} from 'angular-calendar';
import { GetMonthViewArgs, MonthView, WeekDay } from 'calendar-utils';
import { WeekDay } from '@angular/common';

const colors: any = {
  red: {
    primary: '#ad2121',
    secondary: '#FAE3E3'
  },
  blue: {
    primary: '#1e90ff',
    secondary: '#D1E8FF'
  },
  yellow: {
    primary: '#e3bc08',
    secondary: '#FDF1BA'
  }
};

@Component({
    selector: 'app-timesheet',
    templateUrl: './timesheet.component.html',
    styleUrls: ['./timesheet.component.css']
  })
  export class TimesheetComponent implements OnInit {
  ngOnInit(): void {
    console.log(this.view);
    console.log(CalendarView);
    console.log(this.viewDate );
    console.log(Date);
    console.log(this.selectedDay );
    console.log(this.view + 'ViewTitle');
    // console.log(WeekDay);
  }
    
  clickedDate: Date;

  // view: CalendarView = CalendarView.Month;
  view: CalendarView = CalendarView.Week;


  CalendarView = CalendarView;

  viewDate: Date = new Date();

  selectedDay: WeekDay;

  refresh: Subject<any> = new Subject();

  constructor() {}

  events: CalendarEvent[] = [
    {
      start: addHours(startOfDay(new Date()), 2),
      end: addHours(startOfDay(new Date()), 4),
      title: '',
      color: colors.red,
      actions: null,
      resizable: {
        beforeStart: false,
        afterEnd: false
      },
      draggable: false
    }
  ];

  dayClicked({ date }: { date: Date }): void {
    this.clickedDate = date
    if (this.view === CalendarView.Month) 
    {
      this.viewDate = date; 
      this.view = CalendarView.Week;
    }   
  }

  eventTimesChanged({
    event,
    newStart,
    newEnd
  }: CalendarEventTimesChangedEvent): void {
    this.events = this.events.map(iEvent => {
      if (iEvent === event) {
        return {
          ...event,
          start: newStart,
          end: newEnd
        };
      }
      return iEvent;
    });
  }



  addEvent(): void {
    this.events = [
      ...this.events,
      {
        title: 'New event',
        start: startOfDay(new Date()),
        end: endOfDay(new Date()),
        color: colors.red,
        draggable: false,
        resizable: {
          beforeStart: false,
          afterEnd: false
        }
      }
    ];
  }

  deleteEvent(eventToDelete: CalendarEvent) {
    this.events = this.events.filter(event => event !== eventToDelete);
  }

  setView(view: CalendarView) {
    this.view = view;
    console.log(this.view);
  }

  setDate(viewDate){
    console.log(viewDate);
    return viewDate;

  }

  // dayClicked(day: WeekDay): void {
  //   if (this.selectedDay) {
  //     delete this.selectedDay.cssClass;
  //   }
  //   day.cssClass = 'cal-day-selected';
  //   this.selectedDay = day;
  // }

  previousWeekData(){
    console.log("Previous Button Clicked")
  }
  nextWeekData(){
    console.log("Next Button Clicked")
  }

}

<div class="container-fluid">
    <div class="inner-container">
               <div class="row">
                <div class="col-md-4">
                    <div class="btn-group">
                        <div class="btn btn-dark" mwlCalendarPreviousView [view]="view" [(viewDate)]="viewDate" (click)="previousWeekData()">
                            Previous
                        </div>
                        <div class="btn btn-outline-secondary" mwlCalendarToday [(viewDate)]="viewDate">
                            Today
                        </div>
                        <div class="btn btn-dark" mwlCalendarNextView [view]="view" [(viewDate)]="viewDate" (click)="nextWeekData()">
                            Next
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <h3>{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}</h3>

                </div>
                <div class="col-md-4 text-right">
                    <div class="btn-group">
                        <div class="btn btn-dark" (click)="setView(CalendarView.Month)" [class.active]="view === CalendarView.Month">
                            Month
                        </div>
                        <div class="btn btn-dark" (click)="setView(CalendarView.Week)" [class.active]="view === CalendarView.Week">
                            Week
                        </div>
            
                    </div>
                </div>
            </div>
            <br />
            <div [ngSwitch]="view">
                <mwl-calendar-month-view *ngSwitchCase="CalendarView.Month" [viewDate]="viewDate" [events]="events" [refresh]="refresh" (dayClicked)="dayClicked($event.day)" (eventTimesChanged)="eventTimesChanged($event)">
            
                </mwl-calendar-month-view>
            
                <mwl-calendar-week-view *ngSwitchCase="CalendarView.Week"  [viewDate]="viewDate" [refresh]="refresh">
                </mwl-calendar-week-view>
            
            </div>
            
            <!-- Everything you see below is just for the demo, you don't need to include it in your app -->
            
            <br />
            
            
            <button class="btn btn-dark" (click)="addEvent()">
                Add new
              </button>


              
        
    </div>
</div>