Calendario Dinámico con JavaScript y Estilos

 
Este código dibuja un calendario señalando el día actual con fondo amarillo y los domingos con letras rojas.
Si pinchas en un día del calendario, el foco se sitúa en este día y el formulario coge la fecha dada. También puedes modificar el formulario y pulsar sobre el botón para modificar la fecha y ver su calendario. Si se pone una fecha inexacta como por ejemplo 40/10/2004, devolvería el calendario situado en el 9/11/2004, o sea que sumaria los días, igual pasa con los meses

Se divide en dos funciones de JavaScript, la primera encargada de cargar el calendario y la segunda de pasar los datos modificados.

La primera función pinta el calendario recibiendo el día, mes y año por este orden. Si los datos no le fueran pasados, se cargaría con los datos de la variable global gdFecha que por defecto tiene como valor la fecha del sistema del usuario.
Cuidado con: El primer bucle lo que hace es situarse en el día de la semana (Lunes, martes, ....)

La segunda función es bastante mas sencilla, ya que no tiene que cargar todos los datos, si no que solo rellena el formulario y llama a la función que carga el calendario.
Cuidado con la función getMonth() devuelve el día del mes pero el primer mes es 0 en vez de 1, de ahí que al presentarlo, se le sume uno y al llamarlo se le reste.

También se ha añadido en el head unos pequeños estilos, que darán formato a cada celda del calendario y a las casillas de texto del formulario.

En el body se debe insertar el formulario con los campos día, mes y año y una capa que será la que contenga el calendario:



En el HEAD:
<script language="javascript">

    //Su explorador no soporta java o lo tiene deshabilitado; esta pagina necesita javascript para funcionar correctamente<!--
    //Copyright © McAnam.com

    var gdFecha = new Date();

    function cargar_calendario(iDia, iMes, iAno){
    
        if (isNaN(iDia)) iDia = gdFecha.getDate();
        if (isNaN(iMes)) iMes = gdFecha.getMonth();
        if (isNaN(iAno)) iAno = gdFecha.getFullYear();

        var sCalendario;
        var sEstilos;
        var iCont;
        var iIncremento;
        var dPasoFecha = new Date(iAno,iMes,1);

        gdFecha = new Date(iAno,iMes,iDia);
    
        sCalendario = "<table border='1' cellspacing='0' cellpadding='0' bordercolor='#000000' style='background-color:#999999;cursor:default;'><tr>";
        sCalendario = sCalendario + "<tr>" +
                "<td class='celda_calendario'><b>L</b></td>" +
                "<td class='celda_calendario'><b>M</b></td>" +
                "<td class='celda_calendario'><b>X</b></td>" +
                "<td class='celda_calendario'><b>J</b></td>" +
                "<td class='celda_calendario'><b>V</b></td>" +
                "<td class='celda_calendario'><b>S</b></td>" +
                "<td class='celda_calendario'><b>D</b></td>" +
            "</tr>";

        for (iIncremento = 1 ; iIncremento < dPasoFecha.getDay() ; iIncremento++)
            sCalendario = sCalendario + "<td class='celda_calendario'>&nbsp;</td>";

        iIncremento--;
    
        for (iCont = 1 ; dPasoFecha.getMonth() == gdFecha.getMonth() ; iCont++){
        
            sEstilos = "";
        
            if ((iCont + iIncremento) % 7 == 1)
                sCalendario = sCalendario + "</tr><tr>";

            if (dPasoFecha.getDate() == gdFecha.getDate())
                sEstilos = sEstilos + "background-color:#ffff00;";

            if ((iCont + iIncremento) % 7 == 0)
                sEstilos = sEstilos + "color:#ff0000;";
    
            if (sEstilos != "")
                sEstilos = " style='" + sEstilos + "' ";

            sCalendario = sCalendario + "<td class='celda_calendario'" + sEstilos + " onclick='pasar_fecha(" + iCont + ");'>" + iCont + "</td>";

            dPasoFecha.setDate(dPasoFecha.getDate() + 1);
        }

        sCalendario = sCalendario + "</tr></table>";
        document.getElementById("contenedor").innerHTML = sCalendario;

    }

    function pasar_fecha(iDia, iMes, iAno){

        if (isNaN(iDia)) iDia = gdFecha.getDate();
        if (isNaN(iMes)) iMes = gdFecha.getMonth();
        if (isNaN(iAno)) iAno = gdFecha.getFullYear();
        
        gdFecha = new Date(iAno, iMes, iDia);

        document.formulario.dia.value = gdFecha.getDate();
        document.formulario.mes.value = gdFecha.getMonth() + 1;
        document.formulario.ano.value = gdFecha.getFullYear();

        cargar_calendario();
    }

//-->
</script>

<style>
    td.celda_calendario{
        text-align:center;
        font-size:36px;
        color:#003399;
        padding:5px;
        background-color:#ffffff;
    }
    input.texto{
        border:1px #000000 solid;
    }
</style>

En el BODY:
<form name="formulario" id="formulario">
    <input type="text" name="dia" id="dia" size="2" class="texto"> /
    <input type="text" name="mes" id="mes" size="2" class="texto"> /
    <input type="text" name="ano" id="ano" size="4" class="texto">
    <input type="button" value="Establecer Fecha" onclick="pasar_fecha(dia.value,(mes.value - 1),ano.value)">
</form>
<div name="contenedor" id="contenedor"></div>

Ejemplo:

Links relacionados:
Manejo de los estilos en JavaScript


Para cualquier duda, consulta, sugerencia, opinión, colaboración, etc; no dude en ponerse en contacto con nosotros

Copyright © 2002-2017 [McAnam]. Reservados todos los derechos.
www.mcanam.com