如何从 Angular 7 打字稿中禁用 FullCalendar 中的上一个按钮答案

【问题标题】：How to disable the prev button in FullCalendar from Angular 7 typecsript如何从 Angular 7 打字稿中禁用 FullCalendar 中的上一个按钮
【发布时间】：2020-04-20 11:35:47
【问题描述】：

我一直坚持这个，如果我回到 2 个月前，我想禁用 FullCalendar 上的上一个按钮。

嗯，这是四月，所以如果我去二月之后应该禁用上一个按钮。我已经实现了 FullCalendar 但无法实现它，因为到目前为止所有的解决方案都在 JQuery 中。

请指导我，因为我是第一次实现它。

【问题讨论】：

标签： angular typescript fullcalendar fullcalendar-4

【解决方案1】：

FullCalendar 有一个validRange 属性，它接受以下格式的日期范围：

{
  start: '2017-05-01',
  end: '2017-06-01'
}

然后您可以利用 toLocaleDateString() 函数和区域设置 fr-CA 以我们所需的格式返回日期 yyyy-MM-dd。试试下面的

模板

<full-calendar
  #calendar
  defaultView="dayGridMonth"
  [header]="{
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
  }"
  eventLimit="true"
  [validRange]="validRange"
  [plugins]="calendarPlugins"
  [weekends]="calendarWeekends"
  [events]="calendarEvents"
  (dateClick)="handleDateClick($event)"
  (eventClick)="eventClicked($event)"
></full-calendar>

控制器

export class AppComponent implements OnInit {
  validRange = { start: '', end: '' };
  .
  .
  ngOnInit() {
    let startDate =  new Date();
    startDate.setMonth(startDate.getMonth() - 2);  // <-- adjust number of months here
    this.validRange.start = startDate.toLocaleDateString("fr-CA");
  }
}

工作示例：Stackblitz

【讨论】：