在 angular component schedule syncfusion 中获得专业的#dateHeaderTemplate

Question

我需要进入模板 #dateHeaderTemplate 正在进行的专业的 ID 是什么，因为我需要获取一天中的开始时间和结束时间并显示在 header .

从这个link你可以看到我们可以用自定义元素改变#dateHeaderTemplateheader。

如果我有办法像在 #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 问候。

我们无法在 dateHeaderTemplate 中获取资源 ID，我们建议您使用调度程序的 renderCell 事件来显示日期 header 的资源开始和结束时间。请参考以下示例。

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);
  }
}

在 angular component schedule syncfusion 中获得专业的#dateHeaderTemplate

get professional inside #dateHeaderTemplate in angular component schedule syncfusion

schedule

syncfusion

typescript

angular