Render custom template datewise in Angular6 calendar

Question

I have a requirement where i want to render a custom template for particular dates on angular calendar.

I have created a custom template and passed it to calendar like below

<div class="margin-card" *ngFor="let item of chamberStatus">
            <div fxLayout="column">
              <div *ngFor="let ite of item.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-template>
  <div [ngSwitch]="view">
    <mwl-calendar-month-view
      *ngSwitchCase="'month'"
      [viewDate]="viewDate"
      [events]="events"
      [cellTemplate]="customCellTemplate">
    </mwl-calendar-month-view>

However here the template is getting rendered to everysingle cell of the calendar I want unique Ng-template datewise on the calendar.How can i do it? Can i render Ng-template inside Events of calendar?

Render custom template datewise in Angular6 calendar

0 Answers0