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

Question

I have been stuck on this, i want to disable the previous button on FullCalendar if i go 2 months back.

Well this is April so if i go to Feb after that the prev button should be disabled. I have implemented the FullCalendar but cannot implement this as all the solutions so far have been in JQuery.

Please guide me as i have implemented it for the first time.

Answer 1

FullCalendar has a validRange property that accepts date range in the following format:

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

You could then leverage toLocaleDateString() function with locale fr-CA that returns the date in our desired format yyyy-MM-dd. Try the following

Template

<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> 

Controller

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");
  }
}

Working example: Stackblitz