Angular 6 fullCalendar：鼠标悬浮事件时显示弹出窗口

Question

我是一名能够翻译文本的助手。

我正在使用Angular 6应用程序中的fullCalendar。我想在鼠标悬停在事件上时显示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方法可以通过调用它的方法来简单地打开弹出窗口，因为它是一个指令。

如果有人知道任何解决方案，无论是使用fullCalendar弹出窗口方法（不使用jquery）还是通过ng-template显示，都将非常感谢。

- hira12

---

是的，我已经提到过了。我正在尝试使用Angular的Bootstrap组件，但它不起作用，不知道我在这里做错了什么。 - hira12

好的。我有点困惑，因为你说“使用fullCalendar弹出框方法”...但实际上并没有这样的东西。 - ADyson

只有在使用jQuery时才能这样做。例如：https://stackoverflow.com/questions/28992871/fullcalendar-v2-show-popover-on-the-top-of-slot-of-weekly-view - hira12

fullCalendar需要jQuery，因此您必须运行jQuery。为什么您关心不使用jQuery呢？ - ADyson

除非您使用仍处于alpha版本的4.x分支，否则它仍需要jQuery才能运行。 - ADyson

Answer 1

我正在为我的Angular 10应用程序使用此解决方案，与FullCalendar 5.3一起。 库tippy.js非常容易集成和使用- https://atomiks.github.io/tippyjs/

不需要额外的工具提示HTML元素。只需使用fullcalendar eventDidMount渲染钩子将tippy工具提示添加到您的事件中：

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

- Carina Holmes

---

这是 Angular 应用程序的绝佳解决方案。它对我也起作用。 - vub

Answer 2

你可以通过使用ng-container和*ngIf或[hidden]来简单实现。

而不是使用其他方法。

<ng-template #calendarPopover></ng-template>

使用

<ng-container *ngIf="isHidden" #calendarPopover>...</ng-container>

注意：我们使用了ng-container，并通过*ngIf来控制它的显示。

TS

import { Component } from '@angular/core';

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: [ '...' ]
})
export class AppComponent  {
  isHidden = false;
}

触发器

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

注意：(mouseenter)和mouseleave请查看演示

- Amir Fawzy

---

谢谢您的回复。这不是我想要实现的功能。我想在事件上显示弹出窗口，并且弹出窗口必须仅显示与该事件相关的信息。就像这样：https://fullcalendar.io/docs/event-tooltip-demo - hira12

Answer 3

我使用 ngx popover 和 tether.js 配合 ng-full calendar 制作了自定义弹出框组件。现在，弹出框可以在任何元素上显示，不再局限于按钮。

这里是演示 URL： https://ngfullcalendarngxpopover.firebaseapp.com 这是 repo URL： https://github.com/raoshahid799/ng-full-calendar-ngx-popover

- Shahid Islam