Google Calendar like bubble for Jquery FullCalendar

[tdmohr]

Hello everyone,

I have been trying for about a week now to try and get jQuery QTip to play nice with jQuery FullCalendar.

Here is my StackOverflow question

Unfortunately I have had no luck in implementing QTip with FullCalendars dayClick() callback.

Ok so here is a sample of what can be done with the fullcalendar dayClick() callback.

JS Code

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

Here is an example of Qtip being fired on Fullcalendars hover event

JS Code

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

And finally here is my attempt at getting Qtip and FullCalendar to talk

JS Code

dayClick: function(date, allDay, jsEvent, view) {
				$('#popup').qtip(
					{
					   content: {
					      title: {
						 text: 'Title for the tooltip, or blank... either will do!',
						 button: 'x' // can put an <img /> tag or any other valid HTML in here. Clicking it closes the tooltip.
					      }
					   },
					   position: {
					      corner: {
						 tooltip: 'bottomLeft', // Display at the top right hand corner like Google Calendar
						 target: 'topRight'
					      },
					      adjust: {
						 screen: true // Keep the tooltip within the viewport at all times
					      }
					   },
					   show: 'click',
					   hide: 'unfocus', // Close the tooltip when it loses focus e.g. anywhere except the tooltip is clicked
					   style: {
					      background: 'white',
					      border: {
						 color: '#ABABAB', // Grey style border
						 radius: 5 // Give it some rounded corners (Note 1px rounded borders aren't supported at the moment)
					      },
					      tip: true // Give it a speech bubble tip (corner is automatically detected)
					   }
					});		
 
        		},

The above code doesn't work. It crashes my browser on both my Linux and Mac machines.

Here is a link to a thread of someone on this forum who had the exact same requirements of QTIP, however I dont know if they were using fullcalendar.

I am so exhausted from this problem and I would be very greatful for any help!

Thanks,

Tim

[Craig]

Tim, try using the viewRender callback instead, which seems a bit more friendly:

JS Code

$(document).ready(function()
{
	var date = new Date();
	var d = date.getDate();
	var m = date.getMonth();
	var y = date.getFullYear();
 
	$('#calendar').fullCalendar({
		editable: true,
		viewDisplay: function() {
			var calendar = $(this);
 
			$('.fc-event').each(function(){
				// Grab event data
				var title = $(this).find('.fc-event-title').text(),
					data = calendar.data('fullCalendar').clientEvents(function(event){
						return event.title === title;
					})[0];
 
				$(this).qtip({
					content: data.title,
					position: {
						my: 'bottom center',
						at: 'top center'
					},
					show: 'click',
					hide: 'click',
					style: {
						tip: true
					}
				})
			})
		}
	});
});

[tdmohr]

Hi Craig,

Thanks for your reply and your most amazing Jquery Tip library there is.

Wow, the most promising results yet.

After pasting in your code there were no signs of a tooltip. Changing the code to this:

JS Code

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

and a tooltip appears at the very bottom of the calendar.

Promising!!!!

I notice that Qtip allows for X and Y positioning. Now all I need is to get the date clicked data from fullcalendar as well as the X/Y co-ordinates and we're in business.

If you have any suggestions or insight, please help

Thanks

Tim

[Craig]

What version of FullCalendar and qTip are you using tdmohr? I built that demo code using the qTip2 source and it works beautifully! Check it out here: http://bazaar.launchpad.net/~craig.craig.../2.0/files

[rcooke]

Craig,

I can't seem to get the code to work either. The best I can do is to get the tip to show up at the bottom of the page. I'm a newbie so maybe it's something stupid or easy to correct. This is the code I'm using:

JS Code

$(document).ready(function() {
 
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
 
		$('#calendar').fullCalendar({
 
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			editable: true,
			allDaySlot: false,
			firstHour: 8,
			minTime: 8,
			maxTime: '21:59',
 
			events: "owners_cal_db.php",
			dayClick: function(date, allDay, jsEvent, view) {
				$('#calendar').fullCalendar( 'changeView', 'agendaDay' );
				$('#calendar').fullCalendar( 'gotoDate', date );
				},
 
			eventRender: function(event, element) {
					element.qtip({ content: event.description,
								   position: {
										corner:{target: 'topRight',tooltip: 'bottomLeft'}
											},	
								   show: 'mouseover',
								   hide: 'mouseout',
						});
					}
		});
 
	});

(18th May 19:05)Craig Wrote:  Tim, try using the viewRender callback instead, which seems a bit more friendly:

JS Code

