Código Popó: Codigo en Javascript para hacer un calendario (2a Parte)

En la primera parte vimos que tan fácil es hacer un calendario, pero gris. sin colores o forma. en esta ocasion haremos lo mismo pero dandole arte. Recuerden que no es lo mismo MiArte que TuArte.

<!DOCTYPE html>
<html>
<body>

<script>

// Inicializa Calendario
var mes = [0,0,0,0,0,0,0
          ,0,0,0,0,0,0,0
          ,0,0,0,0,0,0,0
          ,0,0,0,0,0,0,0
          ,0,0,0,0,0,0,0
          ,0,0,0,0,0,0,0]

// Inicializa fecha
var fecha0 = new Date(2016,2,1);//Mar2016

// Llena el calendario
var dia_semana = fecha0.getDay();

var fecha1 = new Date(2016,2,1-dia_semana);

for(var i = 0; i< 42; i++) {
   mes[i]=fecha1.getDate();
   fecha1.setDate(mes[i]+1)
}

/* Crea la Div */

var div1 = document.createElement("DIV");
div1.style = "background-color: rgb(255, 255, 255); border: 2px solid rgb(156, 0, 0); position: absolute; overflow: hidden; left: 100px; top: 68px; ";

var table1a = document.createElement("TABLE");
table1a.style = "width:100%; margin: 0px;";
table1a.cellspacing= "0px";
table1a.cellpadding="0px";
table1a.border="0px";

var row0 = table1a.insertRow(0);
var row1 = table1a.insertRow(1);
var cell0 = row0.insertCell(0)
var cell1 = row1.insertCell(0)
cell0.style ="font-weight: bold; color: rgb(255, 255, 255); background-color: rgb(156, 0, 0); text-align: center";
cell0.innerHTML = "Calendario";

var div2 = document.createElement("DIV");

var table2 = document.createElement("TABLE");
table2.style = "text-align: right; ";

var row2 = table2.insertRow(0);

var cell2a = row2.insertCell(0);
var cell2b = row2.insertCell(1);
var cell2c = row2.insertCell(2);

cell2a.innerHTML = "◀";
cell2b.innerHTML = "Marzo 2016";
cell2b.colSpan = "5";
cell2c.innerHTML = "▶";
cell2a.style = "text-align: center";
cell2b.style = "text-align: center";
cell2c.style = "text-align: center";

var row3 = table2.insertRow(1);
var cell3a = row3.insertCell(0);
var cell3b = row3.insertCell(1);
var cell3c = row3.insertCell(2);
var cell3d = row3.insertCell(3);
var cell3e = row3.insertCell(4);
var cell3f = row3.insertCell(5);
var cell3g = row3.insertCell(6);

cell3a.innerHTML = "Do";
cell3b.innerHTML = "Lu";
cell3c.innerHTML = "Ma";
cell3d.innerHTML = "Mi";
cell3e.innerHTML = "Ju";
cell3f.innerHTML = "Vi";
cell3g.innerHTML = "Sa";

estilo_fijo = "width:24px;max-width:24px;";
cell3a.style = estilo_fijo;
cell3b.style = estilo_fijo;
cell3c.style = estilo_fijo;
cell3d.style = estilo_fijo;
cell3e.style = estilo_fijo;
cell3f.style = estilo_fijo;
cell3g.style = estilo_fijo;

var row_tmp;
var cell_tmp;
var j = 2;
var k = 0;
for(var i = 0; i< 42; i++) {
if(i%7==0) {
    row_tmp = table2.insertRow(j++);
    k = 0;
}

cell_tmp = row_tmp.insertCell(k++);
cell_tmp.innerHTML = mes[i];
cell_tmp.style = estilo_fijo;

}

div2.appendChild(table2);

cell1.appendChild(div2);
div1.appendChild(table1a);
document.body.appendChild(div1);

</script>

</body>
</html>

20160301

Codigo en Javascript para hacer un calendario (2a Parte)

No hay comentarios:

Publicar un comentario