Trigger jQuery Qtip su FullCalendar dayClick

Question

Ho un jquery fullcalendar. Vorrei attivare jquery QTip (o un'altra soluzione jquery (come un lightbox)) quando clicco su un giorno per visualizzare un elenco di opzioni. Questa domanda è simile a this question already posted, tuttavia abbastanza diversa da giustificare una nuova domanda.

C'è un event callback per questo, ma non sono sicuro come integrare questo 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'); 

    } 
}); 

Questo porta ovviamente avvisi e cambia il colore del rosso delle cellule cliccato.

Ecco un altro esempio che mostra l'integrazione di QTip al passaggio del mouse sugli eventi.

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

Questo esempio mostra il callback al passaggio del mouse utilizzato per attivare QTIP.

Ora ho solo bisogno di combinare questi due esempi ...

AGGIORNAMENTO 26/05/2010

Craig sui forum QTIP ha suggerito di utilizzare la richiamata viewDisplay come alternativa al callback DayClick che sembra causare tutti i tipi di problemi. (Bloccare il browser è il più importante).

Here is the post:

Ecco il codice:

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

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

Questo metodo mostra un tooltip quando un giorno viene cliccato. Alcuni problemi comunque.

1. Per quanto posso dire non ci sono informazioni sulla data accessibili attraverso questa richiamata, rendendo difficile mostrare un suggerimento specifico per la data selezionata.
2. Non ci sono informazioni sui clic X e Y accessibili tramite questa richiamata rendendo quasi impossibile inserire il suggerimento accanto alla data su cui si fa clic.

Tutto l'aiuto è molto apprezzato!

Grazie,

Tim

Answer 1

Questo va come CSS da applicare 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' 
} 

E questa è la funzione 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 
      } 
     }); 
    } 
} 

L'istruzione if all'interno della funzione dayClick fa in modo che Qtip non si crea ogni volta che si fa clic alla stessa data.

Un piccolo problema che potrebbe sorgere è se si desidera accedere ad alcuni dei dati degli eventi all'interno della funzione dayClick. Ma ancora una volta ci può essere una soluzione anche per questo.

Cheers, LionHeart

Answer 2

vedo due possibilità che potrebbero funzionare fuori. Uno, si aggiunge un invisibile div al documento, 20 volte x 20px circa. Nel richiamo del clic del giorno, lo posizionate nel mezzo della cella della tabella del giorno in questione (afferratelo con $('td.fc-day' + dayNr)) e rendetelo visibile (potreste anche posizionarlo sul puntatore del mouse, forse). Quindi chiamare click() per visualizzare il suggerimento.

Seconda possibilità: chiami qtip su ogni cella di tabella (entro $('div.fc-content').find('td') o giù di lì) e non utilizzare affatto dayClick. In alternativa, si combinano entrambe le idee e si attiva l'evento per qtip nel callback dayClick.

Vorrei andare per possibilità uno, immagino, perché coinvolge meno ascoltatori di eventi.Tuttavia, si presuppone che tu abbia lo stesso suggerimento indipendentemente dal giorno specifico (ma il tooltip può anche essere configurato prima di mostrarlo).

Spero che abbia senso.

Answer 3

Non so esattamente ciò che si desidera visualizzare nella descrizione, ma non si può utilizzare questo:

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

Nel callback 'questo' è il <td> del giorno fatto clic. Forse fare una funzione di rendering HTML in base alla 'data' e chiamarlo dal grilletto qtip:

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

Answer 4

non ho usato QTIP ad essere onesti, ma secondo la sua documentazione l'opzione 'spettacolo' determina quando mostrare il tooltip, sembra essere impostato su 'passaggio del mouse' di default, in modo da provare a cambiare a 'click', in questo modo:

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

Answer 5

sto lavorando con fullCalendar e Qtip per una settimana, e per me la soluzione di knepe dovrebbe funzionare nel caso ideale.

È possibile controllare prima se la funzione viene effettivamente chiamata o meno. Provare qualcosa di simile:

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

Se cliccando su un giorno ti dà un avviso di tale data, allora il problema risiede con l'attuazione Qtip. Se non ricevi un avviso, il problema è con l'implementazione fullCalendar.

Come suggerito da knepe, 'show: click' dovrebbe mostrare il Qtip. Ma se non lo è, provare:

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

Infine, non dimenticate di controllare la documentazione: http://craigsworks.com/projects/qtip/docs/reference/#show

Answer 6

Se la popup non funziona per voi, provate ad utilizzare una vecchia versione di jQuery.

Ho provato con jquery-1.4 e ora funziona. Ho provato con jquery-1.2.6 e funziona perfettamente.

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