javascript - Angular 6 fullCalendar 在鼠标悬停事件上显示弹出窗口

Question

我在 Angular 6 应用程序中使用 fullCalendar。我想在将鼠标悬停在像 this 这样的事件上时显示完整的日历弹出窗口.我想在不使用 jquery 的情况下通过我的 ts 文件实现这一点。这是我的代码。

HTML:

 <section class="main-content">
  <div *ngIf="calendarOptions">
   <ng-fullcalendar #ucCalendar 
    [options]="calendarOptions" 
    [(eventsModel)]="events"
    (eventClick)="handleClick($event.detail.event.data)"
    (eventMouseOver)="mouseOver($event, calendarPopover)">
    </ng-fullcalendar>
   </div>
 </section>

 <ng-template #calendarPopover>
    <h3>{{toolData .title}}</h3>
  </ng-template>

TS 文件:

mouseOver(event, content){
    var data = event.detail.event.data;
    this.toolData = data;
    console.log(this.toolData);
  }

类似于帖子here

我想让 ng-template 在显示时打开。我已经尝试过 ngbPopover 但与 ngbModal 不同，ngbPopover 没有一个打开方法，可以通过调用它的方法简单地打开 popover，因为它是 directive .

如果有人知道使用 fullCalendar popover 方法(没有 jquery)或通过 ng-template 显示的任何解决方案，我们将不胜感激。

Answer 1

我将此解决方案用于我的 Angular 10 应用程序和 FullCalendar 5.3。库 tippy.js 非常易于集成和使用 - https://atomiks.github.io/tippyjs/

不需要额外的工具提示 html 元素。只需使用 fullcalendar eventDidMount 渲染 Hook 即可为您的事件添加提示工具:

import tippy from "tippy.js";
...
ngAfterViewInit() {
// create calendar and configure it

eventDidMount: (info) => {
  tippy(info.el, {
   content: 'Content to display inside tooltip',
   })
 }
}

如果您想在工具提示中显示动态内容，例如，您可以通过使用将其设置为您的事件标题

eventDidMount: (info) => {
  tippy(info.el, {
   content: info.event.title,
   })
 }
}

不再需要代码。悬停时工具提示会添加到您的事件中。如果你想调整工具提示的样式，你可以使用 .tippy-box 类。例如，我将其更改为主要匹配 Angular Material 的 Mat-Tooltip。刚刚将样式添加到我的组件的 .css 文件中。

.tippy-box {
  color: #fff;
  border-radius: 4px;
  padding: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(97, 97, 97, .9);
  font-family: Roboto, sans-serif;
  font-size: 1rem;
}