primeng-schedule事件的工具提示

时间:2017-05-09 20:22:36

标签: fullcalendar primeng

enter image description here 下面是我在Angular2中创建的Primeng计划。我可以将事件添加到日历中。我添加了几天点击,左箭头和右箭头的事件。

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

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

2 个答案:

答案 0 :(得分:2)

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

Add to the `.ts` file:

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

答案 1 :(得分:1)

fullcalendar中没有工具提示的直接选项。但您可以使用外部库。 Fullcalendar在其qtip2中提供documentation。 有一个例子,你有fullcalendar&amp; qtip2。

jsfiddle.net/N78hs/1649/