JavaScript - Duda con calendario Javascript realizado por mi

   
Vista:

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.

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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Duda con calendario Javascript realizado por mi

Publicado por xve (1595 intervenciones) el 29/12/2015 09:27:56
Creo que el problema lo tienes en esta linea:
1
var diaSemanaDelDiaUno= diaActual.getDay()-1;

Porque le restas -1? ese valor, te devuelve el dia de la semana, siendo 0 el domingo... si le restas uno, queda en -1, por lo cual ya tienes el problema.

Recuerda que en america, la semana empieza el domingo, siendo este el día 0.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Duda con calendario Javascript realizado por mi

Publicado por djzzz (5 intervenciones) el 29/12/2015 11:20:28
Porque aquí en España el primer día de la semana es el lunes, entonces para solventar ese día no me queda más remedio que hacer cuentas..
Entonces mis dudas surgen a raíz de eso que digo, y por más que miro es que no veo fallos.. al menos tipográficos..
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Duda con calendario Javascript realizado por mi

Publicado por xve (1595 intervenciones) el 29/12/2015 16:02:26
Pero... si el primer dia de la semana es domingo?? entonces tu sistema no funciona...

Revisa este código: http://www.lawebdelprogramador.com/codigo/PHP/2483-Ejemplo-de-crear-un-simple-calendario.html

Ahí veras como hacerlo correctamente.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Duda con calendario Javascript realizado por mi

Publicado por djzzz (5 intervenciones) el 29/12/2015 17:51:39
Revisé ese código pero aunque es más sencillo, seguí revisando el mío por no mezclar lenguajes y dí con los errores.
Como bien decías, al restar 1 al getDay para adaptarle, llega un momento en que el valor es -1, basta conque cuando el valor sea ese, le pongas a 6.
Por otra parte, el el tercer for, llegaba un momento en que paraba de construir celdas, y eso es porque hace la diferencia entre el valor que toma del dia día de la semana y el total de días del mes, bastaría con hacer una suma de ambos.

Aun así, muchísimas gracias por la ayuda, de veras. Así da gusto aprender!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de xve

Duda con calendario Javascript realizado por mi

Publicado por xve (1595 intervenciones) el 29/12/2015 20:24:55
Me alegro que lo hayas solucionado tu mismo!!!

Gracias por comentarlo...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar