pop-up pour le calendrier complet en jquery

Question

Je dois montrer un popup (ballon pop-up comme dans Google Agenda) tout en créant un événement dans le calendrier complet jquery.

Les meilleurs plugins pour le menu contextuel qui montre comme ballon et aussi qui gère les événements de clic (que j'utilise pour créer / modifier / supprimer des événements de pop-up)?

Answer 1

J'ai écrit mon propre pop-up qui affiche en utilisant div avec position absolue.

<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>

appelez le $('#addEvent').css({ left: xPos, top: yPos }).show().fadeIn(); avec quelques javascripting pour calculer la position de clic de souris et afficher le menu contextuel.

Answer 2

Je l'ai utilisé Qtip avec fullCalendar et ça fonctionne bien!

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

Assurez-vous que vous définissez votre qtip dans le cas eventRender de fullCalendar. :)

La seule question que je l'ai remarqué (w / JQuery 1.3) est que lorsque le menu contextuel qtip se fane en, il commence son fondu derrière la grille de style de fullCalendar. Après cette première ~ quelques images, il est très bien. En outre, cela pourrait très bien être un problème avec quelques autres trucs je passe dans mon projet. Je suis trop paresseux pour déboguer davantage si votre kilométrage peut varier. ; P

Answer 3

Le plugin Qtip peut gérer le contenu arbitraire dans les infobulles, y compris la possibilité d'assigner des gestionnaires d'événements et ainsi de suite pour obtenir des fonctionnalités plus riches.

Voir la démos .

Answer 4

Voici ma mise en œuvre. Je l'ai fait sur le vol stationnaire, bt si vous voulez cliquez, il suffit de changer le gestionnaire d'événements

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

                                }

                    });

et, au moins:

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

Answer 5

Le plugin « ballon » lui-même n'a pas besoin de gérer l'événement click, comme fullcalender fournit déjà un rappel configuré pour cela ...

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

Si vous êtes à la recherche de style infobulle « ballons », Qtip comme recommandé est un bon choix. Vous pouvez créer l'info-bulle à la volée avec la fonction eventClick sur une base au besoin, peut-être aller chercher le contenu de la pointe d'ailleurs.

Answer 6

Essayez celui-ci ... Il est basé ajax, mais vous pouvez le supprimer si vous voulez .. vous pouvez également lier vos événements aux commandes de votre besoin.

jquery ajax infobulle

Answer 7

Si le popup ne fonctionne pas pour vous, essayez d'utiliser une ancienne version de jquery.

J'ai essayé avec jquery-1.4 et cela ne fonctionne maintenant. J'ai essayé avec jquery-1.2.6 et il fonctionne parfaitement.

Voir une discussion sur l'utilisation de jquery plus pour faisant qtips travail