fix(calendar): fix custom sbheader templates #4282

Author: hanastasov

projects/igniteui-angular/src/lib/calendar/calendar.component.html

@@ -3,19 +3,15 @@
     <span>{{ getFormattedDate().monthday }}</span>
 </ng-template>
 
-<ng-template let-result #defaultMonth >
-    <ng-container *ngFor="let view of dayViews; index as i;">
-        <div [style.width.%]="100/monthsViewNumber" style="text-align: center">
-            <span tabindex="0" #monthsBtn (keydown)="activeViewYearKB($event)" (click)="activeViewYear()"
-                class="igx-calendar-picker__date">
-                {{ formattedMonth(getViewDate(i)) }}
-            </span>
-            <span tabindex="0" #yearsBtn (keydown)="activeViewDecadeKB($event)" (click)="activeViewDecade()"
-                class="igx-calendar-picker__date">
-                {{ formattedYear(getViewDate(i)) }}
-            </span>
-        </div>
-    </ng-container>
+<ng-template let-result #defaultMonth let-obj>
+    <span tabindex="0" #monthsBtn (keydown)="activeViewYearKB($event)" (click)="activeViewYear()"
+        class="igx-calendar-picker__date">
+        {{ formattedMonth(getViewDate(obj.index)) }}
+    </span>
+    <span tabindex="0" #yearsBtn (keydown)="activeViewDecadeKB($event)" (click)="activeViewDecade()"
+        class="igx-calendar-picker__date">
+        {{ formattedYear(getViewDate(obj.index)) }}
+    </span>
 </ng-template>
 
 <div *ngIf="selection === 'single' && hasHeader" class="igx-calendar__header">
@@ -36,9 +32,9 @@ <h2 class="igx-calendar__header-date">
                 }">
             <igx-icon fontSet="material">keyboard_arrow_left</igx-icon>
         </div>
-        <div style="display: contents">
-            <ng-container *ngTemplateOutlet="subheaderTemplate ? subheaderTemplate : defaultMonth; context: context">
-            </ng-container>
+        <div *ngFor="let view of dayViews; index as i;" [style.width.%]="100/monthsViewNumber">
+                <ng-template *ngTemplateOutlet="subheaderTemplate ? subheaderTemplate : defaultMonth; context: getContext(i)">
+                </ng-template>
         </div>
         <div tabindex="0" class="igx-calendar-picker__next" #nextMonthBtn 
             igxCalendarScrollMonth [startScroll]="startNextMonthScroll" [stopScroll]="stopMonthScroll" [ngStyle]="{

projects/igniteui-angular/src/lib/calendar/calendar.component.ts

@@ -591,6 +591,15 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
         return nextMonthDate;
     }
 
+    /**
+     * @hidden
+     */
+    public getContext(i: number) {
+        const date: Date = new Date(this.viewDate);
+        date.setMonth(date.getMonth() + i);
+        return this.generateContext(date, i);
+    }
+
     /**
      * @hidden
      */
@@ -758,8 +767,9 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
      * the calendar templates.
      * @hidden
      */
-    private generateContext(value: Date) {
+    private generateContext(value: Date, i?: number) {
         const formatObject = {
+            index: i,
             monthView: () => this.activeViewYear(),
             yearView: () => this.activeViewDecade(),
             ...this.calendarModel.formatToParts(value, this.locale, this.formatOptions,

projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss

@@ -360,6 +360,9 @@
         align-items: center;
         padding-bottom: $cal-picker-padding;
         position: relative;
+        div {
+            text-align: center;
+        }
     }
 
     %cal-picker-arrow {