primeng-计划事件的工具提示

Question

​

下面是我在Angular2中创建的Primeng-schedule。我可以将事件添加到日历中。我已经添加了天点击事件，左箭头和右箭头。

我正在寻找鼠标悬停的事件和日子的工具提示。该功能是否可用。

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

Answer 1

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

Answer 2

在完整的日历中没有直接的工具提示选项。但是你可以使用外部库。Fullcalendar在他们的documentation中提供了qtip2。下面是fullcalendar & qtip2的例子。

jsfiddle.net/N78hs/1649/