Duda con calendario Javascript realizado por mi
Publicado por djzzz (5 intervenciones) el 28/12/2015 17:19:25
Buenas tardes!! Tenía una pequeña duda acerca de este sencillo calendario hecho por mi.
Pues bien, mi duda es, cuando cambio los datos del objeto fecha realizado en la función en la que se crea la tabla, por ejemplo al mismo mes de otro año anterior, es decir, cambiando parámetros en el objeto que no sean los actuales, se me descoloca la tabla, o sólo crea celdas hasta cierto punto.. Errores de ese tipo.
Pues bien, quería consultar si alguien ve algún tipo de error, con el fin de que el calendario no tenga fallos.
Muchas gracias de antemano.
PD: está hecho muy a lo simple, pero estoy aprendiendo y es la mejor forma de irme enterando antes de hacer las cosas mucho más eficaces o reduciendo código.
Pues bien, mi duda es, cuando cambio los datos del objeto fecha realizado en la función en la que se crea la tabla, por ejemplo al mismo mes de otro año anterior, es decir, cambiando parámetros en el objeto que no sean los actuales, se me descoloca la tabla, o sólo crea celdas hasta cierto punto.. Errores de ese tipo.
Pues bien, quería consultar si alguien ve algún tipo de error, con el fin de que el calendario no tenga fallos.
Muchas gracias de antemano.
PD: está hecho muy a lo simple, pero estoy aprendiendo y es la mejor forma de irme enterando antes de hacer las cosas mucho más eficaces o reduciendo código.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Calendario VA</title>
<script type="text/javascript">
//Creamos 2 arrays, uno con el nº de días de cada mes y otro con los nombres de cada día de la semana
var diasMes= new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var diasSemana= new Array('LUN', 'MAR', 'MIE', 'JUE', 'VIE', 'SAB', 'DOM');
var fecha= new Date(); // Primero, creamos un objeto tipo fecha, y a partir de él obtenemos día de la semana en nº, nombre, etc
var mes= fecha.getMonth(); //Recordar que los meses van de 0-11
var numeroDiaMes= fecha.getDate(); // Nos da el día del mes entre 1-31
var anio= fecha.getFullYear(); //Obtenemos el año
var tabla=""; //La usaremos para la construcción de la tabla
//Función para establecer el nº de días a 29 si el año es bisiesto
function esBisiesto(a){
if((a % 4 == 0 && a % 100 != 0) || a % 400 == 0){
diasMes[1] = 29;
}}//Función para dibujar la tabla
function dibujaTabla(){
//Primero, llamamos a la función esBisiesto, por si el año lo fuera que así actualice el nº de días de FEB
esBisiesto(anio);
//Acto seguido, procedemos a obtener el primer día del mes para poder construir la tabla
var seleccionarDiasMes=diasMes[mes]; //Obtenemos los dias del mes actual
var diaActual= new Date(anio,mes,1); //Creamos un objeto fecha estableciendo el día uno con mes y año actuales
var diaSemanaDelDiaUno= diaActual.getDay()-1; //Y, con esta variable, obtenemos en que día de la semana cae el día 1 del mes
var contadorD=1; // Creamos esta variable contador para la inserción de días en la tabla del calendario
//Comenzamos la construcción del calendario en forma de tabla
tabla="<br/><table width='525px' border='2' align='center'><caption>" +numeroDiaMes+ "/" +(mes+1)+ "/" +anio+ "</caption><tr>";
//Recorremos el array diasSemana para colocar en una fila y 7 cedas cada día de la semana
for (var i=0; i<7; i++){
tabla += "<th style='text-align:center; width:75px; background-color:lightblue'>" +diasSemana[i]+ "</th>";
}tabla += "</tr><tr style='text-align:center;'>";
//Recorremos otro bucle para rellenar las celdas vacías hasta el día que sea el que cae en 1
for (var i=0; i<diaSemanaDelDiaUno; i++){
if (i==5 || i==6){ //Si el dia de la semana es sabado o domingo, le colocamos otro fondo
tabla += "<td style='background-color:grey;'></td>";
} else {
tabla += "<td></td>";
}if (i==6){
tabla += "</tr><tr style='text-align:center;'>"; //Si es el 1er domingo abrimos otra columna
} } //Recorremos otro bucle para rellenar las celdas con los días del mes correspondiente
for (var i=diaSemanaDelDiaUno; i<=seleccionarDiasMes; i++){
if (i==5 || i==6 || i==12 || i==13 || i==19 || i==20 || i==26 || i==27 || i==33 || i==34){
if (contadorD == numeroDiaMes){ //Si es fin de semana y es el nº de dia del mes, le pone en rojo
tabla+= "<td style='background-color:grey;'><span style='color:red;font-weight:bold;'>" +contadorD+ "</span></td>";
contadorD++;
} else {
tabla += "<td style='background-color:grey;'>" +contadorD+ "</td>";
contadorD++;
}} else { //Si no es fin de semana y es el nº de dia del mes, le pone en rojo
if (contadorD == numeroDiaMes){
tabla += "<td><span style='color:red;font-weight:bold;'>" +contadorD+ "</span></td>";
contadorD++;
} else {
tabla += "<td>" +contadorD+ "</td>";
contadorD++;
} }if (i==6 || i==13 || i==20 || i==27 || i==34){ // Si es domingo se añade una nueva columna
tabla += "</tr><tr style='text-align:center;'>";
} }tabla += "</tr></table>";
document.write(tabla); // Cerramos y Mostramos la tabla
}dibujaTabla();
</script>
</head>
<body>
</body>
</html>
Valora esta pregunta
0
