Angular 6 fullCalendar Display popover on mouseover event

Question

I'm using fullCalendar in an Angular 6 application. I want to display fullcalendar popover while hovering over an event like this . I want to achieve this via my ts file without using jquery. Here's my code.

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 File:

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

Similar to a post here

I want to get the ng-template to open up on display. I have tried ngbPopover but unlike ngbModal, ngbPopover doesn't have an open method that would simply open up the popover by calling it's method since it's a directive .

If anyone knows any solution using either the fullCalendar popover method (without jquery) or displaying via ng-template, any help in this regard would be appreciated.

Answer 1

I am using this solution for my Angular 10 app, with FullCalendar 5.3. The library tippy.js was very easy to integrate and use - https://atomiks.github.io/tippyjs/

No extra tooltip html elements needed. Just use the fullcalendar eventDidMount render hook to add a tippy tooltip to your events:

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

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

If you want to display dynamic content inside your tooltip you can, for example, set it to your event's title by using

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

There is no more code needed. The tooltip is added to your event on hovering. If you want to adjust the styling of the tooltip you can use the class .tippy-box. For example, I changed it to mostly match Angular Material's Mat-Tooltip. Just added the style to my component's .css file.

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

Answer 2

you can do that simple by using ng-container and *ngIf or [hidden]

instead using

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

use

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

notice: we used ng-container and we controlling it's display by *ngIf

TS

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

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

trigger

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

notice: (mouseenter) and mouseleave look at the Demo

Answer 3

I created custom popover component with the help of ngx popover and tether.js for ng-full calendar .now popover can be shown on any elements. Now its not dependent on button only.

Here is demo url: https://ngfullcalendarngxpopover.firebaseapp.com

Here is repo url: https://github.com/raoshahid799/ng-full-calendar-ngx-popover