鼠标悬停事件时Angular 6 fullCalendar Display弹出框

Question

我在Angular 6应用程序中使用fullCalendar。我想在将鼠标悬停在this之类的事件上时显示全日历弹出窗口。我想通过我的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);
  }

类似于帖子here

我想让ng-template打开显示。我已经尝试过ngbPopover，但与ngbModal不同，ngbPopover没有打开方法，因为它是directive，所以只能通过调用它的方法来简单地打开弹出窗口。

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

Answer 1

您可以使用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查看Demo

Answer 2

我借助ngx popover和tether.js为ng-full日历创建了自定义popover组件。现在popover可以显示在任何元素上。现在，它不仅取决于按钮。

这是演示网址： https://ngfullcalendarngxpopover.firebaseapp.com

这是回购网址： https://github.com/raoshahid799/ng-full-calendar-ngx-popover

Answer 3

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

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

import construct

def unshift(value, context):
    return value / 128

def shift(value, context):
    return value * 128

data = construct.Struct(
    x = construct.ExprAdapter(construct.Int16ul, unshift, shift)
)

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

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

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

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

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