Trigger jQuery Qtip on FullCalendar dayClick

Question

Hello,

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

Answer 1

Hi Tim,

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 2

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 3

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 4

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 5

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