modificar calendario Javascript

veriyo · #1 (**permalink**) 05/05/2011, 07:08

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>

IsaBelM · #2 (**permalink**) 05/05/2011, 07:57

tendrás que usar un arreglo con todas las fechas que han de estar en rojo o en verde, he ir comparándolas

veriyo · #3 (**permalink**) 06/05/2011, 02:47

gracias por la respuesta Isabel pero no tengo ni idea de como hacerlo la verdad, si me puedes explicar mas afondo como comparo las fechas te lo agradeceria porque ando muy verde......

IsaBelM · #4 (**permalink**) 06/05/2011, 16:16

te marco los cambios que he realizado. he comentado alguna línea que daba error (parent.parent.document.getElementById('contenedor _ilustrativo').innerHTML = 'Fecha: ' + fechaSeleccionada;)

por otro lado, esto realmente se hace teniendo los datos en un bd

Cita:

<!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

//calendario

function evento(dia,mes){
this.dia = dia;
this.mes = mes;
}

// día y mes del evento para ponerlo en verde

var eventosG = new Array();
eventosG[0] = new evento(3,4);
eventosG[1] = new evento(7,4);
eventosG[2] = new evento(12,5);

// día y mes del evento para ponerlo en rojo

var eventosR = new Array();
eventosR[0] = new evento(8,4);
eventosR[1] = new evento(9,4);
eventosR[2] = new evento(22,5);

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(){
//alert(fechaHoy.getDate() + ' - ' + fechaelegida.getMonth() + ' - ' + eventos[5].dia + ' - ' + eventos[5].mes)

//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.getMo nth(),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

// si el día coincide con los valores del los array

day =fechaaux.getDate();

for(var iEventG=0; iEventG < eventosG.length; iEventG++)
{
if( ((fechaelegida.getMonth())==eventosG[iEventG].mes) && (day==eventosG[iEventG].dia) )
configcolor+='style="color:white; background:green;"';
}

for(var iEventR=0; iEventR < eventosR.length; iEventR++)
{
if( ((fechaelegida.getMonth())==eventosR[iEventR].mes) && (day==eventosR[iEventR].dia) )
configcolor+='style="color:white; background:red;"';
}

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_ent rada_reservas_ps').value = fechaSeleccionada;
parent.document.getElementById('cp_calendario_entr ada_ps').style.visibility="hidden";

}

</script>

<title>Documento sin título</title>
</head>

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

le he quitado el css, por que supera el límite de caracteres que admite el foro por post

veriyo · #5 (**permalink**) 08/05/2011, 03:48

MUUUUCHAS gracias!!!