Popup for full calendar in jquery

Question

I need to show a popup (popup popup, like in google calendar) when creating event in full jquery calendar.

Any best pop-up plugins that appear as balloons and that handle click events (which I use to create / edit / delete events from the pop-up)?

Answer 1

I wrote my own popup that displays using a div with an absolute position.

<div id="addEvent" style="display: none; position: absolute; width: 400px; z-index: 1000;"> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td> <div class="PopupContainer"> <div class="header"> <img src="<%= ResolveUrl("~/Content/images/closepopup.gif") %>" id="addCalEventClose" title="Close" alt="Close" class="cursorhand" /> </div> <div class="clear" /> <div class="popup"> //Your content goes here </div> </div> <div class="clear" /> <br /> </td> </tr> <tr> <td> <div style="margin-top: -1px"> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td class="taC"> <img src="<%= ResolveUrl("~/Content/images/balloon_arrow.gif") %>" title="" alt="" id="addEventBalloon" /> </td> </tr> </table> </div> </td> </tr> </table> </div> 

call $('#addEvent').css({ left: xPos, top: yPos }).show().fadeIn(); with some javascripting to calculate the mouse click position and show a popup.

Answer 2

I used QTip with fullCalendar and it works great!

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

Just make sure you define your qtip in the eventCender fullCalendar event. :)

The only problem I noticed (w / JQuery 1.3) is that when the qtip popup disappears, it starts to fade behind the grid created in fullCalendar style. After that, the first few frames, this is normal. Also, this could very well be a problem with some other things that I use in my project. I'm too lazy to debug it further so your mileage may change .; R

Answer 3

The qTip plugin can handle arbitrary content in tooltips, including the ability to assign event handlers and the fact that you do not need to use richer functionality.

See demos .

Answer 4

Here is my implementation. I did it on hover, bt, if you want to click, just change the event handler

 $('#calendario').fullCalendar({ events: "/includes/json-events.php", eventDrop: function(event, delta) { alert(event.title + ' was moved ' + delta + ' days\n' + '(should probably update your database)'); }, loading: function(bool) { if (bool) $('#loading').show(); else $('#loading').hide(); }, eventMouseover: function( event, jsEvent, view ) { var item = $(this); if(item.find('.nube').length == 0){ var info = '<span class="nube"><h2>'+event.title+'</h2><img src="'+event.avatar+'" /> <p class="text">'+event.name+'</p><p>'+event.start+' <br /> '+event.end+'</p><p><a href="/post.php?blogid='+event.id+'">read_more</a></p></span>'; item.append(info); } if(parseInt(item.css('top')) <= 200){ item.find('.nube').css({'top': 20,'bottom':'auto'}); item.parent().find('.fc-event').addClass('z0'); } item.find('.nube').stop(true,true).fadeIn(); }, eventMouseout: function( event, jsEvent, view ) { var item = $(this); item.find('.nube').stop(true,true).fadeOut(); }, header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, eventRender: function(event, element) { } }); 

and at least:

 .nube{ position: absolute;left:0;top:0} 

Answer 5

The balloon plugin itself should not handle the click event, since fullcalender already provides a customized callback for this ...

  $('#calendar').fullCalendar({ eventClick: function(calEvent, jsEvent){ // ... your code here ... } }); 

If you're looking for a balloon style balloon tip, Qtip, as recommended, is a good choice. You can create a tooltip on the fly using the eventClick function as needed, possibly retrieving the contents of the tip from another location.

Answer 6

Try this ... This is ajax based, but you can remove it if you want .. you can also bind your events to the controls you want.

jQuery ajax tooltip

Answer 7

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