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.

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.

• javascript
• angular
• typescript
• fullcalendar

• fullCalendar itself doesn't have a built-in popover method. You would need to use something like Bootstrap's "popper" library or a similar thing - maybe something designed for Angular would be sensible. – ADyson Commented Nov 22, 2018 at 9:44
• Yes, I've already mentioned that. There's a bootstrap ponent for Angular that I'm trying to use but it's not working, don't know what I'm doing wrong here. – hira12 Commented Nov 22, 2018 at 9:52
• Ok. I was confused because you said "using either the fullCalendar popover method "...but there's no such thing – ADyson Commented Nov 22, 2018 at 9:56
• There is but only if you're using jquery. Such as this stackoverflow./questions/28992871/… – hira12 Commented Nov 22, 2018 at 10:04
• well fullCalendar requires jQuery, so you must be running jQuery. Why do you care about not using jQuery? – ADyson Commented Nov 22, 2018 at 10:12

3 Answers 3

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

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

I created custom popover ponent 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.

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