Ver Mensaje Individual
  #1 (permalink)  
Antiguo 05/05/2011, 07:08
Avatar de veriyo
veriyo
 
Fecha de Ingreso: junio-2010
Mensajes: 80
Antigüedad: 13 años, 10 meses
Puntos: 0
modificar calendario Javascript

Saludos a todos!!!

Me descargue de la red un calendario hecho en javascript, hice algunas modificaciones pero muy simples ya que ando un poco verde en Javascript, y ahora quisiera hacer que en ese calendario me salgan algunos dias del mes en rojo y otros en verde o por ejemplo que un mes todos los dias sean rojos.... y la verdad no se me ocurre como hacerlo, si alguien sabe se lo agradeceré muuuucho muchisimo!!!! aqui os dejo el calendario:

Código HTML:
<!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>
<script language="JavaScript" type="text/javascript">
// funcion para recoger informacion de el iframe a la pagina principal

function A() 
{
	window.top.window.A(this.window,this.document);
}

//calendario

		meses = new Array();
		meses[0]='Enero';meses[1]='Febrero';meses[2]='Marzo';meses[3]='Abril';meses[4]='Mayo';meses[5]='Junio';
		meses[6]='Julio';meses[7]='Agosto';meses[8]='Septiembre';meses[9]='Octubre';meses[10]='Noviembre';meses[11]='Diciembre';
		
		diasemana = new Array();
		diasemana[0]='L';diasemana[1]='M';diasemana[2]='X';diasemana[3]='J';
		diasemana[4]='V';diasemana[5]='S';diasemana[6]='D';
		
		var fechalunes; var fechaelegida;
		var fechaHoy = new Date();
		fechaelegida=fechaHoy;
		var estado = 'semana';
		
function escribirCalendario(){
			//con esta funcion creamos los primeros elementos del calendario, c_calendario_general es la capa donde se muestra el calendario
			obj = document.getElementById("c_calendario_general");
			var txt = '<div id="calendario">';
			txt+='<div id="Ccabecera">' // y vamos creando las demas capas, en las css les cambiaremos las propiedades
				+ '<div class="Cguia" onclick="retrocederAño();">&lt&lt<\/div><div class="Cguia" onclick="retrocederMes();">&lt<\/div>'
				+ '<div id="Cmes">' + meses[fechaelegida.getMonth()] + ' ' + fechaelegida.getFullYear() + '<\/div>'
				+ '<div class="Cguia" onclick="avanzarMes();">&gt<\/div><div class="Cguia" onclick="avanzarAño();">&gt&gt<\/div><\/div>';
			
			for (i=0; i<7; i++) txt+='<div class="Ccasillasemana">' + diasemana[i] + '<\/div>';
			
			//variable fechaaux a modo de fecha auxiliar, la situo el dia 1 del mes y año actual
			var fechaaux = new Date(fechaelegida.getFullYear(),fechaelegida.getMonth(),1);
			//saco el dia de la semana que es el 1 del mes actual
			diaactual = fechaaux.getDay();
			//y voy retrasando la fecha de dia en dia hasta que llego a un lunes, una vez llegue a este lunes, sera la primera fecha que se pinte en el calendario
			while (diaactual!=1) {
			fechaaux.setDate(fechaaux.getDate() - 1); diaactual=fechaaux.getDay();}
					
			// creamos los dias en el calendario, pintamos el dia que contiene fechaaux y la pasamos al dia siguiente
			for (i=0; i<6; i++) 
				for (j=0; j<7;j++)
				{
				configcolor = '';	// aqui meteremos el codigo adicional para hacer algun cambio de color
				if (fechaelegida.getDate()==fechaaux.getDate())
					configcolor+='style="color:white; background:#000066;"';	//CASILLA DE HOY
				else if ((fechaaux.getDay() == 6) || (fechaaux.getDay() == 0))	//si el dia actual es sabado o domingo
					{
					if (fechaelegida.getMonth() == fechaaux.getMonth()){

					configcolor+='style="color:red ;"';//si estoy en el mes actual pintamos de rojo
					
					}else configcolor+='style="color:coral;"';//si estoy en otro mes, se pinta de rojo suave
					}
				if (fechaelegida.getMonth() == fechaaux.getMonth()) {
					txt+='<div class="Ccasilladia"' + configcolor;
					txt+=' onclick="cambiarDiaMesAño(' + fechaaux.getDate() + ',' + fechaaux.getMonth() + ',' + fechaaux.getFullYear() + ');mostrarFecha();">';
					txt+= fechaaux.getDate() + '<\/div>';
					}
				else {
					txt+='<div class="Ccasilladia" style="cursor:default;"> <\/div>';
					}
				fechaaux.setDate(fechaaux.getDate() + 1);
				}
			txt+='<\/div>';
			obj.innerHTML=txt;
		}
		//funciones para los controles del calendario, avanzar un mes, retroceder un mes, y lo mismo para los años
		function avanzarMes(){
			fechaelegida.setMonth(fechaelegida.getMonth() + 1);escribirCalendario();
			
			var _anio = fechaelegida.getFullYear();
			var _mes = fechaelegida.getMonth() + 1;
			_mes = _mes < 10 ? '0' + _mes  : _mes.toString();
			var _dia = fechaelegida.getDate();
	
			_dia = _dia < 10 ? '0' + _dia  : _dia.toString();
			var fechaSeleccionada =  _dia +' / ' + _mes + ' / ' + _anio;
			
			parent.parent.document.getElementById('contenedor_ilustrativo').innerHTML = 'Fecha: ' + fechaSeleccionada;
		}
		function retrocederMes(){
			fechaelegida.setMonth(fechaelegida.getMonth() - 1);escribirCalendario();
			var _anio = fechaelegida.getFullYear();
			var _mes = fechaelegida.getMonth() + 1;
			_mes = _mes < 10 ? '0' + _mes  : _mes.toString();
			var _dia = fechaelegida.getDate();
	
			_dia = _dia < 10 ? '0' + _dia  : _dia.toString();
			var fechaSeleccionada =  _dia +' / ' + _mes + ' / ' + _anio;
			
			parent.parent.document.getElementById('contenedor_ilustrativo').innerHTML = 'Fecha: ' + fechaSeleccionada;
		}
		function avanzarAño(){
			fechaelegida.setFullYear(fechaelegida.getFullYear() + 1);escribirCalendario();
			var _anio = fechaelegida.getFullYear();
			var _mes = fechaelegida.getMonth() + 1;
			_mes = _mes < 10 ? '0' + _mes  : _mes.toString();
			var _dia = fechaelegida.getDate();
	
			_dia = _dia < 10 ? '0' + _dia  : _dia.toString();
			var fechaSeleccionada =  _dia +' / ' + _mes + ' / ' + _anio;
			
			parent.parent.document.getElementById('contenedor_ilustrativo').innerHTML = 'Fecha: ' + fechaSeleccionada;
		}
		function retrocederAño(){
			fechaelegida.setFullYear(fechaelegida.getFullYear() - 1);escribirCalendario();
			var _anio = fechaelegida.getFullYear();
			var _mes = fechaelegida.getMonth() + 1;
			_mes = _mes < 10 ? '0' + _mes  : _mes.toString();
			var _dia = fechaelegida.getDate();
	
			_dia = _dia < 10 ? '0' + _dia  : _dia.toString();
			var fechaSeleccionada =  _dia +' / ' + _mes + ' / ' + _anio;
			
			parent.parent.document.getElementById('contenedor_ilustrativo').innerHTML = 'Fecha: ' + fechaSeleccionada;
		}
		
		function cambiarDiaMesAño(dia,mes,año){
		// funcion que se ejecuta al pulsar una casilla del calendario, se establece la fecha pulsada como la elejida para pintar, y se reescribe el calendario y la agenda
			fechaelegida.setFullYear(año,mes,dia); escribirCalendario();

		}
