¡Estamos en directo en Twitch!

¡Entra y participa!

Imagen de la etiqueta css

Crea un calendario 📆 con tres líneas de CSS

· 3 minutos de lectura · ¿Una errata? Edita el artículo

Hasta hace poco, maquetar un calendario en CSS era bastante rollo. No es que fuese imposible, ni mucho menos, pero para crear la cuadrĂ­cula de dĂ­as debĂ­amos de tener en cuenta unas cuantas cosas y hacĂ­a que el CSS fuese, no complicado, pero sĂ­ algo largo.

Con la llegada de display: grid a alguien se le ha ocurrido una ingeniosa manera de simplificar esto. He creado un vídeo donde enseño paso a paso cómo hacerlo, para que veas la potencia de esta estrategia:

Si prefieres leer texto, pues sigue por aquí, que te voy contando. 👇

El marcado de nuestro calendario

Como un calendario no deja de ser una lista numerada de números, vamos a utilizar la etiqueta <ol>. Cada día será un elemento de la lista, por lo que cada día será un <li>. Para saber en qué día de la semana estamos podríamos usar también 7 elementos <li> para indicar los días de Lunes a Domingo.

QuedarĂ­a algo asĂ­:

<div>
  <h1>Enero 2021</h1>
  <ol>
    <li class="day-name">Lun</li>
    <li class="day-name">Mar</li>
    <li class="day-name">Mié</li>
    <li class="day-name">Jue</li>
    <li class="day-name">Vie</li>
    <li class="day-name">Sáb</li>
    <li class="day-name">Dom</li>

    <li class="first-day">1</li>
    <li>2</li>
    <!-- ... -->
    <li>31</li>
  </ol>
</div>

Como ves, hemos marcado con una clase tanto el día de la semana (.day-name) como el primer día numérico (.first-day). De esta forma, podremos estilar fácilmente esas partes y luego te explicaré cómo.

Las 3 líneas mágicas de CSS para estilar un calendario

Como un calendario no deja de ser una cuadrĂ­cula de nĂşmeros… ya te puedes imaginar que vamos a utilizar display: grid. Ahora bien, esto no es suficiente, tenemos una cuadrĂ­cula pero… Âżde cuantas columnas? Pues si la semana tiene 7 dĂ­as, parece bastante evidente que nuestra cuadrĂ­cula va a tener 7 columnas:

ol {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

Desde luego no parece muy adecuado poner a mano cada fr para indicar las siete columnas. No te preocupes, hay una forma mejor usando el método repeat.

ol {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

Ahora mejor. Si probases este cĂłdigo verĂ­as que, aunque empieza a tener mejor pinta… salen demasiados nĂşmeros y es que, por defecto, la etiqueta ol nos indica el nĂşmero de cada elemento. Vamos a ocultar esto, ya que no los necesitamos. Y tambiĂ©n quitamos el padding que añade por defecto:

ol {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  list-style: none;
  padding: 0;
}

¡Mucho mejor! Ahora, sí que parece un calendario pero, sin embargo, existe un problema y es que el día 1 de enero de 2021 no cae en lunes, que es lo que nos estaría mostrando. El día correcto sería empezar en viernes. ¿Cómo hacemos para que empiece por el día correcto?

Usando la clase .first-day vamos a indicarle en qué columna debería empezar a poner los números. En este caso lo correcto sería que empezase en viernes. Esto es, en la quinta columna. Pues añadimos este CSS para hacer que funcione:

.first-day {
  grid-column-start: 5
}

A partir de aquĂ­ puedes empezar a estilar y dejar a tu gusto el calendario CSS. AquĂ­ te dejo una demo completa con una versiĂłn bastante sencilla pero puedes entretenerte jugando con ello:

Referencias:
Calendar Tricks: A calendar in three lines of CSS

Contenido del artĂ­culo

Comparte el artĂ­culo