Trigger jQuery Qtip auf FullCalendar dayClick

Question

Ich habe eine jquery fullcalendar. Ich möchte jquery QTip (oder eine andere jquery Lösung (wie eine Lightbox)) auslösen, wenn ich auf einen Tag klicke, um eine Liste von Optionen zu öffnen. Diese Frage ist ähnlich wie this question already posted, jedoch anders genug, um eine neue Frage zu rechtfertigen.

Es gibt eine event callback dafür, aber ich bin nicht sicher, wie dies zu integrieren mit 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'); 

    } 
}); 

Dies bringt offensichtlich Warnungen und ändert die Farbe der Zelle rot angeklickt.

Hier ist ein weiteres Beispiel, das zeigt, dass QTip integriert ist, um auf Events zu schweben.

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

Dieses Beispiel zeigt die Hover-Rückruf triggern QTIP verwendet wird.

Jetzt muß nur diese beiden Beispiele kombinieren ... ich

UPDATE 26.05.2010

Craig auf den Qtip Foren hat vorgeschlagen, den viewDisplay Rückruf als Alternative zu dem DayClick Rückruf mit das scheint alle möglichen Probleme zu verursachen. (Sperren des Browsers ist der prominenteste). Hier

Here is the post:

ist der Code:

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

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

Diese Methode zeigt ein Tooltip, wenn ein Tag angeklickt wird. Ein paar Probleme jedoch.

1. Soweit ich feststellen kann, gibt es keine Datumsinformationen durch diesen Rückruf zugänglich, so dass es schwierig ist, einen Tooltip für das angeklickte Datum anzuzeigen.
2. Es gibt keine X- und Y-Klick-Informationen, auf die über diesen Rückruf zugegriffen werden kann, sodass es fast unmöglich ist, den Tipp neben das angeklickte Datum zu setzen.

Alle Hilfe wird sehr geschätzt!

Danke,

Tim

Answer 1

Dies als CSS geht an die Qtip angewendet werden.

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

Und das ist die dayClick Funktion:

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 
      } 
     }); 
    } 
} 

Die if-Anweisung innerhalb der dayClick Funktion stellt sicher, dass jedes Mal Qtip nicht erstellt wird Sie am selben Tag klicken.

Ein kleines Problem, das möglicherweise auftritt, ist, wenn Sie auf einige Ihrer Ereignisdaten innerhalb der DayClick-Funktion zugreifen möchten. Aber auch hier kann es Abhilfe geben.

Cheers, LionHeart

Answer 2

Ich sehe zwei Möglichkeiten, die funktionieren könnten. Eins, Sie fügen dem Dokument eine unsichtbare div hinzu, 20px mal 20px oder so. Klicken Sie am Tag auf Callback, positionieren Sie das in der Mitte der betreffenden Tag-Tabellenzelle (mit $('td.fc-day' + dayNr)) und machen Sie es sichtbar (Sie könnten es auch am Mauszeiger positionieren, vielleicht). Rufen Sie dann click() darauf an, damit der Tooltip angezeigt wird.

Zweite Möglichkeit: Sie rufen qtip auf jeder Tabellenzelle (von $('div.fc-content').find('td') oder so) und verwenden Sie dayClick überhaupt nicht. Oder Sie kombinieren beide Ideen und lösen das Ereignis für qtip im dayClick Callback aus.

Ich würde für Möglichkeit eins gehen, denke ich, weil es weniger Ereignishörer beteiligt.Es wird jedoch davon ausgegangen, dass Sie unabhängig vom jeweiligen Tag dieselbe QuickInfo verwenden (die QuickInfo kann jedoch auch konfiguriert werden, bevor Sie sie anzeigen).

Hoffnung, die einen Sinn ergibt.

Answer 3

Sie wissen nicht genau, was Sie im Tooltip angezeigt werden soll, aber können Sie diese nicht nutzen:

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

In der Callback ‚this‘ ist die <td> des angeklickten Tag. Vielleicht haben Sie eine Funktion html basierte auf dem ‚date‘ zu machen und aus dem qtip Lockruf:

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

Answer 4

habe ich nicht QTIP benutzen ehrlich zu sein, aber nach ihrer Dokumentation der ‚Show‘ Option legt fest, wenn der Tooltip zu zeigen, scheint es zu ‚Mouseover‘ als Standard festgelegt werden, so versuchen, es zu ändern, um ‚Klick‘, wie folgt aus:

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

Answer 5

ich arbeite mit fullCalendar und Qtip nun seit einer Woche, und für mich sollte die Lösung von knepe im Idealfall funktionieren.

Sie können zuerst prüfen, ob die Funktion tatsächlich aufgerufen wird oder nicht. Versuchen Sie so etwas wie:

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

Wenn an einem Tag, klicken Sie mit diesem Datum eine Warnung gibt, dann ist das Problem mit Qtip Umsetzung liegt. Wenn Sie keine Warnung erhalten, liegt das Problem bei der Implementierung von fullCalendar.

Wie von knepe vorgeschlagen, sollte "show: click" den Qtip anzeigen. Aber wenn dies nicht der Fall, versuchen Sie:

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

Schließlich nicht zu vergessen die Dokumente zu überprüfen: http://craigsworks.com/projects/qtip/docs/reference/#show

Answer 6

Wenn das Popup für Sie nicht funktioniert, versuchen Sie eine ältere Version von Jquery zu verwenden.

Ich habe versucht mit Jquery-1.4 und es funktioniert jetzt. Ich habe versucht mit jquery-1.2.6 und es funktioniert perfekt.

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