jQuery UI Datepicker: ¿cómo agregar eventos seleccionables en fechas particulares?

Quiero resaltar las fechas en jquery datepicker donde hay eventos adjuntos (no estoy hablando de js, sino de eventos de la vida real: D).

  1. ¿Cómo pasar las fechas del evento al calendario?
  2. ¿Cómo hacer que se pueda hacer clic, ya sea para mostrar el evento (s) con su url en una pequeña ventana emergente, para ir a la página del evento?

¿Hay complementos o recursos disponibles (como tutoriales) que me ayuden a lograrlo, por favor?

Gracias.

PD: no estoy usando el datepicker para elegir una fecha, solo para acceder a los eventos adjuntos a una fecha

PS2: lo usaré en un sitio web multilingüe (fr y en inglés), por eso pensé en el datepicker

Esto es definitivamente posible, y en mi opinión no es un abuso del widget del selector de fecha. Hay una opción para inicializar el widget en línea, que se puede usar para exactamente el escenario que describió anteriormente.

Hay un par de pasos que deberás seguir:

  1. Inicialice el selector de fecha en línea. Adjunte el widget del selector de fecha a un

    para que siempre aparezca y no tenga que adjuntarlo a una input :

     $("div").datepicker({...}); 
  2. Toque en el evento beforeShowDay para resaltar fechas con eventos específicos. Además, defina sus eventos en una matriz que pueda rellenar y enviar al cliente:

    Matriz de eventos:

     var events = [ { Title: "Five K for charity", Date: new Date("02/13/2011") }, { Title: "Dinner", Date: new Date("02/25/2011") }, { Title: "Meeting with manager", Date: new Date("03/01/2011") } ]; 

    Controlador de eventos:

     beforeShowDay: function(date) { var result = [true, '', null]; var matching = $.grep(events, function(event) { return event.Date.valueOf() === date.valueOf(); }); if (matching.length) { result = [true, 'highlight', null]; } return result; }, 

    Esto puede parecer un poco complejo, pero todo lo que está haciendo es resaltar las fechas en el selector de fecha que tienen entradas en la matriz de events definida anteriormente.

  3. Defina un onSelect eventos onSelect donde puede decirle al onSelect qué hacer cuando se hace clic en un día:

     onSelect: function(dateText) { var date, selectedDate = new Date(dateText), i = 0, event = null; /* Determine if the user clicked an event: */ while (i < events.length && !event) { date = events[i].Date; if (selectedDate.valueOf() === date.valueOf()) { event = events[i]; } i++; } if (event) { /* If the event is defined, perform some action here; show a tooltip, navigate to a URL, etc. */ alert(event.Title); } } 

    Nuevamente, parece mucho código, pero todo lo que está sucediendo es que estamos encontrando el evento asociado con la fecha en la que se hizo clic. Después de que encontremos ese evento, puede realizar la acción que desee (mostrar una información sobre herramientas, por ejemplo)

Aquí hay un ejemplo completo de trabajo: http://jsfiddle.net/Zrz9t/1151/ . Asegúrate de navegar a febrero / marzo para ver los eventos.

Además de la solución de Andrew Whitaker , hay otra forma de hacerlo (en realidad es un pirateo, pero en realidad es perfecto para otra persona porque quizás el título o la fecha no siempre son un buen identificador)

Nota : lea primero la solución de Andrew Whitaker y vea los cambios aquí

 // date picker $("div").datepicker({ // hook handler beforeShowDay: function(tdate) { var mydata = $(this).data("mydata"); var enabled = false; var classes = ""; var title = date; $.each(mydata, function() { if (this.date.valueOf() === tdate.valueOf()){ enabled = true; classes = "highlight"; title = title + '" data-id ="'+this.id;// my hack to add additional attributes ;) } }); return [enabled,classes,title]; }, // event handler onSelect: function() { var id = $(this).find(".ui-datepicker-current-day").attr("data-id"); mydata = $(this).data("mydata"), selectedData = null; /* search for data id */ $.each(mydata,function(){ if (this.id == id){ selectedData = this; } }); if (selectedData) { /* If the event is defined, perform some action here; show a tooltip, navigate to a URL, etc. */ alert(selectedData); } } }).data("mydata", // your data [{ id:1, title: "Five K for charity", date: new Date("02/13/2011") }, { id:2, title: "Dinner", date: new Date("02/25/2011") }, { id:3, title: "Meeting with manager", date: new Date("03/01/2011") }]);