我帮你搞定这个头疼的问题！PrimeNG的p-calendar其实自带了专门的属性来控制初始化时显示的月份，完全不用让用户手动滚动半天。下面给你几种实用的解决方案：

方法1：用viewDate强制指定默认显示的月份 #

这是最直接的方式，viewDate属性专门用来控制日历面板默认展示的日期（对应月份），不管你有没有绑定选中日期，都能强制跳转到你想要的月份。

示例代码： #

HTML模板：

<p-calendar [(ngModel)]="selectedDate" [viewDate]="defaultViewMonth"></p-calendar>

组件TS代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-calendar-example',
  templateUrl: './calendar-example.component.html'
})
export class CalendarExampleComponent {
  selectedDate: Date | undefined;
  // 设置默认显示2026年1月（注意：JS Date的月份是0-based，1月对应0）
  defaultViewMonth: Date = new Date(2026, 0, 1);
}

⚠️ 重点提醒：JavaScript的Date对象月份是从0开始计数的，比如0代表1月，11代表12月，别写错了！

方法2：通过绑定初始选中日期自动跳转月份 #

如果你的业务场景需要默认选中某个未来日期，那直接把ngModel初始化为目标日期就行，日历面板会自动跳转到该日期对应的月份：

组件TS代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-calendar-example',
  templateUrl: './calendar-example.component.html'
})
export class CalendarExampleComponent {
  // 默认选中2026年6月15日，面板会自动显示2026年6月
  selectedDate: Date = new Date(2026, 5, 15);
}

HTML模板：

<p-calendar [(ngModel)]="selectedDate"></p-calendar>

方法3：动态设置默认显示月份 #

如果需要根据业务逻辑（比如从后端获取目标年份）动态设置默认月份，可以在组件的ngOnInit生命周期里赋值：

组件TS代码：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-calendar-example',
  templateUrl: './calendar-example.component.html'
})
export class CalendarExampleComponent implements OnInit {
  selectedDate: Date | undefined;
  defaultViewMonth: Date | undefined;

  ngOnInit(): void {
    // 模拟从服务获取目标年月，这里设置为2026年3月
    const targetYear = 2026;
    const targetMonth = 2; // 3月对应2
    this.defaultViewMonth = new Date(targetYear, targetMonth, 1);
  }
}

额外注意事项 #

• 确保你的PrimeNG版本支持viewDate属性：这个属性在PrimeNG 5.x及以上版本都已支持，如果是非常老旧的版本，建议升级到稳定版。
• 若同时设置ngModel和viewDate：当ngModel有初始值时，面板默认会显示ngModel对应的月份；如果想强制显示指定月份（即使有初始选中值），优先用viewDate覆盖。

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