Calendario de fechas dinámico usando CSS Sprites

Si deseamos mostrar un calendario dinámico y a la vez intuitivo para nuestro blog o sitio web, debemos aprender a usar este hack. En esta entrada explicaremos como crear un calendario de fechas (tanto més como día) de forma dinámica, usando la propiedad background-position y display, con el valor inline-block. Obviamente podemos usar la imagen de fondo que nosotros queramos, en este caso nos inspiraremos del icono de iCal, de Apple.

Primero, la imagen de fondo, que puede ser descargada aquí. Como vemos, la imagen consta de todos los meses y días del año, pero dispersos.

Este el código CSS a añadir en nuestro documento:

        .sprite_bg {
            background-color: #777;
        }
        .cal, .cal .m, .cal .d {
            background: url(cal-sprite64.png) no-repeat 0 0;
        }
        .cal {
            display: inline-block;
            height: 64px;
            position: relative;
            width: 64px;
        }
        .cal .m {
            position: absolute;
            height: 10px;
            left: 7px;
            top: 17px;
            width: 17px;
            text-indent: -9999em;
        }
        .m1 .m  { background-position: -62px 0; }
        .m2 .m  { background-position: -84px 0; }
        .m3 .m  { background-position: -105px 0; }
        .m4 .m  { background-position: -126px 0; }
        .m5 .m  { background-position: -147px 0; }
        .m6 .m  { background-position: -168px 0; }
        .m7 .m  { background-position: -188px 0; }
        .m8 .m  { background-position: -211px 0; }
        .m9 .m  { background-position: -231px 0; }
        .m10 .m { background-position: -253px 0; }
        .m11 .m { background-position: -274px 0; }
        .m12 .m { background-position: -295px 0; }

        .cal .d {
            position: absolute;
            height: 25px;
            left: 17px;
            top: 25px;
            width: 32px;
            text-indent: -9999em;
        }

        .d1 .d, .d2 .d, .d3 .d, .d4 .d, .d5 .d, .d6 .d, .d7 .d, .d8 .d, .d9 .d {
            left: 24px;
            width: 17px;
        }

        .d1 .d  { background-position: -63px -9px; }
        .d2 .d  { background-position: -80px -9px; }
        .d3 .d  { background-position: -97px -9px; }
        .d4 .d  { background-position: -115px -9px; }
        .d5 .d  { background-position: -131px -9px; }
        .d6 .d  { background-position: -147px -9px; }
        .d7 .d  { background-position: -165px -9px; }
        .d8 .d  { background-position: -182px -9px; }
        .d9 .d  { background-position: -199px -9px; }
        .d10 .d { background-position: -216px -9px; }
        .d11 .d { background-position: -245px -9px; }
        .d12 .d { background-position: -275px -9px; }
        .d13 .d { background-position: -306px -9px; }
        .d14 .d { background-position: -337px -9px; }
        .d15 .d { background-position: -368px -9px; }
        .d16 .d { background-position: -399px -9px; }
        .d17 .d { background-position: -429px -9px; }
        .d18 .d { background-position: -459px -9px; }
        .d19 .d { background-position: -63px -38px; }
        .d20 .d { background-position: -95px -37px; }
        .d21 .d { background-position: -126px -37px; }
        .d22 .d { background-position: -159px -37px; }
        .d23 .d { background-position: -192px -37px; }
        .d24 .d { background-position: -224px -37px; }
        .d25 .d { background-position: -257px -37px; }
        .d26 .d { background-position: -288px -37px; }
        .d27 .d { background-position: -320px -37px; }
        .d28 .d { background-position: -352px -37px; }
        .d29 .d { background-position: -384px -37px; }
        .d30 .d { background-position: -416px -37px; }
        .d31 .d { background-position: -447px -37px; }

Si nos damos cuenta, en el código CSS que acabamos de definir, se nota que los dos protagonistas principales son la propiedad background-position (hace que dependiendo del mes o día cambie la posición del fondo, eligiendo uno de los meses o días expuestos en la imagen de fondo mostrada anteriormente) y display, con el valor inline-block (bloque alineado, que, digamos, hace que los ladrillos de la casa no se desmoronen).Sin esta propiedad, todo el calendario se esparciría por el documento, es decir, se visualizaría mal.

El código HTML sería este:

    <span id="cal" class="cal m1 d1">
        <span class="m">Jan</span>
        <span class="d">1</span>
    </span>

Como vemos, dispone de una clase múltiple que engloba los meses y días, en este caso primer día y primer mes(m1, d1). Existen dos etiquetas , una es para los meses (class=”m”: Jan) y otra para los días (class=”d”: 1).

