ventana emergente para calendario completo en jquery

Question

Necesito mostrar una ventana emergente (ventana emergente como en el calendario de Google) mientras creo un evento en el calendario completo de jquery.

¿Algún complemento mejor para la ventana emergente que se muestra como un globo y que también maneja los eventos de clic (que estoy usando para crear/editar/eliminar eventos de la ventana emergente)?

Answer 1

escribí mi propia ventana emergente que muestra el uso div con posición 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>

llamar a la $('#addEvent').css({ left: xPos, top: yPos }).show().fadeIn(); con un poco de javascripting para calcular la posición del clic del ratón y mostrar la ventana emergente.

Answer 2

He usado QTIP con fullCalendar y está funcionando muy bien!

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

Sólo asegúrese de que está definiendo su qtip en caso de eventRender fullCalendar. :)

El único problema que he notado (w / jQuery 1.3) es que cuando el emergente qtip se desvanece en, comienza su fundido de entrada detrás de la rejilla de estilo de fullCalendar. Después de que los primeros ~ pocos fotogramas, está bien. Además, esto podría muy bien ser un problema con algunas otras cosas que he pasando en mi proyecto. Soy demasiado perezoso para depurar aún más para que su experiencia puede variar. ; P

Answer 3

El QTIP complemento puede manejar contenido arbitrario en la información sobre herramientas incluyendo la capacidad de asignar controladores de eventos y lo que sea para obtener una funcionalidad más.

Vea la demos .

Answer 4

Aquí está mi aplicación. Hice esto en vuelo estacionario, bt si desea que se haga clic, sólo cambia el controlador 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) {

                                }

                    });

y, al menos:

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

Answer 5

El "globo" propio plugin no es necesario para controlar el evento clic, como fullcalender ya proporciona una devolución de llamada configurado para que ...

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

Si está buscando información sobre herramientas para el estilo "globos", tal como se recomienda Qtip es una buena opción. Se puede crear la descripción sobre la marcha con la función eventClick en una medida que sea necesario, tal vez ir a buscar el contenido de la punta de otro lugar.

Answer 6

Prueba con esto ... Se basa ajax pero se puede quitar si así lo desea .. También puede enlazar sus eventos a los controles de su necesidad.

jquery ajax información sobre herramientas

Answer 7

Si la ventana emergente no funciona para usted, trate de usar una versión anterior de jQuery.

He intentado con jquery-1.4 y lo hace ahora trabajo. Probé con jQuery-1.2.6 y funciona perfectamente.

una discusión sobre el uso de jQuery para mayores haciendo qtips trabajan