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>

我目前看到的：日历正确地将 out/disables 过去的日期变灰，不显示任何数字。麻烦的是，如果说开始是 24 号，日历看起来很难看。

我想要一种方法 (1) 日历从今天开始，即隐藏过去的日子。 (2) 禁用的过去日期看起来更好 - nos 显示并变灰，但不可点击。

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

Angular 完整日历版本 5- 隐藏过去的日期或禁止点击过去的日期

Angular full calendar ver 5- hide past dates or disable click on past dates

javascript

angular

fullcalendar

hide

fullcalendar-5