En este tutorial utilizaremos JavaScript para crear estructuras del DOM y usaremos algunos métodos propios del tipo Date para crear el calendario del 2017.

Se acerca año nuevo y quién no necesita un calendario para empezar el 2017. Por esa razón, en este tutorial aprenderemos a crear un calendario con JavaScript, utilizaremos métodos para modificar el DOM, seleccionaremos un elemento dentro de este y usaremos métodos propios del tipo de dato fecha.

En JavaScript creamos y llamamos a una función llamada "estructurar" en la cual crearemos toda la estructura HTML del calendario.

Mediante el método .createElement, creamos un elemento "div" y lo almacenamos en la variable mes.

let mes = document.createElement("DIV");

Para agregar una clase a este elemento usamos el metodo .className

mes.className = "mes";

Y para agregarlo al DOM utilizamos el método .appendChild

document.body.appendChild(mes);

Con estos 3 métodos hemos creado y agregado un elemento al DOM de HTML.

Creamos un nuevo elemento, esta vez de la clase "table" con la clase  tabla_mes y para agregarlo como un elemento hijo del elemento div creado anteriormente, hacemos uso nuevamente del método .appendChild.

let tabla_mes = document.createElement("TABLE");
tabla_mes.className = "tabla_mes";
mes.appendChild(tabla_mes);

A esta tabla le agregaremos un título creando un elemento "caption" con la clase "titulo", para agregar texto utilizaremos un método más llamado .innerText.

let titulo = document.createElement("CAPTION");
titulo.className = "titulo";
titulo.innerText = "Enero";
tabla_mes.appendChild(titulo);

El equivalente que obtendremos en HTML hasta ahora es el siguiente.

    
        
     
Enero

SI te preguntas cuál es la ventaja de utilizar JavaScript, recordemos que HTML no es un lenguaje de programación, por lo que no se pueden usar estructuras como un bucle for.

En esta ocasión realizaremos un ciclo para crear cada uno de los 12 meses. Primero tendremos un array con los nombres de los 12 meses.

var mes_text = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];

Y añadimos todo el código anterior en un bucle for, dentro de este realizamos la modificación de la asignación del texto de título, pudiendo así rotular los 12 meses

function estructurar() {
   for (m = 0; m <= 11; m++) {
       //Título
       titulo.innerText = mes_text[m];
    }
}

Con estas modificacione hemos creado los 12 meses de una manera dinámica, basándose en información de un array, recordemos que la información en bases de datos se encuentra almacenada de esta forma.

Bien ahora creemos los elementos restantes de una tabla.

Creamos y agregamos un elemento thead a la tabla 

let cabecera = document.createElement("THEAD");
tabla_mes.appendChild(cabecera);

Creamos y agregamos una fila a la cabecera. 

let fila = document.createElement("TR");
cabecera.appendChild(fila);

Para crear cada uno de los 7 elementos del encabezado creamos un nuevo bucle, y haciendo uso de otro array agregamos las encabezados de los días de la semana. Cada encabezado será un elemento de tipo "th".

var dia_text = ["Dom", "Lun", "Mar", "Mie", "Juv", "Vie", "Sab"];

for (d = 0; d < 7; d++) {
    let dia = document.createElement("TH");
    dia.innerText = dia_text[d];
    fila.appendChild(dia);
}

Ahora crearemos el cuerpo de la tabla, de forma muy similar al encabezado.

let cuerpo = document.createElement("TBODY");
tabla_mes.appendChild(cuerpo);

La diferencia ahora es que no solo sera una fila sino 6 de ellas. Además los elementos de las columnas serán elementos de tipo "TD".

for (f = 0; f < 6; f++) {
    let fila = document.createElement("TR");
    cuerpo.appendChild(fila);
    for (d = 0; d < 7; d++) {
        let dia = document.createElement("TD");
        dia.innerText = "1";
        fila.appendChild(dia);
    } 
}

Con esto hemos finalizado la creación de la estructura en HTML de nuestro calendario, ahora queda enumerar de forma correcta los 366 días del 2017.

Creamos una función mediante la cual creamos un elemento de tipo date, indicando el año y el día 0 para inicializarlo. Luego, añadimos el número de día del año para generar la fecha de ese día en específico.

function fechaPorDia(año, dia) {
  var date = new Date(año, 0);
  return new Date(date.setDate(dia));
}

Ahora creamos y llamamos a una función de nombre "numerar" encargada de colocar los números adecuados en el calendario. Aquí se realiza un bucle para obtener la fecha de cada uno de los 365 días del 2017, haciendo uso de la función creada anteriormente.

numerar();

function numerar() {
    for (i = 1; i < 366; i++) {
        let fecha = fechaPorDia(2017, i);
    }
}

Mediante el método .getMonth() de los objetos date obtenemos el mes del día mediante un número del 0 al 11.

let mes = fecha.getMonth();

Con .getElementsByClassName('mes') seleccionamos todos los elementos del DOM que tienen por clase "tabla_mes". Seleccionamos el mes correcto con el índice obtenido en la línea anterior.

let select_tabla = document.getElementsByClassName('tabla_mes')[mes];

Mediante el método .getDate() obtenemos el día del mes que corresponde al día del año, y con el método .getDay() obtenemos el día de la semana que le corresponde.

let dia = fecha.getDate();
let dia_semana = fecha.getDay();

Con estos datos, ubicamos de manera correcta el día dentro del mes. Mediante el método .children accedemos a la sección tbody de la tabla del mes seleccionada (.children[2]), luego a la fila de semanas correspondiente(.children[sem]), y finalmente al día de la de esa semana que le corresponde (.children[dia_semana]). Con el método innerText agregamos el número del mes correspondiente.

select_tabla.children[2].children[sem].children[dia_semana].innerText = dia;

El control del número de fila, estará a cargo de 2 sentencias if, la primera reinicia el conteo cual el día del mes es 1, y la segunda incrementa la fila cuando el día de la semana es 6.

if (dia == 1) {var sem = 0;}

if (dia_semana == 6) { sem = sem + 1;}

Finalmente eliminamos el valor temporal asignado a los elementos td.

let dia = document.createElement("TD");
dia.innerText = "";

Ahora nuestro calendario ha quedado numerado de forma correcta.

Los estilos quedan a tu criterio, ¡suelta esa imaginación que llevas dentro! Si aún no dominas esta habilidad, en DevCode contamos con el Curso de HTML y CSS que se encuentra totalmente gratuito.

Aquí te dejo la aplicación con unos estilos que he agregado.

Si deseas aprender que es el DOM (Document Object Model) y demás características fundamentales de JavaScript, recuerda que en DevCode tenemos un Curso de Fundamentos de JavaScript. ¿Qué esperas?, ¡inscríbete ahora mismo! Además con una suscripción podrás acceder a muchos otros cursos que complementarán tu aprendizaje. No olvides compartir el tutorial con tus amigos y dejarnos tus dudas u opiniones en la caja de comentarios.