popup for full calendar in jquery

Question

I need to show a popup (balloon popup as in google calendar) while creating an event in the jquery full calendar.

Any best plugins for the popup which shows as balloon and also which handles the click events (which I am using to create/edit/delete events from popup)?

Answer 1

I wrote my own popup which displays using div with 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 the $('#addEvent').css({ left: xPos, top: yPos }).show().fadeIn(); with some javascripting to calculate the position of mouse click and show the popup.

Answer 2

I've used QTip with fullCalendar and it's working great!

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

Just make sure you're defining your qtip in fullCalendar's eventRender event. :)

The only issue I've noticed (w/ JQuery 1.3) is that when the qtip popup fades-in, it starts its fade-in behind fullCalendar's styled grid. After that first ~few frames, it's fine. Also, this could very well be a problem with some other stuff I have going on in my project. I'm too lazy to debug it further so your mileage may vary. ;p

Answer 3

The qTip plugin can handle arbitrary content in the tooltips including the ability to assign event handlers and whatnot to get richer functionality.

See the demos.

Answer 4

Here is my implementation. i did this on hover, bt if you want 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 doesn't need to handle the click event, as fullcalender already provides a configured callback for that...

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

If you are looking for tooltip style "balloons", Qtip as recommended is a good choice. You could create the tooltip on the fly with the eventClick function on an as-needed basis, perhaps fetching the contents of the tip from somewhere else.

Answer 6

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

jquery ajax tooltip

Answer 7

If the popup does not work for you, try to use an older version of jquery.

I tried with jquery-1.4 and it does now work. I tried with jquery-1.2.6 and it works perfectly.

See a discussion about using older jquery for making qtips work