📅 Proyecto Calendario

📝 Descripción

Calendario es una aplicación web sencilla y puramente frontend que genera dinámicamente un calendario anual. Permite a los usuarios seleccionar un año y visualizar los 12 meses correspondientes, con los días festivos y fechas especiales de la Comunidad de Madrid resaltadas.

El proyecto está construido con tecnologías web fundamentales (HTML, CSS y JavaScript) sin necesidad de un backend o base de datos, enfocándose en la manipulación del DOM para crear la interfaz.

---

✨ Características

• Selector de Año Dinámico: Permite al usuario elegir un año de un rango predefinido (10 años antes y 10 años después del año actual).
• Generación de Calendario Anual: Al seleccionar un año, se genera y muestra automáticamente la vista de los 12 meses.
• Resaltado de Días Festivos: Los días festivos y fechas personales (predefinidos en el código) se marcan con colores y tooltips para una fácil identificación.
• Diseño Responsivo: Interfaz adaptable a diferentes tamaños de pantalla, desde ordenadores de escritorio hasta dispositivos móviles.

---

🚀 Tecnologías Utilizadas

• HTML5: Para la estructura semántica de la página.
• CSS3: Para el diseño, la responsividad y la apariencia visual del calendario.
• JavaScript: Para la lógica de la aplicación, incluyendo la generación del calendario y la manipulación del DOM.

---

📖 Documentación del Script

El archivo assets/js/script.js contiene toda la lógica para generar y manipular el calendario. A continuación se detalla su funcionamiento.

1. Inicialización y Constantes

• Selectores del DOM: Se obtienen referencias al <select> para el año (SELECTOR_ANIO) y al <div> que contendrá los calendarios (CONTAINER_CAL).
• Constantes:
  • DIAS_2: Un array ['L', 'M', 'X', 'J', 'V', 'S', 'D'] que se usa para crear las cabeceras de los días de la semana en cada mes.
  • FIESTAS: Un array de objetos que contiene los días festivos. Cada objeto define el día, el mes (indexado desde 0), el nombre de la festividad y un color para resaltarlo.
  • FECHA_AHORA: Un objeto Date con la fecha actual, que se usa como referencia para generar el rango de años.

2. Flujo de Ejecución

1. window.onload: Cuando la página ha cargado completamente, se ejecutan dos funciones principales:

   • agregarAnios(): Se encarga de poblar el selector de años.
   • crearAnio(añoActual): Genera el calendario para el año seleccionado por defecto.

2. Función agregarAnios():

   • Calcula un rango de años (10 antes y 10 después del año actual).
   • Crea un elemento <option> por cada año en el rango y lo añade al SELECTOR_ANIO.
   • Establece el año actual como el valor seleccionado por defecto.
   • Añade un event listener al selector. Cuando el usuario cambia el año, este listener borra el contenido del calendario anterior y llama a crearAnio() con el nuevo valor.

3. Función crearAnio(anio):

   • Es la función orquestadora. Itera 12 veces (una por cada mes del año).
   • En cada iteración, llama a crearMes(anio, i), donde i es el número del mes (0-11).
   • Una vez que los 12 meses han sido creados y añadidos al DOM, itera sobre el array FIESTAS.
   • Para cada festivo, construye un id (ej: 2024-0-1 para el 1 de enero de 2024) y busca el elemento <td> correspondiente. Si lo encuentra, le aplica un title (para el tooltip) y el color de fondo especificado.

4. Función crearMes(anio, mes):

   • Esta es la función principal que construye la tabla de un mes individual.
   • Crea un objeto Date para el primer día del mes y año recibidos.
   • Genera la estructura HTML: un div.mes que contiene una <table> con su <caption> (nombre del mes) y <thead> (días de la semana).
   • Lógica de renderizado de días:
     • Inicia un bucle while que se ejecuta mientras la fecha que se está procesando (fechaMes) pertenezca al mes actual.
     • Dentro, crea una fila <tr>.
     • Un bucle for interno recorre los 7 días de la semana.
     • Se comprueba si el día de la semana de fechaMes coincide con la columna actual del bucle for.
       • Si no coincide, se crea una celda <td> vacía para mantener la estructura de la tabla.
       • Si coincide y la fecha sigue siendo del mes correcto, se crea la celda <td> con el número del día y se le asigna un id único.
     • Después de procesar un día, se incrementa la fecha en uno (fechaMes.setDate(fechaMes.getDate() + 1)).
     • Finalmente, la tabla completa del mes se añade al contenedor principal CONTAINER_CAL.

---