Así ya tendremos listo nuestro calendario dinámico en CSS. Recordad que la imagen del calendario y sus números pueden cambiarse a nuestro gusto, con solo elegir una imagen (igual pero con distintos estilos en los números, por ejemplo) y cambiar los parámetros de background-position si fuera necesario.

Como adaptar el calendario a WordPress.

Ahora vamos a explicar como integrarlo en WordPress, para que muestre la fecha de cada entrada de este modo tan intuitivo.

El código CSS cambia de tal modo que, si tenemos activado el lenguaje de WordPress en español, había que cambiar las fechas, tanto meses como días, y quedarlo así:

.sprite_bg {
background-color: #777;
}
.cal, .cal .m, .cal .d {
background: url(cal-sprite64.png) no-repeat 0 0;
}
.cal {
display: inline-block;
height: 64px;
position: absolute;
width: 64px;
}
.cal .m {
position: absolute;
height: 10px;
left: 7px;
top: 17px;
width: 17px;
text-indent: -9999em;
}
.Ene .m  { background-position: -62px 0; }
.Feb .m  { background-position: -84px 0; }
.Mar .m  { background-position: -105px 0; }
.Abr .m  { background-position: -126px 0; }
.May .m  { background-position: -147px 0; }
.Jun .m  { background-position: -168px 0; }
.Jul .m  { background-position: -188px 0; }
.Ago .m  { background-position: -211px 0; }
.Sep .m  { background-position: -231px 0; }
.Oct .m { background-position: -253px 0; }
.Nov .m { background-position: -274px 0; }
.Dic .m { background-position: -295px 0; }

.cal .d {
position: absolute;
height: 25px;
left: 17px;
top: 25px;
width: 32px;
text-indent: -9999em;
}

.d01 .d, .d02 .d, .d03 .d, .d04 .d, .d05 .d, .d06 .d, .d07 .d, .d08 .d, .d09 .d {
left: 24px;
width: 17px;
}

.d01 .d  { background-position: -63px -9px; }
.d02 .d  { background-position: -80px -9px; }
.d03 .d  { background-position: -97px -9px; }
.d04 .d  { background-position: -115px -9px; }
.d05 .d  { background-position: -131px -9px; }
.d06 .d  { background-position: -147px -9px; }
.d07 .d  { background-position: -165px -9px; }
.d08 .d  { background-position: -182px -9px; }
.d09 .d  { background-position: -199px -9px; }
.d10 .d { background-position: -216px -9px; }
.d11 .d { background-position: -245px -9px; }
.d12 .d { background-position: -275px -9px; }
.d13 .d { background-position: -306px -9px; }
.d14 .d { background-position: -337px -9px; }
.d15 .d { background-position: -368px -9px; }
.d16 .d { background-position: -399px -9px; }
.d17 .d { background-position: -429px -9px; }
.d18 .d { background-position: -459px -9px; }
.d19 .d { background-position: -63px -38px; }
.d20 .d { background-position: -95px -37px; }
.d21 .d { background-position: -126px -37px; }
.d22 .d { background-position: -159px -37px; }
.d23 .d { background-position: -192px -37px; }
.d24 .d { background-position: -224px -37px; }
.d25 .d { background-position: -257px -37px; }
.d26 .d { background-position: -288px -37px; }
.d27 .d { background-position: -320px -37px; }
.d28 .d { background-position: -352px -37px; }
.d29 .d { background-position: -384px -37px; }
.d30 .d { background-position: -416px -37px; }
.d31 .d { background-position: -447px -37px; }

Si nos damos cuenta, hemos cambiado las clases de los meses (En vez de .m1, .m2, .m3… se indica con las tres primeras letras del mes: .Ene, .Feb, .Mar) y los días (a los días con un dígito, hay que añadirles dos, poniendo un 0 al principio, es decir, en vez de: .d1, .d2, .d3, sería .d01, .d02, .d03, así hasta 10).

El código HTML cambiaría de tal forma que pondríamos la variable de la fecha donde se situa la class y las etiquetas , quedaría así:

    <span id="cal" class="cal <?php the_time('M') ?> d<?php the_time('d') ?>">
        <span class="m"><?php the_time('M') ?></span>
        <span class="d"><?php the_time('d') ?></span>
    </span>

Y listo, cualquier duda o aclaración al respecto se puede escribir en los comentarios.

Calendario de fechas dinámico usando CSS Sprites

Como adaptar el calendario a WordPress.

¡Contenido premium gratis!

Intercambios

¿Qué es CSSBlog ES?

¡Espera! ¡Un regalo por tu visita!