Pop-up für volle Kalender in jquery

Question

Ich brauche ein Popup (wie in Google Kalender Ballon Pop-up) zu zeigen, während ein Ereignis in den jquery vollen Kalendern zu erstellen.

Jeder bester Plugins für das Popup, die zeigt, wie Ballon und auch die die Click-Ereignisse behandelt (die ich erstellen bin mit / Bearbeiten / Löschen von Ereignissen aus Pop-up)?

Answer 1

Ich schrieb meinen eigenen Popup welcher Displays mit div mit absoluter 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>

rufen Sie die $('#addEvent').css({ left: xPos, top: yPos }).show().fadeIn(); mit einigem Javascripting die Position der Maus klicken und zeigt das Popup zu berechnen.

Answer 2

Ich habe verwendet QTIP mit fullCalendar und es funktioniert super!

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

So stellen Sie sicher, dass Sie die Definition Ihrer qtip in fullCalendar der eventRender Veranstaltung. :)

Das einzige Problem, das ich bemerkt habe (w / JQuery 1.3) besteht darin, dass, wenn die qtip Popup-Fades-in, es beginnt seine Fade-in hinter fullCalendar des gestylten Gitter. Nach diesen ersten ~ paar Frames, es ist in Ordnung. Auch könnte dies sehr wohl ein Problem mit einigen anderen Sachen, die ich in meinem Projekt geht haben. Ich bin zu faul, um es weiter zu debuggen so die Leistung kann variieren. ; P

Answer 3

Die QTIP Plugin beliebige Inhalte in den Tooltips einschließlich der Fähigkeit, assign Event-Handler verarbeiten kann und Dingsbums reiche Funktionalität zu erhalten.

Siehe Demos .

Answer 4

Hier ist meine Implementierung. Ich tat dies auf schweben, bt, wenn Sie klicken möchten, nur den Ereignishandler ändern

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

                                }

                    });

und mindestens folgende Angaben:

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

Answer 5

Der „Ballon“ Plugin selbst nicht das Click-Ereignis behandeln muß, wie fullcalender bietet bereits einen konfigurierte Rückruf für diesen ...

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

Wenn Sie für Tooltip Stil „Ballons“ suchen, Qtip wie empfohlen ist eine gute Wahl. Sie könnten die Tooltip on the fly mit der eventClick Funktion auf einer Basis nach Bedarf erstellen, vielleicht von irgendwo sonst den Inhalt der Spitze zu holen.

Answer 6

Versuchen Sie dieses ... Es Ajax basiert aber Sie können es entfernen, wenn Sie wollen .. Sie können auch binden Ihre Veranstaltungen an die Steuerelemente wollen.

jquery ajax Tooltip

Answer 7

Wenn das Popup für Sie nicht funktioniert, versuchen Sie eine ältere Version von Jquery zu verwenden.

Ich habe versucht, mit jquery-1.4 und es funktioniert jetzt. Ich habe versucht, mit jquery-1.2.6 und es funktioniert perfekt.

Siehe eine Diskussion über die Verwendung von älterem jquery für machen qtips arbeiten