Angular 完整日歷版本 5-隱藏過去的日期或禁用點擊過去的日期

Question

我正在開發一個允許用戶選擇計划日期的膳食計划器。 我不需要安排活動，我只需要點擊的日期（我只需要 dayClick）。

版本：

 "@fullcalendar/angular": "^5.5.0",> "@fullcalendar/daygrid": "^5.5.0",> "@fullcalendar/interaction": "^5.5.0",

編碼：

export class DateSelector {

    currentDate : Date = new Date();
    
    calendarOptions: CalendarOptions = {
      initialView: 'dayGridMonth',
      dateClick: this.handleDateClick.bind(this),
      validRange : {
        start : this.currentDate, //start is today
        end : getEndDate() //end is 6 months from today
      }
    };
  
    handleDateClick(arg) {
      console.log('date click! ' + arg.date); //Logs date correctly
    }
    
    getEndDate() : Date {
        this.currentDate.setMonth(this.currentDate.getMonth() + 6);
        return this.currentDate;
    }
}

<div class="row text-center">
  <full-calendar
  [options]="calendarOptions"></full-calendar>
</div>

我目前看到的：日歷正確地變灰/禁用過去的日期，沒有顯示數字。 問題是如果說開始是 24 日，日歷看起來很難看。

我想要一種方式（1）日歷從今天開始，即隱藏過去的日子。 (2) 禁用的過去日期看起來更好 - 編號顯示為灰色，但不可點擊。

Answer 1

所以我不確定我是否會對你關於將過去日期作為同一周期的一部分灰色化的問題的后半部分有很大幫助，但我確實有一些代碼可以與“Locales.html”示例一起使用用今天的日期創建一個變量。 還值得一提的是，我沒有使用 angular 文件集（我想我有反應文件）。 您可以有效地將其插入

var theDate = new Date();
var dd = String(theDate.getDate()).padStart(2, '0');
var mm = String(theDate.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = theDate.getFullYear();

theDate = yyyy + '-' + mm + '-' + dd;

只需在此document.addEventListener('DOMContentLoaded', function()中傳遞您的變量名稱作為initialDate參數。

至於使數字變灰，您可以使用上面創建的日期變量dd作為 for 循環中的檢查。 就像是

function myFunction() {
for (i=0; i<dd; i++) {
document.getElementsByClassName("fc-daygrid-day-number").style.color = "#aaa"; }
}

我對 javascript 還不是很好，但是理論上應該將今天前一個月的所有日期的顏色更改為灰色。 在接下來的幾個月里，您可能需要尋找一些方法來防止這些天變灰，但我希望這是一個起點！

Answer 2

您可以添加firstDay:{getDay(new Date())}它獲取日期編號並從該日期開始日歷