function mostrarFecha()
{
//funcion para mostrar la fecha seleccionada
	var _anio = fechaelegida.getFullYear();
	var _mes = fechaelegida.getMonth() + 1;//se le suma 1 porque los meses que guarda esto en vez de ir del 1 al 12 van del 0 al 11 
	_mes = _mes < 10 ? '0' + _mes  : _mes.toString();// para que cuando el numero sea inferior a 10 se añada el 0
	var _dia = fechaelegida.getDate();
	
	_dia = _dia < 10 ? '0' + _dia  : _dia.toString();// para que cuando el numero sea inferior a 10 se añada el 0
	
	var fechaSeleccionada =  _dia +'/' + _mes + '/' + _anio;

	parent.document.getElementById('imp_text_fecha_entrada_reservas_ps').value = fechaSeleccionada;
	parent.document.getElementById('cp_calendario_entrada_ps').style.visibility="hidden";

} 

</script>

<style type="text/css">

.Ccasillasemana{ /* Ccasilla que son las casillas con el numero de la semana*/
	width:30px;
	height:19px; 
	border-left:0px;
	border-top:0px;
	margin-right:1px;
	margin-bottom:1px; 
	background:#999999; 
	float:left;
	font-size:100%; 
	text-align:center;
	-khtml-user-select:none;
	-moz-user-select:none; 
	onselectstart:return false;
}
.Ccasilladia{
	width:30px;
	height:19px; 
	margin-right:1px;
	margin-bottom:1px; 
	background:#00CC99; 
	float:left;
	cursor:pointer;
	text-align:center;
	-khtml-user-select:none;
	-moz-user-select:none; 
	onselectstart:return false;
}
#Ccabecera{
	width:217px;
	height:20px; 
	background:#000066;
	-khtml-user-select:none;
	-moz-user-select:none; 
	onselectstart:return false;
}
.Cguia{ /*Cguia es el de los botones de cambio*/
	color:white; 
	background:#000066; 
	margin-left:10px;
	float:left;
	margin-right:8px; 
	font-size:70%;
	cursor:pointer;
	-khtml-user-select:none;
	-moz-user-select:none; 
	onselectstart:return false;
}
#calendario{
	width:230px;
	height:165px;
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 8px;
	text-align: center;
}
#Cmes{
	width:105px; 
	text-align:center; 
	float:left;
	overflow:hidden; 
	color:white;
}
.capa_borde {	
	border: 1px solid #999999;
	position: absolute;
}
.fechaselec {	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	text-align: left;
	padding-left: 8px;
	padding-top: 5px;
	-khtml-user-select:none;
	-moz-user-select:none; 
	onselectstart:return false;

}
#c_calendario_general {
	position:absolute;
	left:0px;
	top:0px;
	width:231px;
	height:240px;
	z-index:1;
}

#contenedor_ilustrativo {	position:absolute;
	left:388px;
	top:153px;
	width:311px;
	height:430px;
	z-index:26;
	padding-top: 5px;
	visibility: visible;
}
</style>

<title>Documento sin t&iacute;tulo</title>
</head>

<body onload="escribirCalendario(); A()">
<div id="c_calendario_general"></div>
</body>
</html>