Trigger jQuery Qtip on FullCalendar dayClick

Question

I have a jquery fullcalendar. I would like to trigger jquery QTip (or other jquery solution (such as a lightbox)) when I click on a day to bring up a list of options. This q

Answer 1

I haven't been using qTip to be honest, but according to its documentation the 'show' option determines when to show the tooltip, it seems to be set to 'mouseover' as default, so try changing it to 'click', like this:

$('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {
        $(this).qtip({ content: 'some html content', show: 'click' });
    }
});

Answer 2

This goes as css to be applied to the Qtip.

$.fn.qtip.styles.tipstyle = {
    width: 400,
    padding: 0,
    background: '#FFFFFF',
    color: 'black',
    textAlign: 'center',
    border: {
        width: 3,
        radius: 4
    },
    tip: 'bottomMiddle',
    name: 'dark'
}

And this is the dayClick function :

dayClick: function(date, allDay, jsEvent, view) {
    if (typeof $(this).data("qtip") !== "object") {
        $(this).qtip({
            content: {
                prerender: true,
                text: "Hello World"
            },
            position: {corner: {tooltip: 'bottomMiddle', target: 'topMiddle'}},
            style: {
                name: 'tipstyle'
            },
            show: {
                when: {event: 'click'},
                ready: true
            },
            hide: {
                fixed: true
            }
        });
    }
}

The if statement inside the dayClick function makes sure that Qtip is not created everytime you click on the same date.

One small problem that may come, is if you want to access some of your event data inside dayClick function. But again there can be workaround for that as well.

Cheers, LionHeart

Answer 3

Don't know exactly what you want to show in the tooltip, but can't you use this:

$('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {
        $(this).qtip({ content: 'some html content' });
    }
});

In the callback 'this' is the <td> of the clicked day. Maybe do a function to render html based on the 'date' and call it from the qtip trigger:

$(this).qtip({ content: yourQtipRenderer(date) });

Answer 4

I see two possibilities that might work out. One, you add an invisible div to the document, 20px times 20px or so. In the day click callback, you position that in the middle of the day table cell in question (get hold of it by means of $('td.fc-day' + dayNr)) and make it visible (you could also position it at the mouse pointer, maybe). Then call click() on it to make the tooltip appear.

Second possibility: You call qtip on every table cell (by $('div.fc-content').find('td') or so) and don't use dayClick at all. Or, you combine both ideas and trigger the event for qtip in the dayClick callback.

I would go for possibility one, I guess, because it involves fewer event listeners. However, it assumes you have the same tooltip regardless of the specific day (but the tooltip can also be configured before you show it).

Hope that makes any sense.

Answer 5

I am working with fullCalendar and Qtip for a week now, and to me knepe's solution should work in ideal case.

You can check first whether the function is actually getting called or not. Try something like :

$('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {
         alert(date);
        }
});

If clicking on a day gives you an alert with that date, then the problem lies with Qtip implementation. If you don't get an alert, the problem is with fullCalendar implementation.

As suggested by knepe, 'show: click' should show the Qtip. But if it is not, try :

show: { when: { event: 'click' } }

Lastly, don't forget to check the docs : http://craigsworks.com/projects/qtip/docs/reference/#show

Answer 6

If the popup does not work for you, try to use an older version of jquery.

I tried with jquery-1.4 and it does now work. I tried with jquery-1.2.6 and it works perfectly.

See a discussion about using older jquery for making qtips work with fullcalendar