Cómo hacer un calendario mensual con datos reales
¿Alguna vez has visto un calendario en una página web y has pensado: cómo diablos hicieron eso? Para algo así, podría ser natural recurrir a un complemento, o incluso a un Google Calendar integrado, pero en realidad es mucho más sencillo crear uno de lo que piensas y solo requiere la trifecta de HTML, CSS y JavaScript. ¡Hagamos uno juntos!
He configurado una demostración en CodeSandbox para que puedas ver a qué apuntamos.
Ver demostración
Primero identifiquemos algunos requisitos sobre lo que debe hacer el calendario. Debería:
- Mostrar una cuadrícula mensual para un mes determinado
- Muestra las fechas del mes anterior y siguiente para que la cuadrícula esté siempre llena
- Indique la fecha actual
- Mostrar el nombre del mes seleccionado actualmente
- Navegar al mes anterior y siguiente
- Permitir al usuario regresar al mes actual con un solo clic
Ah, y crearemos esto como una aplicación de una sola página que recupera las fechas del calendario de Day.js, una biblioteca de utilidades súper liviana.
Vamos a evitar elegir un marco específico para facilitar las cosas. Para esta configuración, estoy usando Parcel para la administración de paquetes, de modo que pueda escribir en Babel, agrupar cosas y administrar la única dependencia del proyecto. Consulte el package.jsonarchivo en CodeSandbox para obtener detalles.
Paso 1: comience con el marcado y los estilos básicos
Comencemos creando una plantilla básica para nuestro calendario. Esto no tiene por qué ser nada sofisticado. Pero también hay que hacerlo sin recurrir a tablas.
Podemos delinear nuestro marcado en tres capas donde tenemos:
- Una sección para el encabezado del calendario. Esto mostrará el mes seleccionado actualmente y los elementos responsables de la paginación entre meses.
- Una sección para el encabezado de la cuadrícula del calendario. Nuevamente, no estamos llegando a las tablas de formulario, pero esto sería algo así como un encabezado de tabla que contiene una lista que contiene los días de la semana, comenzando con el lunes.
- La cuadrícula del calendario. Ya sabes, cada día del mes actual, representado como un cuadrado en la cuadrícula.
Escribamos esto en un archivo llamado index.js. Esto puede ir dentro de una srccarpeta en la carpeta del proyecto. De hecho, tendremos un index.htmlarchivo en la raíz del proyecto que importa nuestro trabajo, pero el marcado principal vivirá en el archivo JavaScript.
!-- index.js --document.getElementById("app").innerHTML = `!-- Parent container for the calendar month --div !-- The calendar header -- section !-- Month name -- div July 2020 /div
!-- Pagination -- div span/span spanToday/span span/span /div /section !-- Calendar grid header -- ol liMon/li ... liSun/li /ol
!-- Calendar grid -- ol li span 1 /span ... span 29 /span /li /ol/div`;Sigamos adelante e importemos este archivo al index.htmlarchivo que se encuentra en el directorio raíz del proyecto. Aquí no pasa nada especial. Es simplemente un texto estándar HTML con un elemento al que apunta nuestra aplicación y registra nuestro index.jsarchivo.
!DOCTYPE htmlhtml head titleParcel Sandbox/title meta charset="UTF-8" / /head body div/div script src="src/index.js"/script /body/htmlAhora que tenemos algunas marcas con las que trabajar, le daremos un poco de estilo para tener una buena imagen con la que empezar. Específicamente, vamos a:
- Posicionar los elementos usando flexbox
- Crea un marco de calendario usando una cuadrícula CSS
- Coloque las etiquetas dentro de las celdas.
Primero, creemos un nuevo archivo estilos.css en la misma srccarpeta donde lo tenemos index.jsy coloquemos esto:
body { --grey-100: #e4e9f0; --grey-200: #cfd7e3; --grey-300: #b5c0cd; --grey-800: #3e4e63; --grid-gap: 1px; --day-label-size: 20px;}.calendar-month { position: relative; /* Color of the day cell borders */ background-color: var(--grey-200); border: solid 1px var(--grey-200);}
/* Month indicator and selectors positioning */.calendar-month-header { display: flex; justify-content: space-between; background-color: #fff; padding: 10px;}
/* Month indicator */.calendar-month-header-selected-month { font-size: 24px; font-weight: 600;}
/* Month selectors positioning */.calendar-month-header-selectors { display: flex; align-items: center; justify-content: space-between; width: 80px;}
.calendar-month-header-selectors * { cursor: pointer;}
/* | Mon | Tue | Wed | Thu | Fri | Sat | Sun | */.day-of-week { color: var(--grey-800); font-size: 18px; background-color: #fff; padding-bottom: 5px; padding-top: 10px;}
.day-of-week,.days-grid { /* 7 equal columns for weekdays and days cells */ display: grid; grid-template-columns: repeat(7, 1fr);}
.day-of-week * { /* Position the weekday label within the cell */ text-align: right; padding-right: 5px;}
.days-grid { height: 100%; position: relative; /* Show border between the days */ grid-column-gap: var(--grid-gap); grid-row-gap: var(--grid-gap); border-top: solid 1px var(--grey-200);}
.calendar-day { position: relative; min-height: 100px; font-size: 16px; background-color: #fff; color: var(--grey-800); padding: 5px;}
/* Position the day label within the day cell */.calendar-day span { display: flex; justify-content: center; align-items: center; position: absolute; right: 2px; width: var(--day-label-size); height: var(--day-label-size);}La parte clave que configura nuestra grilla es esta:
.day-of-week,.days-grid { /* 7 equal columns for weekdays and days cells */ display: grid; grid-template-columns: repeat(7, 1fr);}Tenga en cuenta que tanto el encabezado de la cuadrícula del calendario como la cuadrícula del calendario en sí utilizan la cuadrícula CSS para diseñar las cosas. Sabemos que siempre habrá siete días en una semana, lo que nos permite usar la repeat()función para crear siete columnas que sean proporcionales entre sí. También declaramos un min-heightvalor de 100 px en cada fecha del calendario para asegurarnos de que las filas sean consistentes.
Necesitamos conectar estos estilos con el marcado, así que agreguemos esto al principio de nuestro index.jsarchivo:
import "./styles.css";Este es un buen lugar para detenerse y ver lo que tenemos hasta ahora.
Ver demostración
Paso 2: configurar el calendario del mes actual
Como probablemente hayas notado, la plantilla solo contiene datos estáticos por el momento. El mes está codificado como julio y los números de los días también están codificados. Ahí es donde entra en juego Day.js. Proporciona todos los datos que necesitamos para colocar correctamente las fechas en los días correctos de la semana para un mes determinado utilizando datos reales del calendario. Nos permite obtener y configurar cualquier cosa, desde la fecha de inicio de un mes hasta todas las opciones de formato de fecha que necesitamos para mostrar los datos.
Lo haremos:
- Obtener el mes actual
- Calcular dónde se deben colocar los días (días laborables)
- Calcular los días para mostrar las fechas del mes anterior y siguiente.
- Pon todos los días juntos en una sola matriz.
Primero, necesitamos importar Day.js y eliminar todo el HTML estático (mes, días laborables y días seleccionados). Lo haremos agregando esto a nuestro index.jsarchivo justo encima de donde importamos los estilos:
import dayjs from "dayjs";También nos apoyaremos en un par de complementos de Day.js para obtener ayuda. WeekDay nos ayuda a establecer el primer día de la semana. Algunos prefieren el domingo como primer día de la semana. Otros prefieren el lunes. Diablos, en algunos casos, tiene sentido comenzar el viernes. Vamos a empezar el lunes.
El complemento WeekOfYear devuelve el valor numérico de la semana actual entre todas las semanas del año. Hay 52 semanas en un año, por lo que diríamos que la semana que comienza el 1 de enero es la primera semana del año, y así sucesivamente.
Esto es lo que ponemos index.jsjusto después de nuestras declaraciones de importación:
const weekday = require("dayjs/plugin/weekday");const weekOfYear = require("dayjs/plugin/weekOfYear");
dayjs.extend(weekday);dayjs.extend(weekOfYear);Una vez que eliminamos los valores del calendario rígidos, esto es lo que tenemos index.jshasta ahora:
import dayjs from "dayjs";import "./styles.css";const weekday = require("dayjs/plugin/weekday");const weekOfYear = require("dayjs/plugin/weekOfYear");
dayjs.extend(weekday);dayjs.extend(weekOfYear);
document.getElementById("app").innerHTML = `div section div /div div span/span spanToday/span span/span /div /section ul /ul ul /ul/div`;Ahora establezcamos algunas constantes. Específicamente, queremos construir una serie de días de la semana (es decir, lunes, martes, miércoles, etc.):
const WEEKDAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];Luego, queremos recuperar el año actual y configurarlo en el YYYYformato:
const INITIAL_YEAR = dayjs().format("YYYY");Y queremos establecer el mes actual como punto de partida al cargar inicialmente el calendario, donde Mformatea el mes como un valor numérico (por ejemplo, enero es igual a 1):
const INITIAL_MONTH = dayjs().format("M");Vayamos y llenemos el encabezado de la cuadrícula de nuestro calendario con los días de la semana. Primero tomamos el elemento adecuado ( #days-of-week), luego iteramos a través de nuestra WEEKDAYSmatriz, creando un elemento de lista para cada elemento de la matriz mientras configuramos el nombre para cada uno:
// Select the calendar grid header elementconst daysOfWeekElement = document.getElementById("days-of-week");
// Loop through the array of weekdaysWEEKDAYS.forEach(weekday = { // For each item in the array, make a list item element const weekDayElement = document.createElement("li"); // Append a child element inside the list item... daysOfWeekElement.appendChild(weekDayElement); /// ...that contains the value in the array weekDayElement.innerText = weekday;});Paso 3: crear la cuadrícula del calendario
Eso fue bastante sencillo, pero ahora comienza la verdadera diversión, ya que jugaremos con la cuadrícula del calendario. Detengámonos por un segundo y pensemos qué es lo que realmente debemos hacer para hacerlo bien.
Primero, queremos que los números de fecha caigan en las columnas correctas de los días de la semana. Por ejemplo, el 1 de julio de 2020 es miércoles. Ahí es donde debería comenzar la numeración de fechas.
Si el primero del mes cae en miércoles, eso significa que tendremos elementos de cuadrícula vacíos para el lunes y martes de la primera semana. El último día del mes es el 31 de julio, que cae en viernes. Eso significa que el sábado y el domingo estarán vacíos en la última semana de la parrilla. Fuimos a llenarlos con las fechas finales y principales del mes anterior y siguiente, respectivamente, para que la cuadrícula del calendario esté siempre llena.
Crear días para el mes actual.
Para agregar los días del mes actual a la cuadrícula, necesitamos saber cuántos días existen en el mes actual. Podemos conseguirlo utilizando el daysInMonthmétodo proporcionado por Day.js. Creemos un método auxiliar para eso.
function getNumberOfDaysInMonth(year, month) { return dayjs(`${year}-${month}-01`).daysInMonth()}Cuando sabemos eso, creamos una matriz vacía con una longitud igual a la cantidad de días del mes actual. Luego hacemos map()esa matriz y creamos un objeto de día para cada uno. El objeto que creamos tiene una estructura arbitraria, por lo que puedes agregar otras propiedades si las necesitas.
Sin embargo, en este ejemplo necesitamos una datepropiedad que se usará para verificar si una fecha en particular es el día actual. También devolveremos una dayOfMonthpropiedad que actúa como etiqueta (por ejemplo, 1, 2, 3, etc.). isCurrentMonthcomprueba si la fecha está en el mes actual o fuera de él. Si está fuera del mes actual, les aplicaremos un estilo para que la gente sepa que están fuera del rango del mes actual.
function createDaysForCurrentMonth(year, month) { return [...Array(getNumberOfDaysInMonth(year, month))].map((day, index) = { return { date: dayjs(`${year}-${month}-${index + 1}`).format("YYYY-MM-DD"), dayOfMonth: index + 1, isCurrentMonth: true }; });}Agregar fechas del mes anterior a la cuadrícula del calendario
Para que las fechas del mes anterior se muestren en el mes actual, debemos verificar cuál es el día de la semana del primer día del mes seleccionado. Ahí es donde podemos usar el complemento WeekDay para Day.js. Creemos un método auxiliar para eso.
function getWeekday(date) { return dayjs(date).weekday()}Luego, en base a eso, debemos verificar qué día fue el último lunes del mes anterior. Necesitamos ese valor para saber cuántos días del mes anterior deben ser visibles en la vista del mes actual. Podemos obtenerlo restando el valor del día de la semana del primer día del mes actual. Por ejemplo, si el primer día del mes es miércoles, debemos restar 3 días para obtener el último lunes del mes anterior. Tener ese valor nos permite crear una serie de objetos de día desde el último lunes del mes anterior hasta el final de ese mes.
function createDaysForPreviousMonth(year, month) { const firstDayOfTheMonthWeekday = getWeekday(currentMonthDays[0].date);
const previousMonth = dayjs(`${year}-${month}-01`).subtract(1, "month"); // Account for first day of the month on a Sunday (firstDayOfTheMonthWeekday === 0) const visibleNumberOfDaysFromPreviousMonth = firstDayOfTheMonthWeekday ? firstDayOfTheMonthWeekday - 1 : 6
const previousMonthLastMondayDayOfMonth = dayjs( currentMonthDays[0].date ).subtract(visibleNumberOfDaysFromPreviousMonth, "day").date(); return [...Array(visibleNumberOfDaysFromPreviousMonth)].map((day, index) = { return { date: dayjs( `${previousMonth.year()}-${previousMonth.month() + 1}-${previousMonthLastMondayDayOfMonth + index}` ).format("YYYY-MM-DD"), dayOfMonth: previousMonthLastMondayDayOfMonth + index, isCurrentMonth: false }; });}Agregue fechas del próximo mes a la cuadrícula del calendario
Ahora, hagamos lo contrario y calculemos qué días necesitamos del próximo mes para completar la cuadrícula del mes actual. Afortunadamente, podemos utilizar el mismo asistente que acabamos de crear para el cálculo del mes anterior. La diferencia es que calcularemos cuántos días del próximo mes deberían ser visibles restando el valor numérico del día de la semana de 7.
Entonces, por ejemplo, si el último día del mes es sábado, necesitamos restar 1 día de 7 para construir una matriz de fechas necesarias del próximo mes (domingo).
function createDaysForNextMonth(year, month) { const lastDayOfTheMonthWeekday = getWeekday(`${year}-${month}-${currentMonthDays.length}`)
const visibleNumberOfDaysFromNextMonth = lastDayOfTheMonthWeekday ? 7 - lastDayOfTheMonthWeekday : lastDayOfTheMonthWeekday
return [...Array(visibleNumberOfDaysFromNextMonth)].map((day, index) = { return { date: dayjs(`${year}-${Number(month) + 1}-${index + 1}`).format("YYYY-MM-DD"), dayOfMonth: index + 1, isCurrentMonth: false } })}Bien, sabemos cómo crear todos los días que necesitamos, usemos los métodos que acabamos de crear y luego combinemos todos los días en una única matriz de todos los días que queremos mostrar en el mes actual, incluidas las fechas de relleno del mes anterior y siguiente. .
let currentMonthDays = createDaysForCurrentMonth(INITIAL_YEAR, INITIAL_MONTH)let previousMonthDays = createDaysForPreviousMonth(INITIAL_YEAR, INITIAL_MONTH, currentMonthDays[0])let nextMonthDays = createDaysForNextMonth(INITIAL_YEAR, INITIAL_MONTH)
let days = [...this.previousMonthDays, ...this.currentMonthDays, ...this.nextMonthDays]Aquí está todo lo que acabamos de cubrir reunido en index.js:
// Same as before ...
const WEEKDAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];const INITIAL_YEAR = dayjs().format("YYYY");const INITIAL_MONTH = dayjs().format("M");const daysOfWeekElement = document.getElementById("days-of-week");
// Add weekdays to calendar headerWEEKDAYS.forEach(weekday = { const weekDayElement = document.createElement("li"); daysOfWeekElement.appendChild(weekDayElement); weekDayElement.innerText = weekday;});
let currentMonthDays = createDaysForCurrentMonth(INITIAL_YEAR, INITIAL_MONTH);let previousMonthDays = createDaysForPreviousMonth(INITIAL_YEAR, INITIAL_MONTH);let nextMonthDays = createDaysForNextMonth(INITIAL_YEAR, INITIAL_MONTH);let days = [...previousMonthDays, ...currentMonthDays, ...nextMonthDays];
console.log(days);
function getNumberOfDaysInMonth(year, month) { return dayjs(`${year}-${month}-01`).daysInMonth();}
function createDaysForCurrentMonth(year, month) { return [...Array(getNumberOfDaysInMonth(year, month))].map((day, index) = { return { date: dayjs(`${year}-${month}-${index + 1}`).format("YYYY-MM-DD"), dayOfMonth: index + 1, isCurrentMonth: true }; });}
function createDaysForPreviousMonth(year, month) { const firstDayOfTheMonthWeekday = getWeekday(currentMonthDays[0].date); const previousMonth = dayjs(`${year}-${month}-01`).subtract(1, "month"); // Cover first day of the month being sunday (firstDayOfTheMonthWeekday === 0) const visibleNumberOfDaysFromPreviousMonth = firstDayOfTheMonthWeekday ? firstDayOfTheMonthWeekday - 1 : 6; const previousMonthLastMondayDayOfMonth = dayjs(currentMonthDays[0].date) .subtract(visibleNumberOfDaysFromPreviousMonth, "day") .date();
return [...Array(visibleNumberOfDaysFromPreviousMonth)].map((day, index) = { return { date: dayjs( `${previousMonth.year()}-${previousMonth.month() + 1}-${previousMonthLastMondayDayOfMonth + index}` ).format("YYYY-MM-DD"), dayOfMonth: previousMonthLastMondayDayOfMonth + index, isCurrentMonth: false }; });}function createDaysForNextMonth(year, month) { const lastDayOfTheMonthWeekday = getWeekday( `${year}-${month}-${currentMonthDays.length}` ); const nextMonth = dayjs(`${year}-${month}-01`).add(1, "month"); const visibleNumberOfDaysFromNextMonth = lastDayOfTheMonthWeekday ? 7 - lastDayOfTheMonthWeekday : lastDayOfTheMonthWeekday; return [...Array(visibleNumberOfDaysFromNextMonth)].map((day, index) = { return { date: dayjs( `${nextMonth.year()}-${nextMonth.month() + 1}-${index + 1}` ).format("YYYY-MM-DD"), dayOfMonth: index + 1, isCurrentMonth: false }; });}function getWeekday(date) { return dayjs(date).weekday();}Ver demostración
Paso 4: mostrar las fechas del calendario
Bien, entonces tenemos el marcado básico para nuestro calendario, los datos que necesitamos para mostrar las fechas del mes actual, además de las fechas del mes anterior y siguiente para completar los elementos vacíos de la cuadrícula. ¡Ahora necesitamos agregar las fechas al calendario!
Ya tenemos un contenedor para la cuadrícula del calendario #calendar-days. Tomemos ese elemento.
const calendarDaysElement = document.getElementById("calendar-days");Ahora, creemos una función que agregará un día a nuestra vista de calendario.
function appendDay(day, calendarDaysElement) { const dayElement = document.createElement("li"); const dayElementClassList = dayElement.classList;
// Generic calendar day class dayElementClassList.add("calendar-day");
// Container for day of month number const dayOfMonthElement = document.createElement("span");
// Content dayOfMonthElement.innerText = day.dayOfMonth;
// Add an extra class to differentiate current month days from prev/next month days if (!day.isCurrentMonth) { dayElementClassList.add("calendar-day--not-current"); }
// Append the element to the container element dayElement.appendChild(dayOfMonthElement); calendarDaysElement.appendChild(dayElement);}Observe que estamos agregando una marca para las fechas que provienen del mes anterior y siguiente para que podamos agregar una clase para darles un estilo diferente a las fechas del mes actual:
.calendar-day--not-current { background-color: var(--grey-100); color: var(--grey-300);}¡Eso es todo! Nuestro calendario ahora debería verse como queríamos.
Ver demostración
Paso 5: seleccione el mes actual
Lo que tenemos hasta ahora es bastante bueno, pero queremos que el usuario pueda paginar de mes a mes hacia adelante y hacia atrás en el tiempo, comenzando desde el mes actual. Tenemos la mayor parte de la lógica implementada, por lo que todo lo que realmente necesitamos hacer es agregar un clickoyente a los botones de paginación que vuelva a ejecutar el cálculo de los días y vuelva a dibujar el calendario con datos actualizados.
Antes de comenzar, definamos variables para las fechas del mes actual, del mes anterior y del mes siguiente para que podamos hacer referencia a ellas en todo el código.
let currentMonthDays;let previousMonthDays;let nextMonthDays;Ahora, creemos un método que será responsable de volver a calcular los días del calendario y volver a representar el calendario al paginar a otro mes. Llamaremos a esa función createCalendar. Este método aceptará dos atributos (año y mes) y, en función de eso, el calendario se volverá a representar con datos nuevos y sin cargar una nueva página.
El método reemplazará el contenido del encabezado para mostrar siempre la etiqueta del mes seleccionado.
function createCalendar(year = INITIAL_YEAR, month = INITIAL_MONTH) { document.getElementById("selected-month").innerText = dayjs( new Date(year, month - 1) ).format("MMMM YYYY");
// ...Luego tomará el contenedor de días calendario y eliminará todos los días existentes.
// ...
const calendarDaysElement = document.getElementById("calendar-days"); removeAllDayElements(calendarDaysElement);
// ...Cuando se borre el calendario, calculará los nuevos días que deben mostrarse utilizando los métodos que creamos antes.
//...
currentMonthDays = createDaysForCurrentMonth( year, month, dayjs(`${year}-${month}-01`).daysInMonth());
previousMonthDays = createDaysForPreviousMonth(year, month);
nextMonthDays = createDaysForNextMonth(year, month);
const days = [...previousMonthDays, ...currentMonthDays, ...nextMonthDays];
// ...Y, finalmente, agregará un elemento de día para cada día.
// ...days.forEach(day = { appendDay(day, calendarDaysElement);});Todavía falta una pieza de lógica: un removeAllDayElementsmétodo que borre el calendario existente. Este método toma el primer elemento del día calendario, lo elimina y lo reemplaza por otro. A partir de ahí, ejecutará la lógica en un bucle hasta que se eliminen todos los elementos.
function removeAllDayElements(calendarDaysElement) { let first = calendarDaysElement.firstElementChild;
while (first) { first.remove(); first = calendarDaysElement.firstElementChild; }}Ahora podemos reutilizar esa lógica cuando queramos cambiar el mes. Recuerde el primer paso cuando creamos una plantilla estática para nuestro componente. Agregamos estos elementos:
div span/span spanToday/span span/span/divEstos son los controles para paginar entre meses. Para cambiarlo, necesitamos almacenar el mes seleccionado actualmente. Creemos una variable para realizar un seguimiento de lo que es y establezcamos su valor inicial en el mes actual.
let selectedMonth = dayjs(new Date(INITIAL_YEAR, INITIAL_MONTH - 1, 1));Ahora, para que los selectores funcionen, necesitamos un poco de JavaScript. Para hacerlo más legible, crearemos otro método llamado initMonthSelectorsy mantendremos la lógica allí. Este método agregará detectores de eventos a los elementos selectores. Escuchará los eventos de clic y actualizará el valor del selectedMonthnombre del mes recién seleccionado antes de ejecutar el createCalendarmétodo con los valores de año y mes adecuados.
function initMonthSelectors() { document .getElementById("previous-month-selector") .addEventListener("click", function() { selectedMonth = dayjs(selectedMonth).subtract(1, "month"); createCalendar(selectedMonth.format("YYYY"), selectedMonth.format("M")); });
document .getElementById("present-month-selector") .addEventListener("click", function() { selectedMonth = dayjs(new Date(INITIAL_YEAR, INITIAL_MONTH - 1, 1)); createCalendar(selectedMonth.format("YYYY"), selectedMonth.format("M")); });
document .getElementById("next-month-selector") .addEventListener("click", function() { selectedMonth = dayjs(selectedMonth).add(1, "month"); createCalendar(selectedMonth.format("YYYY"), selectedMonth.format("M")); });}¡Eso es todo! Nuestro calendario está listo. Si bien eso es genial, sería aún mejor si pudiéramos marcar la fecha actual para que se destaque del resto. Eso no debería ser muy difícil. Ya estamos diseñando días que no están en el mes seleccionado, así que hagamos algo similar.
Crearemos una variable configurada para hoy:
const TODAY = dayjs().format("YYYY-MM-DD");Luego, en el appendDaymétodo donde aplicamos una clase para fechas fuera del mes actual, tenemos que agregar otra verificación para ver si el elemento es la fecha de hoy. Si es así, agregaremos una clase a ese elemento:
function appendDay(day, calendarDaysElement) { // ... if (day.date === TODAY) { dayElementClassList.add("calendar-day--today"); }}¡Ahora podemos diseñarlo!
.calendar-day--today { padding-top: 4px;}
.calendar-day--today div { color: #fff; border-radius: 9999px; background-color: var(--grey-800);}¡Voilá, ahí lo tenemos! Echa un vistazo a la demostración final para ver todo junto.
Ver demostración
Deja un comentario