Angular Calendar get current week, previous weeks, and next weeks

Question

I am trying to implement mattlewis92's angular calendar (https://github.com/mattlewis92/angular-calendar) in my angular application.

I am trying to retrieve the current days in the week. eg: start date: 10-20-2019 and End Date: 10-26-2019. Using this dates I will call an API and it will list the task just below the weeks date listing. I then have two buttons, Previous and Next that should retrieve the next and previous weeks dates and it will call the API and display the corresponding weeks tasks.I am unable to get the week dates from the code.

Can any help me out to get the current week dates and previous and next week dates when clicked on the button respectively?

Please find below the code which i am trying out.

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>