如何將 Angular 日歷自定義為可垂直滾動

Question

我已經嘗試了 npm 的幾個日歷，但還沒有找到可以垂直滾動的日歷，所有月份都應該在用戶滾動容器時呈現。

Answer 1

制作一個日歷並不困難，請參閱，例如這個SO

如果您使用此代碼創建一個 calendarComponent

days:any[]
months=['ene','feb','mar','abr','may','jun','jul','ago','sep','oct','nov','dic']
weekdays=['Lu','Ma','Mi','Ju','Vi','Sa','Do']
@Input() set year(value:number)
{
  this._year=value;
  if (this._month)
    this.days=this.generateDays(this._year,this._month)
}
@Input() set month(value:number)
{
  this._month=value;
  if (this._year)
    this.days=this.generateDays(this._year,this._month)
}
private generateDays(year:number,month:number)
{
...
}

你可以寫一些像

 <app-calendar [year]="year" [month]="month"></app-calendar>

現在您可以使用 cdk-virtual-scroll-viewport 使用 uin 無限滾動（參見，例如關於此的鏈接

所以，我們的組件可以像

<cdk-virtual-scroll-viewport #scroller itemSize="72" class="content">
  <ng-container *cdkVirtualFor="let item of items">
        <app-calendar [year]="item.year" [month]="item.month"></app-calendar>
  </ng-container>
</cdk-virtual-scroll-viewport>

你在哪里

  items:{year:number,month:number}[]=[]
  days: any[];
  ngOnInit()
  {
    this.fetchMore();
    this.scroller.elementScrolled().pipe(
      map(() => this.scroller.measureScrollOffset('bottom')),
      pairwise(),
      filter(([y1, y2]) => (y2 < y1 && y2 < 140)),
      throttleTime(200)
    ).subscribe(() => {
      this.ngZone.run(() => {
        this.fetchMore();
      })
    }
    );
  }
  fetchMore(): void {
    this.items=[...this.items,...[0,1,2,3,4,5,6].map(x=>this.incrementMonth(1))]
  }
  
  incrementMonth(increment) {
    const month =
      this.month + increment == 13
        ? 1
        : this.month + increment == 0
        ? 1
        : this.month + increment;
    this.year =
      this.month + increment == 13
        ? this.year + 1
        : this.month + increment == 0
        ? this.year - 1
        : this.year;
    this.month = month;
    return {year:this.year,month:this.month}
  }

你可以在這個stackblitz中看到

要做的事情：不要硬編碼月份名稱，添加一個“點擊”來選擇日期和美麗使用.css