Angular 6 fullCalendar Отображение всплывающего окна при событии наведения мыши

Question

Я использую fullCalendar в приложении Angular 6.Я хочу отображать всплывающее окно с полным календарем при наведении на событие, например 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);
  }

Похоже на сообщение здесь

Я хочу, чтобы ng-шаблон открылся на дисплее.Я пробовал ngbPopover, но в отличие от ngbModal, ngbPopover не имеет метода open, который бы просто открывал всплывающее окно, вызывая его метод, поскольку это директива .

Если кто-нибудь знает какое-либо решение, использующеелибо метод popover fullCalendar (без jquery), либо отображение через ng-template, любая помощь в этом отношении будет принята.

Answer 1

Я создал пользовательский компонент popover с помощью ngx popover и tether.js для календаря ng-full. Теперь popover можно показывать на любых элементах.Теперь его не зависит только от кнопки.

Вот URL-адрес демо: https://ngfullcalendarngxpopover.firebaseapp.com

Вот URL-адрес репо: https://github.com/raoshahid799/ng-full-calendar-ngx-popover

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 посмотрите на Демо