Angular6日历按日期渲染专属自定义模板的实现方法咨询

我来帮你搞定这两个Angular日历自定义渲染的需求，都是实际项目里很常见的场景：

你现在的问题是cellTemplate会应用到所有单元格，核心解决思路是利用日历模板暴露的上下文变量（比如当前单元格的date），结合你的数据做条件渲染，只在匹配的日期上显示专属内容。

具体实现步骤： #

首先，修改你的自定义模板，让它接收单元格的date变量，然后通过日期匹配逻辑渲染对应内容：

<ng-template #customCellTemplate let-date="date">
  <!-- 先找到当前日期对应的chamberStatus数据 -->
  <ng-container *ngIf="getMatchingStatus(date) as currentStatus">
    <div class="margin-card" >
      <div fxLayout="column">
        <div *ngFor="let ite of currentStatus.capabilities">
          <div fxLayout ="row" class="height-28px margin-left-24px margin-right-24px border-rounded-2px " >
            <div style="min-width: 20px;" [ngStyle]="{'background-color':getColor(ite.status)}" class="text-css" >*</div>
            <div style="min-width: 20px;" [ngStyle]="{'background-color':getColor(ite.status)}" class="text-css" > {{ite.value}}</div>
            <div style="min-width: 140px;" [ngStyle]="{'background-color':getTextColor(ite.status)}" class="text-css">{{ite.name}}</div>
          </div>
        </div>
      </div>
    </div>
  </ng-container>
  <!-- 没有匹配数据的日期，渲染默认内容（比如显示日期） -->
  <div *ngIf="!getMatchingStatus(date)" class="default-cell">
    {{ date | date:'dd' }}
  </div>
</ng-template>

然后在组件类里添加日期匹配的方法，注意要忽略时间部分，只比较年月日：

getMatchingStatus(targetDate: Date): any {
  // 把日期转成统一格式的字符串，避免时分秒干扰匹配
  const targetDateStr = targetDate.toDateString();
  // 假设你的chamberStatus数组里每个item都有date字段（Date类型或字符串）
  return this.chamberStatus.find(item => {
    // 如果item.date是字符串，先转成Date再处理
    const itemDateStr = typeof item.date === 'string' ? new Date(item.date).toDateString() : item.date.toDateString();
    return itemDateStr === targetDateStr;
  });
}

如果需要给不同日期用完全不同的模板结构，可以用ngSwitch做分支选择：

<ng-template #customCellTemplate let-date="date">
  <ng-container [ngSwitch]="date.toDateString()">
    <!-- 特定日期1的专属模板 -->
    <ng-container *ngSwitchCase="date1.toDateString()">
      <div class="special-template-1">这是日期1的自定义内容</div>
    </ng-container>
    <!-- 特定日期2的专属模板 -->
    <ng-container *ngSwitchCase="date2.toDateString()">
      <div class="special-template-2">这是日期2的自定义内容</div>
    </ng-container>
    <!-- 默认模板 -->
    <ng-container *ngSwitchDefault>
      {{ date | date:'dd' }}
    </ng-container>
  </ng-container>
</ng-template>

当然可以！mwl-calendar支持通过eventTemplate输入属性自定义事件的渲染模板，同样可以接收事件对象的上下文变量。

具体实现： #

首先定义事件的自定义模板：

<ng-template #customEventTemplate let-event="event">
  <div class="custom-event-card">
    <!-- 显示事件标题 -->
    <h4 style="color: {{event.color.primary}}">{{event.title}}</h4>
    <!-- 渲染你需要的自定义内容，比如事件里携带的capabilities数据 -->
    <div *ngIf="event.capabilities">
      <div *ngFor="let ite of event.capabilities">
        <div fxLayout="row" class="height-28px border-rounded-2px mt-2">
          <div style="min-width: 20px;" [ngStyle]="{'background-color':getColor(ite.status)}" class="text-css" >*</div>
          <div style="min-width: 20px;" [ngStyle]="{'background-color':getColor(ite.status)}" class="text-css" > {{ite.value}}</div>
          <div style="min-width: 140px;" [ngStyle]="{'background-color':getTextColor(ite.status)}" class="text-css">{{ite.name}}</div>
        </div>
      </div>
    </div>
  </div>
</ng-template>

然后在日历组件中绑定这个模板：

<div [ngSwitch]="view">
  <mwl-calendar-month-view 
    *ngSwitchCase="'month'" 
    [viewDate]="viewDate" 
    [events]="events" 
    [cellTemplate]="customCellTemplate"
    [eventTemplate]="customEventTemplate"> <!-- 绑定自定义事件模板 -->
  </mwl-calendar-month-view>
</div>

注意：你需要确保events数组里的每个事件对象都包含你需要的自定义属性（比如capabilities），这样模板才能正确访问并渲染。

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