Quiero para seleccionar las fechas en jquery datepicker donde hay eventos adjunto (no estoy hablando acerca de js evento, pero los sucesos de la vida real :D).

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

Ya están allí los plugins disponibles o recursos (como tutoriales) para que me ayude a lograr que, por favor?

Gracias.

PS: yo no estoy usando el selector de fecha para seleccionar una fecha, para el acceso a los eventos conectados a una fecha

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

  • Yo no creo que lo que los acontecimientos clickable es una buena idea. Cómo elegir esa fecha, entonces? También, usted está utilizando esta para elegir una fecha? Si no, algunos calendar plugin puede adaptarse mejor a usted.
  • No, yo no estoy usando esto para elegir una fecha. Sólo para tener acceso a los eventos. Ok, gracias voy a echar un vistazo al calendario de plugin.
InformationsquelleAutor sf_tristanb | 2011-04-07

2 Comentarios

  1. 65

    Este es definitivamente posible, y en mi opinión no es demasiado de un abuso del widget datepicker. Hay una opción para inicializar el widget en línea, que puede ser utilizado para exactamente el escenario que se describe anteriormente.

    Hay un par de pasos que tendrá que tomar:

    1. Inicializar el datepicker en línea. Conecte el widget datepicker a un <div> de manera que siempre aparecerá y usted no tiene que adjuntarlo a un input:

      $("div").datepicker({...});
    2. Toque en el beforeShowDay evento para resaltar las fechas con eventos específicos. También, definir tus eventos en una matriz que se puede rellenar y enviar al 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;
      },

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

    3. Definir un onSelect controlador de eventos donde puedes decir el datepicker de qué hacer cuando un día se hace clic en:

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

      De nuevo, se parece a un montón de código, pero todo lo que está ocurriendo es que estamos encontrando en el evento asociado con la fecha en que se hace clic. Después de encontrar ese caso, usted puede tomar cualquier acción que usted desea (mostrar una descripción, por ejemplo)

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

    • Wow, increíble ! Gracias
    • Andrew, el anterior funciona para todas las fechas que están formateados como : mm/dd/aaaa , ¿hay alguna forma de hacer el trabajo en el formato dd/mm/aaaa ?
    • Hizo de probar con el dateFormat opción?
    • Buen hombre! solo una pregunta ¿cómo puedo alerta si hay varios eventos de una fecha?
    • Gracias por este código! Realmente impresionante. No estaba funcionando para mí al principio, y luego me di cuenta de que no es un inválido (invisible) de caracteres en los últimos }); (o tal vez ya estaba en mi página). stackoverflow.com/questions/9955242/…
    • Tienes razón, no fue invisible carácter al final del código en el violín. Gracias por el aviso!
    • Lo que si hay varios Eventos que tenemos en la misma fecha, ¿qué podemos hacer entonces ?
    • Usted debe ser capaz de realizar cualquier acción que usted necesita en el onSelect controlador.
    • Increíble, elegante,intuitivo…todo en la vida-ahorro 🙂
    • hay un camino mucho más corto para hacer esto: jsfiddle.net/rMhVz/1030
    • ¿Y si desea mostrar una descripción, no una alerta. He intentado: var dia = new Date(evento.Fecha).getDate().toString(); $(«a.interfaz de usuario-estado-activo:contains(«+dia+»)»).descripción({content:’bravo’});
    • re: dateFormat, que han sido capturados por la presente, ser consciente de que entrar en yyyy en realidad le da al año dos veces – por ejemplo, 20132013 – es y de un año de dos dígitos y yy por un período de cuatro dígitos. Sólo en caso de que alguien ve alguna fecha no válida mensajes durante la depuración.

  2. 4

    además Andrew Whitaker solución hay otra manera de hacerlo (en realidad es un hack pero en realidad tal vez perfecto para alguien más, tal vez porque el título o la fecha no es siempre un buen identificador)

    Nota: por favor, lea Andrew Whitaker solución primero y ver los cambios aquí

Dejar respuesta

Please enter your comment!
Please enter your name here