Gibt es ein jquery-Plugin, das mir erlaubt, einen kleinen Kalender wie ein Rechteck zu haben, wie in Datepickern und einige der Daten würden eine andere Farbe haben. Wenn ich mit der Maus über das Datum gehe, erscheint ein Popup, das sagt, welches Ereignis an diesem Tag geplant ist. Natürlich würde ich das Ereignisarray mit Ereignissen füllen ;-)
Ich finde nur die Datumsauswahl (klein) oder Kalender (Vollbild groß). Was ich für meine Webseite brauche, ist ein kleiner Kalender dort und ein einfacher Mouseover, der den Text zeigt, den ich zeigen möchte.
Gibt es so etwas?
Wie andere darauf hingewiesen haben, ist dies mit datepicker von jQueryUI möglich.
Datepicker hat einige eingebaute Funktionen, die Ihnen dabei helfen werden. Insbesondere das Ereignis beforeShowDay lässt Sie die Darstellung und das Verhalten jedes Tages ohne viel Code anpassen :
Erstellen Sie ein Objekt mit Ereignissen, auf die Sie im Ereignishandler datepicker verweisen können:
Dieser Code erstellt nur ein Objekt mit "Schlüsseln" als Ereignisdatum und "Werten" als Ereignisdaten.
Damit das datepicker -Widget immer angezeigt wird (ohne dass beispielsweise input benötigt wird), wenden Sie das Widget einfach auf div :
HTML :
%Vor%JavaScript :
%Vor% Tippen Sie auf das Ereignis beforeShowDay und geben Sie das entsprechende Array zurück. datepicker wendet automatisch eine von Ihnen angegebene Tooltip und Klasse an. Hier kommen die oben definierten Event -Objekte zum Einsatz:
Dies ist wahrscheinlich der heikelste Teil. Der beforeShowDay -Ereignishandler erwartet, dass Sie ein Array zurückgeben, das wie folgt strukturiert ist:
[0] entspricht der Angabe wahr / falsch ob dieses Datum ist oder nicht wählbar, [1] entspricht einer CSS-Klasse Name (n) oder '' für den Standard Präsentation und [2] ein optionales Popup-Tooltip für dieses Datum.
Wir suchen also nach dem Ereignis, das in der Funktion übergeben wurde, die das beforeShowDay -Ereignis behandelt, und geben die Daten von unserem Ereignisobjekt zurück, falls es existiert.
Sieht aus wie viel, aber es ist nicht so schlecht, wenn man alles zusammen betrachtet. Schau dir das Beispiel hier an: Ссылка
Beachten Sie, dass die CSS-Klassen !important verwenden müssen, um den Standardhintergrund von datepicker zu überschreiben und auf die a -Tags innerhalb des Datums tr s
Verwenden Sie den jquery UI-Datapicker . Mit einigen zusätzlichen Abfragen können Sie ein Mouseover-Ereignis verknüpfen und Informationen anzeigen.
Die Daten sind mit CSSClass- und Schachtelungsinformationen erkennbar. Nach dem Anzeigen des Kalenders können Sie Ihren Eventhandler anhängen.
%Vor%Die Selektoren benötigen eine gewisse Genauigkeit, um korrekt zu arbeiten, aber die Idee bleibt gleich.
Wenn Sie bei einem Hover-Tag etwas Spezielles tun möchten, können Sie einen .live-Handler (oder Delegate) anhängen, Live wird benötigt, seit der datpicker erstellt wurde, nachdem dom geladen wurde, bis zum Tag-Element Nachschlagen, wenn Sie einen Tooltip, eine Box oder etwas anderes auf dem Dom anzeigen müssen.
%Vor%Einfaches Beispiel für jsfiddle .
Wenn Sie jedoch feststellen, dass der jQuery UI-Datapicker Ihren Anforderungen nicht entspricht, schauen Sie sich das originale datepicker -Plugin an viel Anpassung. Außerdem bietet es noch einige weitere Ereignisse in der Erweiterung von datepicker.
Alternativ zum jQuery UI Datepicker können Sie sich auch meinen Datepicker ansehen: Ссылка
Es klingt, als ob das, was Sie suchen, von der renderCalendar-Funktion abgedeckt wird: Ссылка
In diesem Beispiel wird eine renderCallback verwendet, um an Feiertagen Klickhandler und zusätzlichen Text hinzuzufügen. Sie sollten in der Lage sein, dies einfach anzupassen, um stattdessen einen Hover-Handler hinzuzufügen.
Tags und Links jquery datepicker calendar