Código de JQuery - Calendario en jquery

Imágen de perfil

Calendario en jquerygráfica de visualizaciones


JQuery

Publicado el 07 de Julio del 2014 por Xavi
1.894 visualizaciones desde el 07 de Julio del 2014. Una media de 21 por semana
Código que muestra como crear un calendario en javascript utilizando jquery. Este calendario permite moverse por los meses y mostrar la fecha en el formato deseado cuando se pulsa sobre cualquier fecha.

Versión 1

Publicado el 07 de Julio del 2014gráfica de visualizaciones de la versión: Versión 1
1.895 visualizaciones desde el 07 de Julio del 2014. Una media de 21 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puedes visualizar un ejemplo aquí
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
 
    <style>
		#calendar {
			width:200px;
			font-family:Arial;
			font-size:12px;
			border-collapse: collapse;
                        background-color:#fff;
		}
		#calendar caption {
			padding:5px 10px;
			background-color:#ddd;
			color:#444;
			font-weight:bold;
		}
		#calendar caption span {
			padding:2px;
		}
		#calendar caption span:nth-child(1) {
			float:left;
		}
		#calendar caption span:nth-child(3) {
			float:right;
		}
		#calendar caption span:nth-child(1), #calendar caption span:nth-child(3) {
			cursor:pointer;
		}
		#calendar caption span:nth-child(1):hover, #calendar caption span:nth-child(3):hover {
			background-color:#0073ea;
			color:#fff;
			-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:8px;
		}
		#calendar th {
			color:#444;
		}
		#calendar td {
			text-align:right;
			padding:5px;
			border-spacing: 2px;
			font-weight:bold;
		}
		#calendar td.d {
			border:1px solid #ccc;
			cursor:pointer;
			color:#0073ea;
		}
		#calendar td.d:hover {
			color:#fff;
			background-color:#0073ea;
		}
		#calendar td.today {
			color:#000;
		}
	</style>
 
    <script>
		var months=Array("Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre");
 
		$(document).ready(function()
		{
			showCalendar();
 
			function showCalendar(year,month)
			{
				var now=new Date();
				var dayNow=now.getDate();
 
				if(year==undefined || month==undefined)
				{
					// obtenemos los valores actuales
					var d=new Date();
				}else{
					if(month==12)
					{
						month=0;
						year++;
					}
					if(month==-1)
					{
						month=11;
						year--;
					}
					var d=new Date(year,month);
				}
				var monthShow=d.getMonth();
				var yearShow=d.getFullYear();
				var firstDayDate = new Date(d.getFullYear(), d.getMonth(), 1);
				var firstDay=firstDayDate.getDate();
				var dayWeek=firstDayDate.getDay()+7;
				var lastDayDate = new Date(d.getFullYear(), d.getMonth() + 1, 0);
				var lastDay=lastDayDate.getDate();
 
				$("#calendar caption").html("<span>&lt;&lt;</span><span>"+months[monthShow]+" "+yearShow+"</span><span>&gt;&gt;</span>");
				$("#calendar tbody tr").remove();
				$("#calendar tbody").append("<tr></tr>");
 
				var last_cell=dayWeek+lastDay
				var day=0;
				for(var i=1;i<=42;i++)
				{
					if(i==dayWeek)
					{
						// determinamos en que dia empieza
						day=1;
					}
					if(i<dayWeek || i>=last_cell)
					{
						// celda vacia
						$("#calendar tbody tr:last-child").append("<td></td>");
					}else{
						// mostramos el dia
						if(day==dayNow && monthShow==now.getMonth())
							$("#calendar tbody tr:last-child").append("<td class='today d'>"+day+"</td>");
						else
							$("#calendar tbody tr:last-child").append("<td class='d'>"+day+"</td>");
						day++;
					}
					// cuando llegamos al final de la semana, iniciamos una columna nueva
					if(i%7==0)
					{
						if(i>last_cell)
						{
							break;
						}
						$("#calendar tbody").append("<tr></tr>");
					}
				}
 
				// evento click encima de un dia
				$("#calendar .d").click(function(){
					$("#formato1").html($(this).html()+"/"+(monthShow+1)+"/"+yearShow);
					$("#formato2").html($(this).html()+" de "+months[monthShow]+" del "+yearShow);
				});
 
				// anterior mes
				$("#calendar caption span:first-child").click(function(){
					showCalendar(yearShow,monthShow-1)
				});
				// siguiente mes
				$("#calendar caption span:last-child").click(function(){
					showCalendar(yearShow,monthShow+1)
				});
			}
		});
    </script>
</head>
 
<body>
 
<h1>Calendario en jquery</h1>
 
<table id="calendar">
	<caption></caption>
	<thead>
		<tr>
			<th>Lu</th><th>Ma</th><th>Mi</th><th>Ju</th><th>Vi</th><th>Sa</th><th>Do</th>
		</tr>
	</thead>
	<tbody>
	</tbody>
</table>
 
<p>
	<div id="formato1"></div>
	<div id="formato2"></div>
</p>
 
</body>
</html>



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


No hay comentarios
 

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2711