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.