<mat-tab-group animationDuration="0ms" class="mat-elevation-z8" (selectedIndexChange)="onTabChange($event)" style="padding: 10px 0px">
    <!-- <mat-tab-group animationDuration="0ms" class="mat-elevation-z8" (selectedIndexChange)="onTabChange($event)" style="padding: 10px 0px"> -->
    
        <mat-tab>
            <ng-template mat-tab-label>
                {{ 'calendar_configuration.week_scheduler' | translate }}
            </ng-template>
            <div style="padding: 5px 2px 10px">
                <byte-week-scheduler-form [weekConfig]="weekConfig" #weekScheduler [mode]= "mode" (dirtyChange)="dirtyChangeForm()"></byte-week-scheduler-form>
             </div>
    
        </mat-tab>
    
        <mat-tab> 
            <ng-template mat-tab-label>
                {{ 'calendar_configuration.calendar_exception' | translate }}
            </ng-template>
            <div style="padding: 5px 2px 10px">
                <byte-calendar-exception-grid [mode]= "mode" #calendarException [calendarID]="calendarId" [templateDefinition]="templateDefinition" (dirtyChange)="dirtyChangeForm()"></byte-calendar-exception-grid>
            </div>
    
        </mat-tab>
    </mat-tab-group>