$(document).ready(function()
{
	var date = new Date();
	var d = date.getDate();
	var m = date.getMonth();
	var y = date.getFullYear();
 
	$('#calendar').fullCalendar({
		editable: true,
		viewDisplay: function() {
			var calendar = $(this);
 
			$('.fc-event').each(function(){
				// Grab event data
				var title = $(this).find('.fc-event-title').text(),
					data = calendar.data('fullCalendar').clientEvents(function(event){
						return event.title === title;
					})[0];
 
				$(this).qtip({
					content: data.title,
					position: {
						my: 'bottom center',
						at: 'top center'
					},
					show: 'click',
					hide: 'click',
					style: {
						tip: true
					}
				})
			})
		}
	});
});

[Craig]

Any errors rcooke?

[Sunset Bill]

I'm trying to get this working, too, loading events from a Google calendar, but no luck so far. Here's the code I'm using, copied from :

JS Code

$(document).ready(function() {
   var date = new Date();
   var d = date.getDate();
   var m = date.getMonth();
   var y = date.getFullYear();
 
  $('#calendar').fullCalendar({
    editable: true,
    viewDisplay: function() {
       alert('viewDisplay');
         var calendar = $(this);
	 $('.fc-event').each(function(){
			 alert($(this));
              // Grab event data
              var title = $(this).find('.fc-event-title').text(),
                 data = calendar.data('fullCalendar').clientEvents(function(event){
                    return event.title === title;
                 })[0];
 
              $(this).qtip({
                 content: data.title,
                 position: {
                    my: 'bottom center',
                    at: 'top center'
                 },
                 show: 'click',
                 hide: 'click',
                 style: {
                    tip: true
                 }
             })
         })
      },

I get the calendar and both alerts so I know my viewDisplay is executing and it's getting into the each() function, but all that happens on a click is I go to a Google calendar page. I've tried changing the show event from 'click' to 'mouseOver', but still get no tips.

I'm using
jquery 1.4.2
fullcalender 1.4.7
qtip 1.0.0-rc3

thanks for any enlightenment,
Bill

[Craig]

Sunset, is the title definitely being retrieved properly, as the qTips won't render if no valid content is provided. Also, you'll need to return false if you want to stop the page changing iirc.

[Sunset Bill]

Oops, I am actually getting an error in Firebug:
f(this).data("qtip") is null
(function(f){f.fn.qtip=function(B,u){v...ses:{tooltip:"qtip-blue"}}}})(jQuery);

---

(13th July 18:21)Craig Wrote:  Sunset, is the title definitely being retrieved properly, as the qTips won't render if no valid content is provided. Also, you'll need to return false if you want to stop the page changing iirc.

Still no luck, even with hard-coded text for content. Really puzzling, as this is basically code I copied from this thread that seems to be working for other people.

[Sunset Bill]

Hi Craig,

Still no luck. I'm using the viewDisplay code from your 18 May response and still not getting my qtip. What's really weird is that nothing happens at all with the code as-is--no qtip, no errors in Firebug, nothing. When I add an alert as the first line in the function, the rest of the code tries to execute and I get the f(this).data("qtip") is null error. I've also tried adding an alert to verify that data.title is picking up the event title, so I know the qtip function is getting valid content. I thought maybe loading my events from a Google calendar might have something to do with it, but I get the same thing with a JSON events list.

I've still got lots of hair--sure would like to keep it that way, and I'd love to be able to show my users cool qtips with event details instead of ugly pop-up windows.

thanks,
Bill

[Sunset Bill]

Aha! It seems to be an issue with jquery. I tried it with jquery 1.3.2 instead of 1.4.2, and I'm now getting a qtip. For some wacky reason, it still only works if I have an alert before $('.fc-event').each(function(){, but it's an improvement.

Bill

[davife]

(13th July 18:21)Craig Wrote:  Sunset, is the title definitely being retrieved properly, as the qTips won't render if no valid content is provided. Also, you'll need to return false if you want to stop the page changing iirc.

Hi,
As an FYI I'm having the same issue and came across this thread. I tried the ViewDisplay solution and had the same results as Sunset Bill although I didn't try an earlier version of jQuery. I'll let you know if I find any clues to the mystery.

David

[Sunset Bill]

Quote:Hi,
As an FYI I'm having the same issue and came across this thread. I tried the ViewDisplay solution and had the same results as Sunset Bill although I didn't try an earlier version of jQuery. I'll let you know if I find any clues to the mystery.

David

@David, hope you can come up with something. I've tried using a setTimeout() before the each() loop to provide some time for my calendars to load, but no luck yet. Also no idea why my qtips are working in FF and IE6 but not in IE7, Opera or Chrome (I'm stuck with a PC, so no idea on Safari)

Bill

[jokepondy]

Hello everyone

I am newone for this forum ..i want to do one Event based calendar like google calendar .... it needs to viewable like week | Day | month | agenda . can anyone give me samples and link for me to get this ... i need to integrate this in to PHP , JQUERY, Mysql (needs to store event)

Thanks and regards
john kennedy