PrimeNG多选日历：动态控制显示月份的教程

<p-calendar 
    #calendarComponent 
    [(ngModel)]="selectedDates" 
    [readonlyInput]="true"
    selectionMode="multiple" 
    [inline]="true"
    (onSelect)="onDateSelect($event)"
    (onUnselect)="onDateUnselect($event)">
</p-calendar>

<div style="margin-top: 20px;">
    <h3>已选日期:</h3>
    <ul>
        <li *ngFor="let date of selectedDates">{{ date | date:'yyyy-MM-dd' }}</li>
    </ul>
</div>

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

interface MyEvent {
  id: number;
  startDate: Date;
  marked: boolean;
  name: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('calendarComponent') calendarComponent!: Calendar;

  selectedDates: Date[] = [];

  // 模拟的事件数据
  myEvents: MyEvent[] = [
    { id: 1, startDate: new Date(2023, 10, 15), marked: false, name: 'Meeting A' },
    { id: 2, startDate: new Date(2023, 11, 1), marked: false, name: 'Project Deadline' },
    { id: 3, startDate: new Date(2024, 0, 10), marked: false, name: 'Holiday Party' },
    { id: 4, startDate: new Date(2024, 0, 20), marked: false, name: 'Team Event' },
  ];

  ngAfterViewInit(): void {
    // 初始加载时，根据已标记事件设置selectedDates
    this.selectedDates = this.myEvents
      .filter(e => e.marked)
      .map(e => e.startDate);

    // 初始设置日历显示月份
    this.updateCalendarDisplayMonth();
  }

  onDateSelect(event: any): void {
    // 模拟更新myEvents的marked状态
    const selectedDate = new Date(event);
    const eventToMark = this.myEvents.find(e => 
      e.startDate.toDateString() === selectedDate.toDateString()
    );
    if (eventToMark) {
      eventToMark.marked = true;
    }
    this.updateCalendarDisplayMonth();
  }

  onDateUnselect(event: any): void {
    // 模拟更新myEvents的marked状态
    const unselectedDate = new Date(event);
    const eventToUnmark = this.myEvents.find(e => 
      e.startDate.toDateString() === unselectedDate.toDateString()
    );
    if (eventToUnmark) {
      eventToUnmark.marked = false;
    }
    this.updateCalendarDisplayMonth();
  }

  /**
   * 根据当前选择的日期或无选择时显示当前月份，来更新日历的显示月份。
   */
  updateCalendarDisplayMonth(): void {
    let targetDate: Date;

    // 如果有已选择的日期，则显示第一个已选择日期所在的月份
    if (this.selectedDates && this.selectedDates.length > 0) {
      targetDate = this.selectedDates[0];
    } else {
      // 如果没有选择日期，则显示当前月份
      targetDate = new Date();
    }

    // 直接设置组件实例的defaultDate属性
    this.calendarComponent.defaultDate = targetDate;

    // 强制更新日历模型以刷新视图
    // 传入当前的selectedDates，确保日历的选中状态正确
    this.calendarComponent.updateModel(this.selectedDates);
  }
}