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 question is similar to this question already posted, however different enough to warrant a new question.

There is an event callback for this but I am unsure how to integrate this with jQuery Qtip...

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

        if (allDay) {
            alert('Clicked on the entire day: ' + date);
        }else{
            alert('Clicked on the slot: ' + date);
        }

        alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);

        alert('Current view: ' + view.name);

        // change the day's background color just for fun
        $(this).css('background-color', 'red');

    }
});

This obviously brings up alerts and changes the colour of the clicked cell red.

Here is another example showing QTip being integrated to hover on events.

    $('#calendar').fullCalendar({
    ...
    eventRender: function(event, element, view)
    {
        element.qtip({ content: "My Event: " + event.title });
    }
   ...
 });

This example shows the hover callback being used to trigger QTIP.

Now I just need to combine these two examples...

UPDATE 26/05/2010

Craig on the Qtip forums has suggested using the viewDisplay callback as an alternative to the DayClick callback which seems to be causing all sorts of problems. (Locking up the browser being the most prominent).

Here is the post:

Here is the code:

viewDisplay: function() {
                  var calendar = $(this);

                $(this).qtip({
                   content: 'TEST',
                   position: {
                 my: 'top center',
                 at: 'top center'
                   },
                   show: 'click',
                   hide: 'click',
                   style: {
                 tip: true
                   }
                })
         },

This method shows a tooltip when a day is clicked. A few problems however.

1. As far as I can tell there is no date information accesible through this callback, making it hard to show a tooltip specific to the date clicked.
2. There is no X and Y click information accessible through this callback making it near impossible to put the tip next to the date clicked.

All help is very much appreciated!

Thanks,

Tim

Lexicologist

Answer 1

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

Anamorphoscope

Hey LionHeart. You are a champion! WOW thankyou so much. This is quite amazing and works almost perfectly. One small thing... I need to avoid triggering the qtip if 'allDay' is false from the 'dayClick' event callback. I am able to access the data but how do I add it to the if statement? Thanks again, Tim – Lexicologist

See if this works : Change if(typeof $(this).data("qtip") !== "object") { To if(typeof $(this).data("qtip") !== "object" && allDay) { – Anamorphoscope

This is working. But after show the tooltip and click again on the date, then tooltip is not displaying. – Virgel

Answer 2

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

Anamorphoscope

Hi there Lionheart, Thanks for posting. I have confirmed that the FullCalendar dayClick callback is working perfectly. It seems to be an issue with Qtip. The symptoms are: User clicks on day cell. Nothing happens. User clicks on that same day cell, browser hangs. On fast machines it renders a Qtip after about 10 sec. On slower machines the browser notifies the user that the script is causing the system to slow. There is obviously some nasty loop going on here, but I am at a losss to debug it. Any suggestions would still be greatly appreciated. – Lexicologist

A suggestion on the Qtip forums has been to use the viewDisplay callback. Something I would have never thought of. The post is here craigsworks.com/projects/forums/…. I will amend the original question to include the latest findings shortly. – Lexicologist

What Craig has suggested is useful when you have to apply the Qtip on events ( i.e. strips shown inside the date td ). What I got from your initial requirements, is you require Qtip to appear on click of a day ( i.e. the date td itself ). I have devised a small solution for you. See if it works. It is given below. – Anamorphoscope

Answer 3

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

Malayoindonesian

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.

Rochellrochella

Hello, I am trying to understand the first solution you talked about. Is the 20px div used to trigger QTip. Does it only trigger on Divs? After seeing this post #1944738 I was hoping the solution would be a lot simpler. Thanks Tim – Lexicologist

Hi Tim, yes, these solutions are a bit complicated. I have never worked with FullCalendar, maybe that is why. You got that right, the div is used to trigger QTip. It does not only trigger on Divs, however. Maybe someone with some FC experience can help, sorry that's all I got for the moment. – Rochellrochella

Cheers Tom! I appreciate your help :) – Lexicologist

Answer 5

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

Gerrit

Hello, This is almost it, however Qtip isn't working as expected. When I click on a Day, nothing happens. When i mouseout and then mouse over that clicked day Qtip fires. This must be because it is only triggering on mouse over. How can I fix this. I have been looking at its documentation , but keep crashing my browser when I try to implement it. Please Help, Thanks Tim – Lexicologist

Answer 6

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

Gerrit

Sadly this doesnt work. Clicking a cell once does nothing. Clicking that same cell again stalls the browser for about 10seconds? This is the same for all days in the table. No Qtip appears though. – Lexicologist