Datepicker mit den Ereignissen?

Wie andere haben darauf hingewiesen, dies ist möglich mit jQueryUI ist datepicker.

Datepicker hat einige eingebaute Funktionen, die Ihnen helfen, dorthin. Insbesondere die beforeShowDay Veranstaltung wird Ihnen passen Sie das Erscheinungsbild und Verhalten jeder Tag ohne viel code:

1. Erstellen Sie ein Objekt mit Ereignissen, die Sie verweisen können, aus der datepicker's event-handler:

   var Event = function(text, className) {
       this.text = text;
       this.className = className;
   };
   
   var events = {};
   events[new Date("02/14/2011")] = new Event("Valentines Day", "pink");
   events[new Date("02/18/2011")] = new Event("Payday", "green");

   Dieser code erstellt ein Objekt mit "Schlüssel" wird die Ereignis-Datum und "Werte" als event-Daten.

2. Machen die datepicker - widget zu zeigen, bis alle die Zeit (ohne, dass ein input zum Beispiel), nur für das widget, um eine div:

   HTML:

   <div id="dates"></div>

   JavaScript:

   $("#dates").datepicker({....});

3. Tippen Sie in der beforeShowDay event und zurück, das entsprechende array. datepicker wird automatisch ein tooltip und Klasse angeben. Dies ist, wo die Event Objekte, die wir oben definiert sind, in handliches kommen:

   $("#dates").datepicker({
       beforeShowDay: function(date) {
           var event = events[date];
           if (event) {
               return [true, event.className, event.text];
           }
           else {
               return [true, '', ''];
           }
       }
   });

   Dies ist wahrscheinlich der schwierigste Teil. Die beforeShowDay event-handler erwartet Sie ein array zurückgeben, strukturiert wie folgt:

   [ 0 ] gleich true/false, der angibt,
   ob oder nicht dieses Datum
   wählbar, [ 1 ] gleich eine CSS-Klasse
   name(N) oder " für den Standard
   Präsentation und [ 2 ] eine optionale
   popup-tooltip für dieses Datum.

   Also, was wir tun ist, suchen Sie das Ereignis auf das übergebene Datum in die Funktion, die Handhabung der beforeShowDay Veranstaltung und für die Rückgabe der Daten aus dem event-Objekt, wenn es vorhanden ist.

Sieht es aus wie eine Menge, aber es ist auch nicht schlimm, wenn man alles zusammen. Check-out die Beispiel hier: http://jsfiddle.net/andrewwhitaker/rMhVz/1/

Hinweis: die CSS-Klassen verwenden müssen !important zum überschreiben der Standard-hintergrund der datepicker, und tatsächlich gelten die a - tags innerhalb des Datum trs

Wenn Sie wollen etwas besonderes zu tun an einem Tag schweben, könnte man anfügen .live-handler (oder Delegierte), live ist notwendig, da der datepicker wird erstellt, sobald der dom fertig geladen wurde, um die Tag-element und eine Art von Verweis, wenn Sie brauchen, um eine QuickInfo anzuzeigen, box oder sonst etwas, das einzigartig auf dem dom.

$(".ui-datepicker-calendar .ui-state-default").live("hover", function() {
    var month = $(".ui-datepicker-month").text();
    var year = $(".ui-datepicker-year").text();
    var day = $(this).text();
    //Do something to look up the year month day..
    $("h1").empty().text(month + day + year).fadeIn();

}, function() {
  //something on mouse out
});

Einfaches Beispiel auf jsfiddle.

Jedoch, wenn Sie die jQuery UI-datepicker nicht Ihren Anforderungen entsprechen nehmen Sie einen Blick auf original - datepicker plugin bietet eine Menge der Anpassung. Plus es bietet auch ein paar mehr Veranstaltungen in der datepicker Erweiterung.