Cómo crear un Calendario actual

calendario

Cómo crear un Calendario actual

¿Cómo hacer un calendario mediante el uso de HTML, CSS Y JS?

En este articulo vamos a explicar detalladamente los pasos que hay que hacer para poder desarrollar un calendario. En el cual nos va a marcar con un resaltado a color el día en que estamos.

He creído que iría mejor tener un código de esta manera vinculado a un calendario, en el que con pocas líneas ya puedes hacer el calendario completo de varios años, en el que explico más abajo las definiciones, las variables, y los cálculos para que sea un calendario reutilizable. Para este calendario en concreto vamos a tener en cuenta los tres tipos códigos que vamos a incluir, para que así le podamos dar las características adecuadas que queremos que tenga.

Utilizo un código fácil de entender y escribir. De esta manera también nos puede servir para otro calendario y que puedas aprovechar parte del código.

Código HTML y ESTRUCTURA

     <table id="calendar">
       <thead>
       <caption> </caption>
       <tr>
          <th>
                    Lun
          </th>
          <th>
                    Mar
          </th>
          <th>
                    Mie
          </th>
          <th>
                    Jue
          </th>
          <th>
                    Vie
          </th>
          <th>
                    Sab
          </th>
          <th>
                    Dom
          </th>
      </tr>
     </thead>
 <tbody> </tbody>
     </table>

Definición del HTML

Usaremos una etiqueta <table id='calendar'>, en el cual dentro le pondremos alguna etiquetas en las que le añadiré la definición que tienen y que es lo que hacen.

Uso la tabla para que así ya desde un principio nos queden los días puestos y con separación, mirándolo desde otra perspectiva un calendario es como una tabla invisible, en la que cada número está dentro de su espacio dado.

Además he escogido escribir este código para ahorrarnos poner más de lo normal. También se puede hacer de distintas maneras el calendario, pero de esta manera creo que es mejor para que a la hora de hacer el documento nos sea de más utilidad y con más facilidad de entenderlo.

  • El <caption>, está vacío en este caso, pero le podemos dar algún nombre en caso de que sea necesario.
  • Uso un solo <tr> para incluir todos los días de la semana. En el que cada día diferente estará dentro de un <th>, de esta manera quedan los días separados en sus celdas correspondientes.
Definición de etiquetas
  1. Etiqueta <table> = representa una tabla.
  2. Etiqueta <thead> = contiene un bloque de filas en la tabla.
  3. Etiqueta <caption> = le da un título a la tabla.
  4. Etiqueta <tr> = define un fila de celdas de la tabla.
  5. Etiqueta <th> = representa una celda de encabezado (aquí introducimos los días que hay de la semana)
  6. Etiqueta <tbody> = representa el cuerpo de la tabla.

 

 

Código CSS

#calendar { font-family:Arial;font-size:12px;}
#calendar caption {text-align:left;padding:5px 10px; background-color:#003366;
color:#fff;font-weight:bold;font-size:medium;}
#calendar caption div:nth-child(1) {float:left;}
#calendar caption div:nth-child(2) {float:right;}
#calendar caption div:nth-child(2) a {cursor:pointer;}
#calendar th {background-color:#006699;color:#fff;width:40px;}
#calendar td {text-align:right;padding:2px 5px;background-color:silver;}
#calendar .hoy {background-color:red;}

Definición del CSS

Los estilos, están todos destinados a dar las características al Calendario, cómo el código lo he hecho en pocas líneas, nos centramos en usar las etiquetas introducidas para darle los valores y características.

Usaremos la <id> que he creado para darle los valores, como se ve en la <id calendar>, se repite varias veces pero en cada una le damos diferentes valores donde queremos que nos haga los cambios y nos aplique las características que le vamos dando.

Código JS

