javascript - example - fullcalendar js events

Activar jQuery Qtip en FullCalendar dayClick

Question

Tengo un completo calendario de jquery . Me gustaría desencadenar jquery QTip (u otra solución de jquery (como un lightbox) cuando hago clic en un día para que aparezca una lista de opciones. Esta pregunta es similar a esta pregunta ya publicada , pero lo suficientemente diferente como para justificar una nueva pregunta.

Hay un evento de devolución de llamada para esto, pero no estoy seguro de cómo integrar esto con jQuery Qtip ...

    $(''#calendar'').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {

        if (allDay) {
            alert(''Clicked on the entire day: '' + date);
        }else{
            alert(''Clicked on the slot: '' + date);
        }

        alert(''Coordinates: '' + jsEvent.pageX + '','' + jsEvent.pageY);

        alert(''Current view: '' + view.name);

        // change the day''s background color just for fun
        $(this).css(''background-color'', ''red'');

    }
});

Esto obviamente genera alertas y cambia el color de la celda en la que se hizo clic en rojo.

Aquí hay otro ejemplo que muestra cómo QTip se integra para desplazarse por los eventos.

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

Este ejemplo muestra la devolución de llamada activada que se utiliza para activar QTIP.

Ahora solo necesito combinar estos dos ejemplos ...

ACTUALIZACIÓN 26/05/2010

Craig en los foros de Qtip ha sugerido usar la devolución de llamada viewDisplay como una alternativa a la devolución de llamada de DayClick que parece estar causando todo tipo de problemas. (Cerrando el navegador siendo el más prominente).

Aquí está la publicación:

Aquí está el código:

viewDisplay: function() {
                  var calendar = $(this);

                $(this).qtip({
                   content: ''TEST'',
                   position: {
                 my: ''top center'',
                 at: ''top center''
                   },
                   show: ''click'',
                   hide: ''click'',
                   style: {
                 tip: true
                   }
                })
         },

Este método muestra una información sobre herramientas cuando se hace clic en un día. Algunos problemas sin embargo.

1. Hasta donde puedo decir, no hay información de fecha accesible a través de esta devolución de llamada, por lo que es difícil mostrar una información sobre herramientas específica a la fecha en que se hace clic.
2. No hay información de clic X e Y accesible a través de esta devolución de llamada por lo que es casi imposible colocar la sugerencia al lado de la fecha en que se hizo clic.

¡Toda ayuda es muy apreciada!

Gracias,

Tim

Answer 1

Veo dos posibilidades que podrían funcionar. Primero, agregue un div invisible al documento, 20px por 20px más o menos. En el día, haga clic en devolución de llamada, usted coloca eso en la celda de la mitad del día de la tabla en cuestión ( $(''td.fc-day'' + dayNr) ) y $(''td.fc-day'' + dayNr) visible (también podría colocarlo en el puntero del mouse, tal vez). Luego, click() para que aparezca la información sobre herramientas.

Segunda posibilidad: usted llama a qtip en cada celda de la tabla (por $(''div.fc-content'').find(''td'') o menos) y no usa dayClick en absoluto. O bien, combina ambas ideas y activa el evento para qtip en la dayClick llamada dayClick .

Optaría por la posibilidad uno, supongo, porque implica menos oyentes de eventos. Sin embargo, se supone que tiene la misma información sobre herramientas independientemente del día específico (pero la información sobre herramientas también se puede configurar antes de mostrarla).

Espero que tenga sentido.

Answer 2

No sabe exactamente lo que quiere mostrar en la información sobre herramientas, pero no puede usar esto:

$(''#calendar'').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {
        $(this).qtip({ content: ''some html content'' });
    }
});

En la devolución de llamada ''this'' es la <td> del día cliqueado. Tal vez hacer una función para representar html en función de la ''fecha'' y llamarlo desde el disparador qtip:

$(this).qtip({ content: yourQtipRenderer(date) });

Answer 3

No he usado qTip para ser honesto, pero de acuerdo con su documentación, la opción ''mostrar'' determina cuándo mostrar la información sobre herramientas, parece estar configurado como ''mouseover'' como predeterminado, así que intente cambiarlo a ''clic'', como esta:

$(''#calendar'').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {
        $(this).qtip({ content: ''some html content'', show: ''click'' });
    }
});

Answer 4

Estoy trabajando con fullCalendar y Qtip durante una semana, y para mí la solución de knepe debería funcionar en el caso ideal.

Primero puede verificar si la función se está llamando o no. Pruebe algo como:

$(''#calendar'').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {
         alert(date);
        }
});

Si al hacer clic en un día aparece una alerta con esa fecha, entonces el problema radica en la implementación de Qtip. Si no recibe una alerta, el problema es con la implementación de FullCalendar.

Según lo sugerido por knepe, ''show: click'' debería mostrar el Qtip. Pero si no es así, intente:

show: { when: { event: ''click'' } }

Por último, no olvide consultar los documentos: http://craigsworks.com/projects/qtip/docs/reference/#show

Answer 5

Si la ventana emergente no funciona para usted, intente utilizar una versión anterior de jquery.

Intenté con jquery-1.4 y ahora funciona. Intenté con jquery-1.2.6 y funciona perfectamente.

Vea una discusión sobre el uso de jquery más antiguo para hacer que qtips funcione con fullcalendar

Answer 6

Esto va como css para ser aplicado al Qtip.

$.fn.qtip.styles.tipstyle = {
    width: 400,
    padding: 0,
    background: ''#FFFFFF'',
    color: ''black'',
    textAlign: ''center'',
    border: {
        width: 3,
        radius: 4
    },
    tip: ''bottomMiddle'',
    name: ''dark''
}

Y esta es la función dayClick:

dayClick: function(date, allDay, jsEvent, view) {
    if (typeof $(this).data("qtip") !== "object") {
        $(this).qtip({
            content: {
                prerender: true,
                text: "Hello World"
            },
            position: {corner: {tooltip: ''bottomMiddle'', target: ''topMiddle''}},
            style: {
                name: ''tipstyle''
            },
            show: {
                when: {event: ''click''},
                ready: true
            },
            hide: {
                fixed: true
            }
        });
    }
}

La instrucción if dentro de la función dayClick se asegura de que Qtip no se cree cada vez que haga clic en la misma fecha.

Un pequeño problema que puede surgir es si desea acceder a algunos de los datos de su evento dentro de la función dayClick. Pero nuevamente puede haber una solución para eso también.

Saludos, LionHeart