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

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