时间戳

首页 > 解决方案 > Angular 6 fullCalendar Display popover on mouseover 事件

javascript - Angular 6 fullCalendar Display popover on mouseover 事件

问题描述

我在 Angular 6 应用程序中使用 fullCalendar。我想在将鼠标悬停在这样的事件上时显示全日历弹出框。我想通过我的 ts 文件而不使用 jquery 来实现这一点。这是我的代码。

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

类似于这里的帖子

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

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

标签： javascriptangulartypescriptfullcalendar

解决方案

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

不需要额外的工具提示 html 元素。只需使用 fullcalendar eventDidMount 渲染钩子为您的事件添加一个提示工具提示：

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

推荐阅读