BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Agregar eventos a jQuery UI datePicker

16/MAY/2012 16.471 visitas Ver comentarios
Agregar eventos a jQuery UI datePicker

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

Esto es magia en estado puro. Me lo encontré buscando como agregar eventos al jQuery UI datePicker para que, en lugar de seleccionar la fecha indicada, muestre una alerta o siga un vínculo desde cada día del calendario.

Encontré este código que voy a copiar y pegar tal cual... antes que me muerdan, el código no es mío, pero lo que hace, básicamente, es crear un array con los eventos a mostrar y luego capturar el evento de seleccionar la fecha.

No lo he probado aún para saber qué pasa si quisiera seleccionar la misma fecha en la que hay un evento. Entiendo que debería funcionar de todos modos, pero, repito, no lo he probado.

En la demo, para ver los eventos, deben moverse hasta febrero y marzo de 2011 (en la primer línea de este código que pego abajo se ven las fechas).

Recuerda: necesitarás jQuery UI con el plugin datepicker seleccionado si no bajas la librería completa.

Código 1 - JAVASCRIPT
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") }
];

$("div").datepicker({
    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;
    },
    onSelect: function(dateText) {
        var date,
            selectedDate = new Date(dateText),
            i = 0,
            event = null;
        
        while (i < events.length && !event) {
            date = events[i].Date;

            if (selectedDate.valueOf() === date.valueOf()) {
                event = events[i];
            }
            i++;
        }
        if (event) {
            alert(event.Title);
        }
    }
});​
Código 2 - HTML
<div></div>
Código 3 - CSS
table.ui-datepicker-calendar tbody td.highlight > a {
    background: url("images/ui-bg_inset-hard_55_ffeb80_1x100.png") repeat-x scroll 50% bottom #FFEB80;
    color: #363636;
    border: 1px solid #FFDE2E;
}

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 21 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018