ion2-calendar v3.5.0 monthChange事件失效问题求助

问题复现 #

使用ion2-calendar 3.5.0版本，未添加monthChange事件时日历切换月份正常；添加以下代码后，点击月份切换箭头，日历始终停留在当前月份：

组件模板代码：

<ion-calendar [options]="cal_options" [(ngModel)]="selectedDates" (monthChange)="onMonthChanged($event)" (change)="onChange($event)">
</ion-calendar>

对应的事件处理函数：

onMonthChanged(month) {
  this.selectedMonth = month.newMonth.months;
}

问题原因 #

1. 参数属性错误：monthChange事件返回的$event对象中，正确的月份属性应为month.newMonth.month（而非months），错误的属性赋值导致selectedMonth未获取到有效月份值。
2. 未关联组件显示月份：3.5.0版本中，仅监听monthChange事件并赋值变量，未将变量与日历组件的month属性绑定，组件无法感知月份切换需求。

解决方案 #

步骤1：修正事件参数的属性取值 #

调整onMonthChanged函数，获取正确的年月信息并生成有效日期对象：

onMonthChanged(month) {
  // 根据返回的年月生成新的日期对象
  this.selectedMonth = new Date(month.newMonth.year, month.newMonth.month, 1);
}

步骤2：绑定组件的month属性 #

在模板中添加[month]="selectedMonth"，将变量与日历的显示月份关联：

<ion-calendar 
  [options]="cal_options" 
  [(ngModel)]="selectedDates" 
  [month]="selectedMonth"
  (monthChange)="onMonthChanged($event)" 
  (change)="onChange($event)">
</ion-calendar>

额外检查 #

确保cal_options中未设置固定的from或to属性限制月份范围，若有需要动态调整范围，可在onMonthChanged中同步更新cal_options：

onMonthChanged(month) {
  this.selectedMonth = new Date(month.newMonth.year, month.newMonth.month, 1);
  // 动态更新可选月份范围（示例）
  this.cal_options = {
    ...this.cal_options,
    from: new Date(month.newMonth.year, month.newMonth.month - 6, 1),
    to: new Date(month.newMonth.year, month.newMonth.month + 6, 1)
  };
}

内容的提问来源于stack exchange，提问作者Hadia