Para cambiar el encabezado de un selector de fecha en material angular, usamos [calendarHeaderComponent] por ejemplo
<mat-form-field> <mat-label>Date</mat-label> <input formControlName="date" matInput [matDatepicker]="picker" /> <mat-datepicker-toggle matSuffix [for]="picker"> <mat-icon matDatepickerToggleIcon svgIcon="calendar_day"></mat-icon> </mat-datepicker-toggle> <mat-datepicker color="primary" [calendarHeaderComponent]="datePickerHeader" #picker></mat-datepicker> </mat-form-field> Para obtener el selector de fechas en línea, usamos mat-calendar directamente
<mat-calendar [(selected)]="date"></mat-calendar> El desafío es que si trato de usar la directiva calendarHeaderComponent en este componente, arroja un error de que este atributo no está permitido aquí. ¿Como puedo resolver esto?
Suponiendo que customDatePickerHeader es su componente de encabezado personalizado. Intenta enlazar de la siguiente manera:
<mat-calendar [headerComponent]="customDatePickerHeader" [(selected)]="date"></mat-calendar>Habría hecho referencia a una documentación, pero no estoy seguro de que sea fácil encontrar una para el componente mat-calendar en línea. Editaré la publicación si logro encontrarla.