掌握PrimeNG Calendar：多选模式下动态控制显示月份的技巧

<!-- my-calendar.component.html -->
<p-calendar #calendario
            [(ngModel)]="dates"
            [readonlyInput]="true"
            selectionMode="multiple"
            [inline]="true"
            dateFormat="yy/mm/dd">
</p-calendar>

// my-calendar.component.ts
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { Calendar } from 'primeng/calendar'; // 导入PrimeNG Calendar组件类型

@Component({
  selector: 'app-my-calendar',
  templateUrl: './my-calendar.component.html',
  styleUrls: ['./my-calendar.component.css']
})
export class MyCalendarComponent implements AfterViewInit {
  // 使用@ViewChild获取PrimeNG Calendar组件实例
  @ViewChild('calendario') calendario!: Calendar; // 非空断言，确保在ngAfterViewInit时已初始化

  dates: Date[] = []; // 绑定到ngModel的日期数组
  // 模拟事件数据，包含 startDate 和 marked 属性
  myevents: any[] = [
    { id: 1, startDate: '2023-10-15', marked: true },
    { id: 2, startDate: '2023-10-20', marked: false },
    { id: 3, startDate: '2023-11-05', marked: true },
    { id: 4, startDate: '2023-12-01', marked: false },
  ];

  ngAfterViewInit() {
    // 组件视图初始化后，加载初始日期并设置日历显示月份
    this.loadInitialDates();
  }

  /**
   * 初始加载时设置选定日期和日历的显示月份。
   * 如果有标记的事件，显示第一个标记事件的月份；否则显示当前月份。
   */
  loadInitialDates() {
    this.dates = this.myevents
      .filter(e => e.marked)
      .map(e => new Date(e.startDate));

    // 确定要显示的月份：如果有标记的事件，显示第一个标记事件的月份；否则显示当前月份。
    const firstMarkedEvent = this.myevents.find(e => e.marked);
    const dateToShow = firstMarkedEvent ? new Date(firstMarkedEvent.startDate) : new Date();

    // 直接设置组件实例的defaultDate属性，控制日历显示月份
    this.calendario.defaultDate = dateToShow;
    // 更新模型，确保日历UI刷新以显示正确的选中日期和月份
    this.calendario.updateModel(this.dates);
  }

  /**
   * 模拟用户操作或数据更新，例如取消标记一个事件。
   * @param eventId 要取消标记的事件ID
   */
  removeEvent(eventId: number) {
    const eventIndex = this.myevents.findIndex(e => e.id === eventId);
    if (eventIndex > -1) {
      this.myevents[eventIndex].marked = false; // 取消标记
      this.updateCalendarView(); // 更新日历视图
    }
  }

  /**
   * 模拟用户操作或数据更新，例如标记一个事件。
   * @param eventId 要标记的事件ID
   */
  addEvent(eventId: number) {
    const eventIndex = this.myevents.findIndex(e => e.id === eventId);
    if (eventIndex > -1) {
      this.myevents[eventIndex].marked = true; // 标记
      this.updateCalendarView(); // 更新日历视图
    }
  }

  /**
   * 核心逻辑：根据myevents数据的变化，更新日历的选中日期和显示月份。
   */
  updateCalendarView() {
    // 1. 根据当前标记事件更新 dates 数组 (ngModel 绑定的数据)
    this.dates = this.myevents
      .filter(e => e.marked)
      .map(e => new Date(e.startDate));

    // 2. 确定日历应该显示哪个月份
    // 如果有任何事件被标记，显示第一个标记事件的月份
    // 如果没有事件被标记，显示当前月份
    const firstMarkedEvent = this.myevents.find(e => e.marked);
    const dateToShow = firstMarkedEvent ? new Date(firstMarkedEvent.startDate) : new Date();

    // 3. 直接修改 PrimeNG Calendar 组件实例的 defaultDate 属性
    this.calendario.defaultDate = dateToShow;
    // 4. 调用 updateModel 方法，强制 PrimeNG Calendar 重新渲染，
    // 以反映新的选中日期和更新后的显示月份
    this.calendario.updateModel(this.dates);
  }
}