Código de JavaScript - Calendarios en JavaScript

Imágen de perfil
Val: 3.008
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

Publicado el 6 de Julio del 2017 por Xve (292 códigos)
26.055 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(7)

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
26.057 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 (7)

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
Manuel
23 de Marzo del 2020
estrellaestrellaestrellaestrellaestrella
A mí también me gustaría saber cómo hacerlo. Gracias
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...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s4062