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 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.
- 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.
- 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
