JQuery Qtip trigger on FullCalendar dayClick

Question

I have jquery fullcalendar . I would like to call jQuery QTip (or another jquery solution (e.g. lightbox)) when I click on a day to open a list of options. This question is similar to this question already published , but it is different enough to guarantee a new question.

There is a callback event for this, but I'm not sure how to integrate it using 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 background color just for fun $(this).css('background-color', 'red'); } }); 

This obviously triggers warnings and changes the color of the clicked cell.

Here is another example showing that QTip is integrated for event hangs.

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

This example shows the guidance callback used to start QTIP.

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

UPDATE 05/05/2010

Craig on the Qtip forums suggested using viewDisplay callback as an alternative to DayClick callback, which seems to be causing all kinds of problems. (Browser lock is most noticeable).

Here is the message:

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 displays a tooltip when you click on a day. However, a few problems.

• As far as I can tell, there is no date information available through this callback, which makes it difficult to display a tooltip specific to the selected date.
• This callback does not have information about clicks X and Y, which makes it impossible to put a tooltip next to the pressed date.

All help is much appreciated!

Thanks,

Tim

Answer 1

This is done as css to apply to 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 ensures that Qtip is not created every time you click on the same date.

One small problem that may arise is that you want to access some data from your event inside the dayClick function. But again, this can be a workaround.

Cheers, LionHeart

Answer 2

I have been working with fullCalendar and Qtip for a week now, and for me the knepe solution should work in the ideal case.

First you can check if the function is actually called or not. Try something like:

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

If clicking on a day gives you a warning with that date, the problem is with the Qtip implementation. If you do not receive a warning, the problem is with the implementation of fullCalendar.

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

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

Finally, be sure to check out the docs: http://craigsworks.com/projects/qtip/docs/reference/#show

Answer 3

If the popup doesn't work for you, try using an older version of jquery.

I tried with jquery-1.4 and now it works. I tried with jquery-1.2.6 and it works fine.

See a discussion of using older jquery to create qtips with fullcalendar

Answer 4

I see two possibilities that may arise. One, you add an invisible div to the document, 20px times 20px or so. During the day, press the callback, you will place it in the middle of the considered table cell (take it with $('td.fc-day' + dayNr) ) and make it visible (you can also place it with the mouse pointer). Then call click() on it so that a tooltip appears.

The second possibility: you call qtip on each cell of the table (on $('div.fc-content').find('td') or so) and do not use dayClick at all. Or you combine both ideas and fire an event for qtip in a dayClick .

I would choose the opportunity, I think, because it includes less event listeners. However, it is assumed that you have the same tooltip, regardless of the specific day (but the tooltip can also be configured before you show it).

Hope this makes sense.

Answer 5

I don’t know exactly what you want to show in the tooltip, but can you use it:

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

The 'this' callback contains the <td> day of the click. Perhaps execute the “date” based html rendering function and call it from the qtip trigger:

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

Answer 6

I did not use qTip, to be honest, but according to its documentation, the "show" option determines when to show the tooltip, by default it is set to "mouseover", so try changing it to 'click', for example:

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