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();"><<<\/div><div class="Cguia" onclick="retrocederMes();"><<\/div>'
+ '<div id="Cmes">' + meses[fechaelegida.getMonth()] + ' ' + fechaelegida.getFullYear() + '<\/div>'
+ '<div class="Cguia" onclick="avanzarMes();">><\/div><div class="Cguia" onclick="avanzarAño();">>><\/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ítulo</title>
</head>
<body onload="escribirCalendario(); A()">
<div id="c_calendario_general"></div>
</body>
</html>