Customizing event appearance primefaces schedule

Question

I'm using the Primefaces Schedule component to render events in my web app. But i need to do a little trick with him. For each rendered event i need to show a tooltip with event details. Using the window.onload listener and some jquery functions is easy to display the tooltips of the current date frame. But, since the schedule uses ajax to display the next date frame when i press the next and prev buttons, the tooltip crashes. I've tried using the:

window.addEventListener('DOMSubtreeModified', function(){
    // create bubble popups
    $('.fc-event-inner.fc-event-skin').CreateBubblePopup( options );
}, false);

But seems that it requires too much processing and the page gets slow. There is some other way to add the tooltips to each event rendered?

don't you use jquery delegate or on ? to bind those tooltips ? something like $(document).delegate(".fc-event-inner.fc-event-skin", "hover", function (event) {if( event.type === 'mouseenter' ) {$('.fc-event-inner.fc-event-skin').CreateBubblePopup( options );}}); — Daniel
@Daniel Thanks man! But the 'hover' event just fires when the mouse goes out of the div. I changed to 'mouseover' event but this doesn't fires. I need the tooltip when the mouse is over the div. — mnatan.brito
it should enter fired twice , once for mouseenter and second for mouseleave try only .fc-event-inner or only .fc-event-skin $(document).delegate(".fc-event-inner", "hover", function (event) { if( event.type === 'mouseenter' ) { $('.fc-event-inner.fc-event-skin').CreateBubblePopup( options ); } else{ //hide? } }); — Daniel
@Daniel He only fires the 'mouseleave' event. What might be happening? — mnatan.brito
maybe its being "hijacked" somehow... try the following three mouseenter mouseover mouseover — Daniel

Daniel Daniel · Accepted Answer · 2012-10-04T21:08:43

Try it like this:

$(window).load(function() {
   $(document).delegate(".fc-event-inner", "mouseenter mouseover", function(event){
       $('.fc-event-inner.fc-event-skin').CreateBubblePopup( options );

   });
});

Update

I had this feeling that somewhere in the scheduler js file they doing stopPropagation() on mouseover...

look at the following piece of code from ther js file located at primefaces-3.4.1-sources\META-INF\resources\primefaces\schedule

/* Event Element Binding
-----------------------------------------------------------------------------*/


function lazySegBind(container, segs, bindHandlers) {
    container.unbind('mouseover').mouseover(function(ev) {
        var parent=ev.target, e,
            i, seg;
        while (parent != this) {
            e = parent;
            parent = parent.parentNode;
        }
        if ((i = e._fci) !== undefined) {
            e._fci = undefined;
            seg = segs[i];
            bindHandlers(seg.event, seg.element, seg);
            $(ev.target).trigger(ev);
        }
        ev.stopPropagation();
    });
}

So...

Try to remove ev.stopPropagation();

By the way , know that the scheduler is actually a FullCalendar jQuery plugin , so you might find some usefull information if you google for fullcalendar tooltip

Here is the link for the modified Primefacess 3.4 jar (no stopPropagation for scheduler events)

Customizing event appearance primefaces schedule

1 Answers