当我们使用ng prime日历选择该周的日期时，如何突出显示整周

Question

我正在尝试通过选择日期来为ng prime日历添加增强功能，以便突出显示整周。我无法做到这一点。可以帮助我解决我的问题。

Answer 1

您应该首先使用range模式。绑定到ngModel的值将是一个长度为2的数组，包含起始值和结束值。

<p-calendar [(ngModel)]="values" selectionMode="range" (onSelect)="select($event)"></p-calendar>

然后，您可以绑定到onSelect事件，计算开始和结束日期，并将它们设置为数组;

select(evt) {
    let start = new Date(evt);
    start.setDate(start.getDate() - start.getDay());
    this.values[0] = start;

    let end = new Date(start);
    end.setDate(start.getDate() + 6); 
    this.values[1] = end;
  }

这是一个StackBlitz示例：https://stackblitz.com/edit/primeng-template-rqr42n?file=app/app.component.ts