如何从 Angular 7 typescript 禁用 FullCalendar 中的上一个按钮

Question

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

好吧，现在是四月，所以如果我在那之后去二月，则应该禁用上一个按钮。我已经实施了 FullCalendar 但无法实施，因为目前所有的解决方案都在 JQuery.

我是第一次实现，请多多指导。

Answer 1

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

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

然后您可以利用 toLocaleDateString() function with locale returns 我们想要的格式 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

如何从 Angular 7 typescript 禁用 FullCalendar 中的上一个按钮

How to disable the prev button in FullCalendar from Angular 7 typecsript

angular

typescript

fullcalendar

fullcalendar-4