pop -up para calendário completo em jQuery

Question

Preciso mostrar um pop -up (pop -up de balão como no Google Calendar) enquanto cria um evento no calendário completo do jQuery.

Algum melhor plugins para o pop -up que aparece como balão e também que lida com os eventos de clique (que estou usando para criar/editar/excluir eventos do pop -up)?

Answer 1

Eu escrevi meu próprio pop -up, que exibe usando a div com posição absoluta.

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

Ligar para $('#addEvent').css({ left: xPos, top: yPos }).show().fadeIn(); com alguns javascripts para calcular a posição do clique do mouse e mostrar o pop -up.

Answer 2

Eu usei Qtip Com FullCalendar e está funcionando muito bem!

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

Apenas certifique -se de definir seu QTIP no evento EventRender da FullCalendar. :)

O único problema que notei (com jQuery 1.3) é que, quando o pop-up QTIP desaparece, ele inicia seu desbotamento atrás da grade estilizada do FullCalendar. Depois disso, poucos quadros, tudo bem. Além disso, isso poderia muito bem ser um problema com algumas outras coisas que estou acontecendo no meu projeto. Estou com preguiça de depurar ainda mais para que sua milhagem possa variar. ; p

Answer 3

o Qtip O plug -in pode lidar com conteúdo arbitrário nas dicas de ferramentas, incluindo a capacidade de atribuir manipuladores de eventos e outros enfeites para obter a funcionalidade mais rica.

Veja o demos.

Answer 4

Aqui está minha implementação. Eu fiz isso no Hover, Bt, se você quiser clicar, basta alterar o manipulador de eventos

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

                                }

                    });

e pelo menos:

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

Answer 5

O plugin "balão" em si não precisa lidar com o evento de clique, pois o FullCalender já fornece um retorno de chamada configurado para isso ...

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

Se você está procurando "balões" do estilo da dica de ferramentas, o QTIP, conforme recomendado, é uma boa escolha. Você pode criar a dica de ferramenta em tempo real com a função EventClick, conforme necessário, talvez buscando o conteúdo da ponta de outro lugar.

Answer 6

Experimente este ... é baseado em Ajax, mas você pode removê -lo, se quiser. Você também pode vincular seus eventos aos controles que seu desejo.

JQuery Ajax Tooltip

Answer 7

Se o pop -up não funcionar para você, tente usar uma versão mais antiga do jQuery.

Eu tentei com o JQuery-1.4 e agora funciona. Eu tentei com JQuery-1.2.6 e funciona perfeitamente.

Ver Uma discussão sobre o uso do jQuery mais antigo para fazer os QTIPs funcionarem