Código de JavaScript - Calendarios en JavaScript

Imágen de perfil
Val: 2.206
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Calendarios en JavaScriptgráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(6)
Publicado el 6 de Julio del 2017 por xve
19.062 visualizaciones desde el 6 de Julio del 2017
Calendario desarrollado en JavaScript que muestra el mes actual y te permite cambiar de mes.

calendario-javascript

Versión 1
estrellaestrellaestrellaestrellaestrella(6)

Actualizado el 7 de Septiembre del 2017 (Publicado el 6 de Julio del 2017)gráfica de visualizaciones de la versión: Versión 1
19.063 visualizaciones desde el 6 de Julio del 2017
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="es">
<head>
	<!--http://www.lawebdelprogramador.com-->
	<title>Ejemplo de un simple calendario en JavaScript</title>
	<meta charset="utf-8">
	<style>
		#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;
		}
	</style>
</head>
 
<body>
 
<h1>Ejemplo de un simple calendario en JavaScript</h1>
<table id="calendar">
	<caption></caption>
	<thead>
		<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>
 
</body>
</html>
 
<script>
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, que es el máximo de valores que puede
	// haber... 6 columnas de 7 dias
	for(var i=1;i<=42;i++)
	{
		if(i==primerDiaSemana)
		{
			// determinamos en que dia empieza
			dia=1;
		}
		if(i<primerDiaSemana || i>=last_cell)
		{
			// celda vacia
			resultado+="<td>&nbsp;</td>";
		}else{
			// mostramos el dia
			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);
</script>



Comentarios sobre la versión: Versión 1 (6)

Imágen de perfil
8 de Julio del 2017
estrellaestrellaestrellaestrellaestrella
Son sabidas mis preferencias por estos códigos.

Gracias.
Responder
Imágen de perfil
7 de Septiembre del 2017
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Imágen de perfil
7 de Septiembre del 2017
estrellaestrellaestrellaestrellaestrella
Bueno, nos sirbe de guia a los que estamos empezando.
Un saludo
Responder
daniel
16 de Marzo del 2018
estrellaestrellaestrellaestrellaestrella
hola, como pongo un hipervinculo segun el dia
Responder
Vicent
2 de Junio del 2018
estrellaestrellaestrellaestrellaestrella
Hola, muchísimas gracias por el código. Tengo una preguntita, ¿cómo podria poner para que aparecieran los dias del mes anterior en lugar de un espacio en blanco? Por ejemplo, antes del dia 1 del mes, que apareciera el dia 31 del mes anterior. Muchas gracias.
Responder
Imágen de perfil
1 de Julio del 2019
estrellaestrellaestrellaestrellaestrella
se puede bloquear un día desde mysql por estar con agenda llena? y como puedo seleccionar 1 día del calendario y subir datos a mysql?
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s4062