получить профессиональный внутри #dateHeaderTemplate в угловой синхронизации графика компонента

Question

Мне нужно попасть внутрь шаблона. #dateHeaderTemplate Какой идентификатор уезжающего специалиста, потому что мне нужно получить время начала и окончания дня и отобразить в заголовке.

Отпо этой ссылке вы можете видеть, что мы можем изменить заголовок #dateHeaderTemplate с настраиваемыми элементами.

Если есть способ получить значение перкуссии таким же образом, как я получаю в #resourceHeaderTemplate Я могу получить Pro ID.

component.ts:

  public getStartTimeAndEndTime(data): string {

    // values containing data
    // {date: Mon Oct 21 2019 00:00:00 GMT-0300 (Hora padrão de Brasília), type: "dateHeader"}

    // I need here a way to identify which professional is being covered

    return '13:30 - 18:30';
  }

  public getDateHeaderText(value: Date): string {
    return this.instance.formatDate(value, { skeleton: 'Ed' });
  }

component.html:

<ng-template #resourceHeaderTemplate let-data>

   <!-- here I have the professional id -->

    <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>
        <!-- 
            Here besides getting the date I also need the professional id
             that comes inside the 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>
</e-resources>

Answer 1

Syncfusion Greetings.

Мы не можем получить идентификатор ресурса внутри dateHeaderTemplate, вместо этого мы предлагаем использовать событие renderCell планировщика, чтобы отобразить начальный и конечный час ресурса в заголовке даты. Пожалуйста, обратитесь ниже образец.

https://stackblitz.com/edit/angular-mf9hdq-au5ue2?file=app.component.ts

onRenderCell(args: RenderCellEventArgs): void {

  // Here we can retrieve resource data while rendering date header cells
  if (args.elementType == 'dateHeader') {
    let resData: any = this.scheduleObj.getResourcesByIndex(parseInt(args.element.getAttribute('data-group-index'), 10));
    let ele: HTMLElement = createElement('div', {
      innerHTML: ""+resData.resourceData.startHour +" - "+resData.resourceData.endHour,
      className: 'res-name', styles: 'padding-top: 5px'
    });
    (args.element).appendChild(ele);
  }
}