求助：如何实现Ng Prime Calendar选中日期时高亮整周？

刚帮朋友解决过类似的Ng Prime Calendar整周高亮需求，给你梳理一套可行的实现步骤，应该能直接复用：

1. 监听日期选中事件，计算整周范围 #

首先通过Calendar的onSelect事件获取选中日期，然后算出该日期所在周的起始和结束日期。这里提供两种实现方式，选你顺手的来：

方式一：用Moment.js简化日期计算（推荐） #

先确保安装了moment依赖，然后在组件里处理：

import moment from 'moment';

selectedDate: Date | null = null;
weekStart: Date | null = null;
weekEnd: Date | null = null;

onDateSelect(event: { date: Date }) {
  this.selectedDate = event.date;
  // 以ISO周（周一为起始）计算，若要周日起始改'week'即可
  const selectedMoment = moment(this.selectedDate);
  this.weekStart = selectedMoment.startOf('isoWeek').toDate();
  this.weekEnd = selectedMoment.endOf('isoWeek').toDate();
}

方式二：原生Date API实现（无需额外依赖） #

如果不想引入第三方库，用原生API也能搞定：

selectedDate: Date | null = null;
weekStart: Date | null = null;
weekEnd: Date | null = null;

// 计算指定日期所在周的起止（周一到周日）
getWeekRange(date: Date): { start: Date, end: Date } {
  const dayOfWeek = date.getDay(); // 0=周日，1=周一...
  // 计算与周一的差值
  const startDiff = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
  const start = new Date(date);
  start.setDate(date.getDate() + startDiff);
  
  const end = new Date(start);
  end.setDate(start.getDate() + 6);
  
  return { start, end };
}

onDateSelect(event: { date: Date }) {
  this.selectedDate = event.date;
  const range = this.getWeekRange(this.selectedDate);
  this.weekStart = range.start;
  this.weekEnd = range.end;
}

2. 通过cellClass给整周日期添加自定义类 #

Ng Prime Calendar支持cellClass属性，通过回调函数判断每个日期是否在选中周范围内，返回对应的样式类：

getCellClass(date: Date): string {
  if (!this.weekStart || !this.weekEnd) return '';
  
  const dateTime = date.getTime();
  const start = this.weekStart.getTime();
  const end = this.weekEnd.getTime();
  
  // 若当前日期在整周范围内，返回高亮类
  return dateTime >= start && dateTime <= end ? 'highlight-week' : '';
}

然后在模板里绑定这个回调：

<p-calendar 
  [(ngModel)]="selectedDate"
  (onSelect)="onDateSelect($event)"
  [cellClass]="getCellClass">
</p-calendar>

3. 添加CSS样式实现高亮效果 #

最后在组件的CSS文件里定义高亮样式，可根据需求调整颜色：

/* 整周高亮背景 */
.highlight-week {
  background-color: #e8f4fc !important;
  border-radius: 4px;
}

/* 选中日期单独强化样式（可选） */
.p-datepicker-today.highlight-week {
  background-color: #cfe8fc !important;
  border-color: #90caf9;
}

额外优化点 #

• 如果需要页面加载时默认高亮当前周，可以在ngOnInit里触发一次onDateSelect：

  ngOnInit() {
    this.onDateSelect({ date: new Date() });
  }
  

• 若业务要求周起始是周日，只需要调整日期计算逻辑（比如把isoWeek改成week，或者原生方法里的差值计算）。

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