Disparar jQuery Qtip en FullCalendar díaHaga clic en

Question

Tengo jquery fullcalendar. Me gustaría desencadenar jquery QTip (u otra solución de jquery (como una caja de luz)) cuando hago clic en un día para que aparezca una lista de opciones. Esta pregunta es similar a this question already posted, pero lo suficientemente diferente como para justificar una nueva pregunta.

Hay un event callback 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'); 

    } 
}); 

Obviamente, esto nos lleva a alertas y cambia el color rojo de la célula se hace clic.

Aquí hay otro ejemplo que muestra cómo QTip se integra para desplazarse sobre 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 sólo hay que combinar estos dos ejemplos ...

ACTUALIZACIÓN 26/05/2010

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

Here is the post:

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 un texto de ayuda cuando se hace clic en un día. Algunos problemas sin embargo.

1. Por lo que yo puedo decir no existe información accesible a través de esta fecha de devolución de llamada, por lo que es difícil de mostrar un texto de ayuda específica a la fecha ha hecho 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 la ayuda es muy apreciada!

Gracias,

Tim

Answer 1

Esto va como CSS para aplicarlos a la 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 sentencia if dentro de la función dayClick se asegura de que Qtip no se crea cada vez que se hace 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

Answer 2

veo dos posibilidades que podrían funcionar a cabo. Primero, agregue un div invisible al documento, 20px por 20px o menos. En el día, haga clic en Devolución de llamada, sitúe esa posición en la celda de la mitad del día en cuestión (consérvela mediante $('td.fc-day' + dayNr)) y hágala visible (también podría colocarla en el puntero del mouse). Luego llame al click() para que aparezca la información sobre herramientas.

Segunda posibilidad: Llame a qtip en cada celda de la tabla (por $('div.fc-content').find('td') o menos) y no use dayClick en absoluto. O bien, combina ambas ideas y desencadena el evento para qtip en la devolución de llamada dayClick.

Me gustaría ir 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 3

no saben exactamente lo que desea mostrar en la descripción, pero no se puede usar esto:

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

En la devolución de llamada 'esto' es el <td> del día se ha hecho clic. Tal vez hacer una función para representar HTML basado en la 'fecha' y llamarlo desde el gatillo qtip:

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

Answer 4

no he estado usando QTIP para ser honesto, pero de acuerdo con su documentación la opción 'mostrar' determina cuando para mostrar la información sobre herramientas, parece que se pone a 'pasar el ratón' por defecto, así que trate de cambiar a un 'clic', como este:

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

Answer 5

estoy trabajando con fullCalendar y Qtip desde hace 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 le da una alerta con esa fecha, entonces el problema está en ejecución 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 la Qtip. Pero si no es así, tratar:

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

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

Answer 6

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

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

Ver a discussion about using older jquery for making qtips work with fullcalendar