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())}它获取日期编号并从该日期开始日历