Angular 角日历

我需要日历中的日期从当前日期开始，而不是显示过去的日期，因为日历选择从星期日开始的日期。
从上午8点到凌晨2点显示的时间。我希望2点钟是时刻表上的最后一点

日历组件

键入CalendarPeriod='day'|'week'|'month'；
函数addPeriod（期间：日历期间，日期：日期，金额：编号）：日期{
返回{
日期：addDays，
周：每周，
月份：新增月份
}[期间]（日期、金额）；
}
函数子期间（期间：日历期间，日期：日期，金额：编号）：日期{
返回{
日：次日，
周：子周，
月份：次月份
}[期间]（日期、金额）；
}
函数startOfPeriod（期间：日历期间，日期：日期）：日期{
返回{
日期：开始日期，
周：开始每周，
月份：开始月份
}[期间]（日期）；
}
函数endOfPeriod（期间：日历期间，日期：日期）：日期{
返回{
日期：截止日期，
周：周末，
月份：月底，
}[期间]（日期）；
}
视图：CalendarView=CalendarView.Week；
minDate:日期=新日期（）；
maxDate:Date=addMonths（新日期（），1）；
prevBtnDisabled：布尔值=false；
nextBtnDisabled:布尔值=false；
viewDate:日期=新日期（）；
莫达尔达：{
操作：字符串；事件：CalendarEvent；
};
操作：CalendarEventAction[]=[{
标签：“”，onClick:（{event}:{event:CalendarEvent}）：void=>{
此.handleEvent（'Edited'，事件）；
}
}, {
标签：“”，onClick:（{event}:{event:CalendarEvent}）：void=>{
this.events=this.events.filter（iEvent=>iEvent！==event）；
此.handleEvent（'Deleted'，事件）；
}
}];
刷新：主题=新主题（）；
事件：CalendarEvent[]=[
];

日历组件

handleEvent（操作：字符串，事件：CalendarEvent）：无效{
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.segments.forEach（segments=>{
如果(
段.date.getHours（）>=9&&
段.date.getDay（）==3
) {
//segment.cssClass='bg绿色'；
}
});
});
});
}
eventTimesChanged（{event，newStart，newEnd}:CalendarEventTimesChangedEvent）：无效{
event.start=newStart；
event.end=newEnd；
此.handleEvent（'已删除或调整大小'，事件）；
this.refresh.next（）；
}
小时数（日期）{
this.clickedDate=日期；
此.form.setValue（'start'，date'）；
this.show_form=true；
}
dayClicked（{date，events}:{date:date；events:CalendarEvent[]}）：无效{
if（isSameMonth（日期，this.viewDate））{
if（（isSameDay（this.viewDate，date）&&this.activeDayIsOpen==true）| | events.length==0）{
this.activeDayIsOpen=false；
}否则{
this.activeDayIsOpen=true；
this.viewDate=日期；
}
}
}
增量（）：void{
this.changeDate（addPeriod（this.view，this.viewDate，1））；
}
减量（）：无效{
this.changeDate（子时段（this.view，this.viewDate，1））；
}
今天（）：无效{
此.changeDate（新日期（））；
}
dateIsValid（日期：date）：布尔值{
返回日期>=this.minDate&&date this.maxDate）{
this.changeDate（this.maxDate）；
}
}
beforeMonthViewRender（{body}:{body:CalendarMonthViewDay[]}）：无效{
body.forEach（天=>{
如果（！this.dateIsValid（day.date））{
day.cssClass='cal disabled'；
}
});
}

日历Html

{{viewDate | calendarDate:（view+'ViewTitle'）：locale}
索特

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>