var actual=new Date();
function mostrarCalendario(year,month)
{
    var now=new Date(year,month-1,1);
    var last=new Date(year,month,0);
    var primerDiaSemana=(now.getDay()==0)?7:now.getDay();
    var ultimoDiaMes=last.getDate();
    var dia=0;
    var resultado="<tr bgcolor='silver'>";
    var diaActual=0;
    console.log(ultimoDiaMes);
    var last_cell=primerDiaSemana+ultimoDiaMes;
    // hacemos un bucle hasta 42 
    //de  6 columnas y de 7 días
    for(var i=1;i<=42;i++)
    {
        if(i==primerDiaSemana)
        {
            // determinamos en que día empieza
            dia=1;
        }
        if(i<primerDiaSemana || i>=last_cell)
        {
            // celda vacía
            resultado+="<td>&nbsp;</td>";
        }else{
            // mostramos el día
            if(dia==actual.getDate() && month==actual.getMonth()+1 &&
 year==actual.getFullYear())
                resultado+="<td class='hoy'>"+dia+"</td>";
            else
                resultado+="<td>"+dia+"</td>";
            dia++;
        }
        if(i%7==0)
        {
            if(dia>ultimoDiaMes)
                break;
            resultado+="</tr><tr>\n";
        }
    }
    resultado+="</tr>";

var meses=Array("Enero", "Febrero", "Marzo", "Abril", "Mayo",
 "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre",
 "Diciembre");

    // Calculamos el siguiente mes y año
    nextMonth=month+1;
    nextYear=year;

    if(month+1>12)
    {
        nextMonth=1;
        nextYear=year+1;
    }

    // Calculamos el anterior mes y año
    prevMonth=month-1;
    prevYear=year;

    if(month-1<1)
    {
        prevMonth=12;
        prevYear=year-1;
    }

document.getElementById("calendar").getElementsByTagName("caption")
[0].innerHTML="<div>"+meses
[month-1]+" / "+year+"</div>
<div>
<a onclick='mostrarCalendario("+prevYear+","+prevMonth+")'>&lt;</a>
<a onclick='mostrarCalendario("+nextYear+","+nextMonth+")'>&gt;</a>
</div>";
document.getElementById("calendar").getElementsByTagName("tbody")
[0].innerHTML=resultado;
}

mostrarCalendario(actual.getFullYear(),actual.getMonth()+1);

Definición JS

  •  El New date:  representa un momento fijo en el tiempo en un formato independiente, el objeto date va a contener números.
  • Creamos una Función en la que vamos a declarar dentro siete variable que consistirán en crear los datos que se requieren para el calendario. Estas siete variables las vamos a ver en el código en el que en cada parte le pongo /*comentario*/ para que se vea bien cuando les hacemos el llamado para que ejecuten el código y nos muestren el resultado obtenido.
  • Creamos nueva Array: en la que le añado todos los meses  dentro de la Array que contiene el año, para que así se muestren a la hora de inspeccionar el calendario.
  • IF…Else: ejecuta una sentencia si una condición especificada es evaluada como verdadera. Si la condición es evaluada como falsa, otra sentencia puede ser ejecutada.
  • On-click: son eventos que ocurren cuando el usuario hace clic sobre el botón.
  • getElementById: es una referencia a un objeto, o nulo si un elemento con el ID especificado no
    se encuentra en el documento.
  • getElementsByTagName: devuelve una lista de elementos con un nombre determinado. Se busca en todo el documento.
  • .Innerhtml: es una propiedad que hace que nos muestre el resultado dentro del documento html.

Cómo se puede ver, voy dejando pistas en cada parte del código para que se entienda en  cómo se deben hacer las funciones con su contenido.

Los bucles con sus fórmulas hechas para el cálculo, y las llamadas de las funciones para que ejecuten el contenido incluido.

Resultado final del Calendario


Este sería el resultado final del Calendario una vez hecho todo el código.

No olvidéis echar un ojo a artículos relacionados con los calendarios., para poder tener otras ideas en las que queráis mejorarlo o optar por otra tipología de letra, de colores, o de formatos.

Accede al siguiente link para poder visualizar el código completo: https://codepen.io/Wilchard89

Escribe un comentario