Angular Календарь

Question

Мне нужно, чтобы дни в календаре начинались с текущей даты, а не показывали прошедшие дни, потому что календарь выбирает дни с воскресенья. , Также показываются часы с 8 до 02 часов. Я хочу, чтобы 2 часа были последними в таблице часов.

Calendar Component

type CalendarPeriod = 'day' | 'week' | 'month';

function addPeriod(period: CalendarPeriod, date: Date, amount: number): Date {
  return {
    day: addDays,
    week: addWeeks,
    month: addMonths
  }[period](date, amount);
}

function subPeriod(period: CalendarPeriod, date: Date, amount: number): Date {
  return {
    day: subDays,
    week: subWeeks,
    month: subMonths
  }[period](date, amount);
}

function startOfPeriod(period: CalendarPeriod, date: Date): Date {
  return {
    day: startOfDay,
    week: startOfWeek,
    month: startOfMonth
  }[period](date);
}

function endOfPeriod(period: CalendarPeriod, date: Date): Date {
  return {
    day: endOfDay,
    week: endOfWeek,
    month: endOfMonth,

  }[period](date);
}



  view: CalendarView = CalendarView.Week;
  minDate:Date =  new Date();
  maxDate: Date = addMonths(new Date(), 1);
  prevBtnDisabled: boolean = false;
  nextBtnDisabled: boolean = false;
  viewDate: Date = new Date();


  modalData: {
    action: string; event: CalendarEvent;

  };
  actions: CalendarEventAction[] = [{
    label: '<i class="editButton"></i>', onClick: ({event}: { event: CalendarEvent }): void => {
      this.handleEvent('Edited', event);
    }
  }, {
    label: '<i class="deleteButton"></i>', onClick: ({event}: { event: CalendarEvent }): void => {
      this.events = this.events.filter(iEvent => iEvent !== event);
      this.handleEvent('Deleted', event);
    }
  }];

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


  events: CalendarEvent[] = [

  ];

Calendar Component

  handleEvent(action: string, event: CalendarEvent): void {

    this.form.setValue('start', event.start);
    this.form.setValue('end', event.end);
    this.form.setValue('title', event.title);

  }

  beforeWeekViewRender(renderEvent: CalendarWeekViewBeforeRenderEvent) {
  renderEvent.hourColumns.forEach(hourColumn => {
      hourColumn.hours.forEach(hour => {
        hour.segments.forEach(segment => {
          if (
            segment.date.getHours() >= 9 &&
            segment.date.getDay() === 3
          ) {
            // segment.cssClass = 'bg-green';
          }
        });
      });
    });
  }

  eventTimesChanged({event, newStart, newEnd}: CalendarEventTimesChangedEvent): void {
    event.start = newStart;
    event.end = newEnd;
    this.handleEvent('Dropped or resized', event);
    this.refresh.next();
  }

  hoursSegmentClicked(date){

    this.clickedDate = date;
    this.form.setValue('start',date);

    this.show_form = true;

  }



  dayClicked({date, events}: { date: Date; events: CalendarEvent[] }): void {
    if (isSameMonth(date, this.viewDate)) {
      if ((isSameDay(this.viewDate, date) && this.activeDayIsOpen === true) || events.length === 0) {
        this.activeDayIsOpen = false;
      } else {
        this.activeDayIsOpen = true;
        this.viewDate = date;
      }
    }
  }


  increment(): void {
    this.changeDate(addPeriod(this.view, this.viewDate, 1));
  }

  decrement(): void {
    this.changeDate(subPeriod(this.view, this.viewDate, 1));
  }

  today(): void {
    this.changeDate(new Date());
  }

  dateIsValid(date: Date): boolean {
    return date >= this.minDate && date <= this.maxDate;
  }

  changeDate(date: Date): void {
    this.viewDate = date;
    this.dateOrViewChanged();
  }

  changeView(view: CalendarPeriod): void {
    // this.view = view;
    this.dateOrViewChanged();
  }

  dateOrViewChanged(): void {
    this.prevBtnDisabled = !this.dateIsValid(
      endOfPeriod(this.view, subPeriod(this.view, this.viewDate, 1))
    );
    this.nextBtnDisabled = !this.dateIsValid(
      startOfPeriod(this.view, addPeriod(this.view, this.viewDate, 1))
    );
    if (this.viewDate < this.minDate) {
      this.changeDate(this.minDate);
    } else if (this.viewDate > this.maxDate) {
      this.changeDate(this.maxDate);
    }
  }

  beforeMonthViewRender({ body }: { body: CalendarMonthViewDay[] }): void {
    body.forEach(day => {
      if (!this.dateIsValid(day.date)) {
        day.cssClass = 'cal-disabled';
      }
    });
  }

Calendar Html

      <div class="card-header d-flex flex-wrap justify-content-md-between no-gutters px-3 py-2" style="z-index:5">
        <div class="col-xs-12 col-sm-6 align-self-center text-center text-sm-left">
          <h3 class="mb-0 fw-100">{{ viewDate | calendarDate:(view + 'ViewTitle'):locale }}</h3>
        </div>
        <div class="d-flex justify-content-end col-xs-12 col-sm-6 text-right pt-3 pt-sm-0">
          <div class="btn-group mr-auto mr-sm-0">
            <div class="btn-group">
              <button
                class="btn btn-secondary px-3"
                (click)="decrement()"
                [disabled]="prevBtnDisabled"
              >
                <i class="icon ion-ios-arrow-back"></i>
              </button>
              <button class="btn btn-outline-secondary" (click)="today()">Sot</button>
              <button class="btn btn-secondary px-3"
                      (click)="increment()"
                      [disabled]="nextBtnDisabled"
              >
                <i class="icon ion-ios-arrow-forward"></i>
              </button>
            </div>

          </div>

        </div>
      </div>
      <div [ngSwitch]="view">
            <mwl-calendar-month-view    *ngSwitchCase="'month'" [viewDate]="viewDate" [events]="events" [locale]="locale" [refresh]="refresh"
                                        [activeDayIsOpen]="activeDayIsOpen" (dayClicked)="dayClicked($event.day)"
                                        (eventClicked)="handleEvent('Clicked', $event.event)"
                                        (eventTimesChanged)="eventTimesChanged($event)">
            </mwl-calendar-month-view>


        <mwl-calendar-week-view    *ngSwitchCase="'week'"
                                   [viewDate]="viewDate"
                                   [events]="events"
                                   [locale]="locale"
                                   [dayStartHour]="8"
                                   [hourSegments]="1"
                                   [hourSegmentHeight]="60"
                                   (hourSegmentClicked)="hoursSegmentClicked($event.date)"
                                   [refresh]="refresh"
                                   (beforeViewRender)="beforeWeekViewRender($event)"
                                   (eventClicked)="handleEvent('Clicked', $event.event)"
                                   (eventTimesChanged)="eventTimesChanged($event)">
        </mwl-calendar-week-view>
            <mwl-calendar-day-view    *ngSwitchCase="'day'" [viewDate]="viewDate" [events]="events" [locale]="locale" [refresh]="refresh"
                                      (eventClicked)="handleEvent('Clicked', $event.event)"
                                      (eventTimesChanged)="eventTimesChanged($event)">
            </mwl-calendar-day-view>
      </div>