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

Question

Quiero resaltar las fechas en jquery datepicker donde hay eventos adjuntos (no estoy hablando del evento 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 los eventos con su url en una pequeña sugerencia emergente, ya sea para ir a la página del evento?

¿Ya hay complementos o recursos disponibles (como tutoriales) para ayudarme a lograrlo, por favor?

Gracias.

PS: no estoy usando el selector de fecha para elegir una fecha, sólo para acceder a los eventos vinculados a una fecha

PS2: Voy a usar en un sitio web multilingüe (fr e Inglés), es por eso que pensé en datepicker

Answer 1

Esto es definitivamente posible, y en mi opinión no es demasiado un abuso del widget datepicker. Existe una opción para inicializar el widget en línea, que se puede usar exactamente para el escenario que describe arriba.

Hay un par de pasos que tendrá que tomar:

1. inicializar el selector de fechas en línea. Coloque el widget selector de fechas a un <div> de modo que siempre aparecerá y usted no tendrá que adjuntarlo a un input:

   $("div").datepicker({...}); 
   

2. Toque en el caso beforeShowDay para destacar fechas con eventos específicos. Además, definir sus eventos en una matriz que puede rellenar y enviar hacia el cliente:

   Eventos matriz:

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

   de esta situación un poco complejo, pero todo lo que hace es resaltar las fechas en el selector de fechas que tienen entradas en la matriz events definida anteriormente.

3. definir un controlador de onSelect evento en el que se puede decir del selector de fechas lo que hay que 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); 
       } 
   } 
   

   Una vez más, se ve como una gran cantidad de código, pero todo lo que está sucediendo es que estamos volver a encontrar el evento asociado con la fecha en que se hizo clic. Después nos encontramos con que evento, puede tomar cualquier acción que desea (mostrar un texto de ayuda, por ejemplo)

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

Answer 2

además de solución Andrew Whitaker hay otra manera de hacerlo (en realidad es un truco, pero en realidad es quizás perfecta para otra persona porque tal vez el título o la fecha no es siempre una buena identificador)

Nota: por favor, lea solución Andrew Whitaker primero y ver 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") 
    }]);