Please Log-in or Register to get full access to the forums.


Post Reply 
 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Google Calendar like bubble for Jquery FullCalendar
16th May, 05:50
Post: #1
Google Calendar like bubble for Jquery FullCalendar
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
Find all posts by this user
Quote this message in a reply
18th May, 19:05
Post: #2
RE: Google Calendar like bubble for Jquery FullCalendar
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
					}
				})
			})
		}
	});
});
Visit this user's website Find all posts by this user
Quote this message in a reply
26th May, 00:33
Post: #3
RE: Google Calendar like bubble for Jquery FullCalendar
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 Smile

Thanks

Tim
Find all posts by this user
Quote this message in a reply
27th May, 11:51
Post: #4
RE: Google Calendar like bubble for Jquery FullCalendar
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
Visit this user's website Find all posts by this user
Quote this message in a reply
10th June, 23:44
Post: #5
RE: Google Calendar like bubble for Jquery FullCalendar
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
					}
				})
			})
		}
	});
});
Find all posts by this user
Quote this message in a reply
14th June, 13:14
Post: #6
RE: Google Calendar like bubble for Jquery FullCalendar
Any errors rcooke?
Visit this user's website Find all posts by this user
Quote this message in a reply
13th July, 17:46
Post: #7
RE: Google Calendar like bubble for Jquery FullCalendar
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
Find all posts by this user
Quote this message in a reply
13th July, 18:21
Post: #8
RE: Google Calendar like bubble for Jquery FullCalendar
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.
Visit this user's website Find all posts by this user
Quote this message in a reply
13th July, 18:33 (This post was last modified: 13th July 18:44 by Sunset Bill.)
Post: #9
RE: Google Calendar like bubble for Jquery FullCalendar
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. Huh
Find all posts by this user
Quote this message in a reply
14th July, 16:41
Post: #10
RE: Google Calendar like bubble for Jquery FullCalendar
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
Find all posts by this user
Quote this message in a reply
15th July, 16:47
Post: #11
RE: Google Calendar like bubble for Jquery FullCalendar
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
Find all posts by this user
Quote this message in a reply
18th July, 05:56
Post: #12
RE: Google Calendar like bubble for Jquery FullCalendar
(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
Find all posts by this user
Quote this message in a reply
19th July, 23:16
Post: #13
RE: Google Calendar like bubble for Jquery FullCalendar
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
Find all posts by this user
Quote this message in a reply
18th October, 07:22
Post: #14
RE: Google Calendar like bubble for Jquery FullCalendar
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
Find all posts by this user
Quote this message in a reply
Post Reply 


Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  Never hide jquery qtip tooltip manjunath@chronus.com 1 886 23rd June 13:00
Last Post: Craig
  [Solved] jquery 1.9.1 stevei 2 1,013 23rd June 12:59
Last Post: Craig
  [Solved] Does 1.x Work with jQuery 1.4.2? bocaj 11 11,774 7th June 03:16
Last Post: thanhquyen
  [Solved] qtips and wp Fullcalendar jcbov 1 776 29th March 14:16
Last Post: Craig
  [Solved] .browser deprecated and removed in jQuery 1.9 Sidekick_John 2 3,872 19th March 07:30
Last Post: Sidekick_John
  qtip 1.0.0 with jquery 1.7.1 is not working in IE shailaja 3 1,490 4th September 12:05
Last Post: Craig
  the plugin do not work correctly with jquery 1.7? vic906 1 1,464 12th April 22:09
Last Post: Craig
  Qtips with jquery UI Issue sherwoodbear79 2 2,257 15th February 15:36
Last Post: sherwoodbear79
  [Solved] Need some help:codes in Jquery BabyShung 1 1,293 29th January 16:35
Last Post: Craig
  Tooltips not loading jQuery or other js files from parent document crodesign 2 1,997 13th January 22:19
Last Post: crodesign



User(s) browsing this thread: 1 Guest(s)