Syncfusion Gantt - Angular 库。为事件标记创建自定义工具提示答案

【问题标题】：Syncfusion Gantt - Angular library. Create custom tooltip for event markersSyncfusion Gantt - Angular 库。为事件标记创建自定义工具提示
【发布时间】：2022-08-02 18:42:00
【问题描述】：

我试图了解我们如何在为 Angular 制作的同步融合甘特图库中自定义事件标记的工具提示。

有为甘特图创建自定义工具提示的示例；但它们似乎只适用于任务和基线项目。我找不到如何为事件标记创建自定义工具提示的示例。

默认情况下，工具提示如下所示

我想要实现的主要是日期的格式。我们的系统日期需要格式化为YYYY-MM-DD，但我不明白如何创建自定义工具顶部。

在官方文档示例页面上，他们有这个： https://ej2.syncfusion.com/angular/demos/#/material/gantt/tooltip-template

其中向您展示了如何获取自定义基线工具提示。

但是如何获得事件标记的自定义工具提示？

我对此主题进行了一些调查，似乎在 2022 年 8 月 1 日发布的当前版本中，这是不可能的。文档中列出了一个事件 - ej2.syncfusion.com/angular/demos/#/material/gantt/events，其中提到了 beforeTooltipRender。在调试时，我发现任务和基线具有填充的数据属性。不会为事件标记填充数据。我认为 syncfusion 需要更新库才能做到这一点

标签： angular typescript syncfusion ej2-syncfusion ej2-gantt

【解决方案1】：

来自 Syncfusion 支持的问候。

我们可以通过使用 ejs-tooltip 控件创建自定义工具提示来自定义事件标记的工具提示。使用此控件，您可以将日期自定义为您想要的格式，并将其设置为beforeRender 事件中工具提示的内容。下面的代码 sn-ps 演示了解决方案。

App.component.html

<ejs-tooltip id="tooltip" target='.e-span-label' (beforeRender)="onBeforeRender($event)" [content]="content">

应用组件.ts

public onBeforeRender(args: any) {
  let label =
    '<tr class = "e-gantt-tooltip-rowcell"><td>Label:</td><td colspan="3">' +
    args.target.innerHTML +
    '</td></tr>';
  let date =
    '<tr class = "e-gantt-tooltip-rowcell"><td>Date:</td><td colspan="3">' +
    this.formatDate(args.target.offsetParent.ariaLabel.split(' ')[2]) +
    '</td></tr>';
  this.content =
    '<table class = "e-gantt-tooltiptable"><tbody>' +
    label +
    date +
    '</tbody></table>';
}



public formatDate(date) {
  var d = new Date(date),
      month = '' + (d.getMonth() + 1),
      day = '' + d.getDate(),
      year = d.getFullYear();

  if (month.length < 2) month = '0' + month;
  if (day.length < 2) day = '0' + day;
  return [year, month, day].join('-');
}

样本：https://stackblitz.com/edit/angular-4lnh62?file=app.component.ts

问候，莫妮莎。

【讨论】：