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”示例一起使用的代码创建一个包含今天日期的变量。还值得一提的是，我没有使用角度文件集（我想我有反应文件）。您可以有效地将其插入

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

validRange:{ start :'2024 年 4 月 25 日星期四 17:04:08 GMT+0530（印度标准时间）， 结束 :'2025 年 4 月 25 日星期四 17:04:08 GMT+0530（印度标准时间）},

Answer 3

您可以添加

firstDay:{getDay(new Date())}

它获取天数并从该日期开始日历