I am trying to access the template #dateHeaderTemplate in order to retrieve the ID of the professional who is scheduled to attend the appointment. This information is needed to display the start and end times of the day in the header.
By visiting this link, you can see that we have the ability to customize the elements in the #dateHeaderTemplate header.
If there is a method similar to obtaining the percussion value as in the #resourceHeaderTemplate, I should be able to retrieve the professional ID.
component.ts:
public getStartTimeAndEndTime(data): string {
// values containing data
// {date: Mon Oct 21 2019 00:00:00 GMT-0300 (Brazil Standard Time), type: "dateHeader"}
// Need to identify which professional is being covered here
return '13:30 - 18:30';
}
public getDateHeaderText(value: Date): string {
return this.instance.formatDate(value, { skeleton: 'Ed' });
}
component.html:
<ng-template #resourceHeaderTemplate let-data>
<!-- Professional ID displayed here -->
<div class='template-wrap'>
<div class="avatar resource-image {{getDoctorImage(data)}}"></div>
<div class="resource-details">
<div class="resource-name">{{getDoctorName(data)}}</div>
<div class="h6">{{ getEspecialidadeName(data) }}</div>
<div class="h5 text-bold" [ngClass]="{'green-fg': getDoctorStatus(data).type === 'atendendo',
'secondary-text': getDoctorStatus(data).type === 'away' }">{{ getDoctorStatus(data).text }}</div>
</div>
</div>
</ng-template>
<ng-template #dateHeaderTemplate let-data>
<div fxLayout="column" fxLayoutAlign="center center">
<div class="date-text h3 text-bold">{{getDateHeaderText(data.date)}}</div>
<div class="h6">{{getStartTimeAndEndTime(data)}}</div>
<!--
In addition to the date, also need the professional ID from ng-template #resourceHeaderTemplate-->
</div>
</ng-template>
<e-resources>
<e-resource field='DoctorId' title='Doctor' name='Doctors' [dataSource]='resourceDataSource'
textField='text' idField='id' colorField='color' workDaysField='workDays' startHourField='startHour'
endHourField='endHour'>
</e-resource>