Tooltip for primeng- schedule events

Question

Below is the Primeng-schedule that I have created in Angular2. I am able to add events to the calendar. I have added events for days click, left and right arrow.

I am looking for tooltip on mousehover for events and days. Is that feature available.

  <p-schedule [events]="events" [eventLimit] ="3" (onViewRender)="loadEvents($event)" (onEventClick)="handleEventClick($event)" 
    (onDayClick)="handleDayClick($event)" ></p-schedule>

See http://stackoverflow.com/questions/22448097/fullcalendar-with-clickable-popup-on-hover for hovering over events. — ADyson, May 18 '17 at 10:59
P.S. Why are you using the "viewRender" callback to load events? You can do it directly via the "events" property. Read the documentation on the various types of dynamic event feed supported: https://fullcalendar.io/docs/event_data/ — ADyson, May 18 '17 at 11:00

score 3 · Answer 1 · edited Nov 16 '19 at 14:04

HTML

<p-schedule [events]="events" [header]="headerConfig" (onViewRender)="loadEvents($event)" (onEventMouseover)="handleMouseOver($event,op)" (onEventClick)="handleEventClick($event)">
</p-schedule>
    <p-overlayPanel appendTo="body" #op>
        <label>Title:{{popOverTitle}}</label>
    </p-overlayPanel>

TS

    handleMouseOver(e, op) {
        this.popOverTitle = e.calEvent.title;
        op.show(e, e.jsEvent.target);
    }

score 1 · Answer 2 · answered May 24 '17 at 06:47

1

There is no directly an option for tooltip in fullcalendar. But you can use external libraries. Fullcalendar offers qtip2 in their documentation. There is an example for you with fullcalendar & qtip2 .

jsfiddle.net/N78hs/1649/

answered May 24 '17 at 06:47

Burak Akyıldız

1,550
15
25

Tooltip for primeng- schedule events

2 Answers2