How to increment months using the Temporal API

Question

I am creating a calendar in Angular that has a previous & next month button that currently displays the correct data of that month when I press either the next or previous button only once. The question that I have is how can I increment the months when clicking on either the previous or next button. I have looked at Temporal's Documentation a good bit but I still am confused on how to simply increment the months. Here is some of the code I have so far. Any help would be greatly appreciated!

  currentMonth = Temporal.Now.plainDateISO();
  nextMonth = this.currentMonth.add({ months: 1 });
  previousMonth = this.currentMonth.subtract({ months: 1 });
  daysInCurrentMonth = this.currentMonth.daysInMonth;
  daysInNextMonth = this.nextMonth.daysInMonth;
  daysInPreviousMonth = this.previousMonth.daysInMonth;

onStartMonth() {
    for (let i = 1; i <= this.daysInCurrentMonth; i++) {
      let div = this.calendarData.nativeElement;
      let calendarDates = this.renderer.createElement('div');
      this.add(calendarDates, 'dates');
      this.set(calendarDates, 'innerText', i);
      this.append(div, calendarDates);
    }
  }

  onNextMonth() {
    for (let i = 1; i <= this.daysInNextMonth; i++) {
      let div = this.calendarData.nativeElement;
      let calendarDates = this.renderer.createElement('div');
      this.add(calendarDates, 'dates');
      this.set(calendarDates, 'innerText', i);
      this.append(div, calendarDates);
    }
  }

  onPreviousMonth() {
    for (let i = 1; i <= this.daysInPreviousMonth; i++) {
      let div = this.calendarData.nativeElement;
      let calendarDates = this.renderer.createElement('div');
      this.add(calendarDates, 'dates');
      this.set(calendarDates, 'innerText', i);
      this.append(div, calendarDates);
    }
  }

Answer 1

Your comment: "Since the current month is August; when I press the next month button, I always get September, likewise when I press the previous month I always get July"

From that comment, your issue is not with the Temporal API. The problem is that you've essentially hard-coded the current, next and previous months when you should probably be updating these dynamically (as well as the respective days in month. When you press the next button you should update current month to be the next month and then recalcuate daysInCurrentMonth.

  currentMonth = Temporal.Now.plainDateISO();

  // Reset to this month
  onStartMonth() {
    this.currentMonth = Temporal.Now.plainDateISO();

    renderCalendar();
  }

  // move to next month
  onNextMonth() {
    this.currentMonth = this.currentMonth.add({ months: 1 });

    renderCalendar();
  }

  // move previous  month
  onPreviousMonth() {
    this.currentMonth = this.currentMonth.subtract({ months: 1 });

    renderCalendar();
  }

  // Render the calendar
  renderCalendar(){
    const daysInCurrentMonth = this.currentMonth.daysInMonth;
    const div = this.calendarData.nativeElement;

    for (let i = 1; i <= daysInCurrentMonth; i++) {
      let calendarDates = this.renderer.createElement('div');
      this.add(calendarDates, 'dates');
      this.set(calendarDates, 'innerText', i);
      this.append(div, calendarDates);
    }
  }

You now only care about the current tracked month and can easily navigate forward or backward any number of times. Your rendering got much simpler too as any changes you need to make can be made in that 1 function without having to be replicated multiple times.

If you still need next and previous month info (incl days in months) then you should probably recalculate these as well when current month changes.