Calendario en JavaScript traído del baúl de los recuerdos.

Albert Mata — Fri, 18 Jul 2008 12:08:25 +0000

Ordenando estos días viejos archivos que tenía en discos duros varios, he topado con algunas cosas que había desarrollado hace ya tiempo y que en algunos casos ni recordaba. Una de las que me ha parecido más interesante es este calendario para página web creado con JavaScript que presento hoy. Recuerdo que lo creé para recoger una fecha con la que acotar una consulta. Quería evitar problemas con los formatos de entrada de fechas (día/mes/año, mes/día/año, etc) y además me apetecía crear algo más estético que un simple cuadro de texto. Por eso surgió este calendario. De modo que todo el código es de hace unos cuantos años, cuando era un programador 100% amateur, así que no se aceptan críticas despiadadas sobre su corrección... Ahora simplemente le he echado un vistazo por encima y le he puesto algún comentario y alguna tabulación, nada más.

No tiene mucho misterio explicar cómo funciona, solo hay que crear el calendario en el punto de la página web que se desee con una llamada así:

Y después tener algún cuadro de texto que recoja la fecha que se selecciona en el calendario. Este cuadro lo podemos hacer visible o invisible a nuestro antojo, pero tenemos que tener la precaución de asignarle un identificador igual al parámetro que hemos pasado como argumento a la función drawCalendar:

Con esto el calendario queda ya plenamente operativo. Aquí va un ejemplo:

Y aquí os dejo el código JavaScript completo del archivo calendar.js:

/*-------------------------------------------------------------------
Author: Albert Mata (www.albertmata.net)
Date: 20080718
Description: Old JavaScript calendar I programmed a long time ago.
-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
Attributes.
-------------------------------------------------------------------*/

var monthShown;
var yearShown;
var textboxId;
var firstMonthWeekDay;

/*-------------------------------------------------------------------
Draws calendar giving identifiers to each button.
-------------------------------------------------------------------*/
function drawCalendar(txtId) {
var currentDate;

textboxId = txtId;

    /* Getting current month and year. */
    currentDate = new Date();
    monthShown = currentDate.getMonth();
    yearShown = currentDate.getFullYear();

    /* Opening HTML table. */
    document.write('<table width="126" bgcolor="#FFFFFF"'
                 + 'align="center" cellspacing="0" cellpadding="0"'
                 + 'border="0">');
    document.write('<tr><td width="6"><img src="left.gif"'
                 + 'style="cursor: hand;" onClick="SafeRefill(1);"/>'
                 + '</td><td width="60"><input type="button"'
                 + 'style="width: 60px; background-color: #FFFFFF;'
                 + 'font-size: 10px; text-align: center;'
                 + 'font-family: Arial, Helvetica, sans-serif;'
                 + 'border: 0px;" id="mth"'
                 + 'value="'+monthName(monthShown)+'"/></td>'
                 + '<td width="6"><img src="right.gif"'
                 + 'style="cursor: hand;" onClick="SafeRefill(2);"/>'
                 + '</td><td width="10"></td><td width="6">'
                 + '<img src="left.gif" style="cursor: hand;"'
                 + 'onClick="SafeRefill(3);"/></td>'
                 + '<td width="32"><input type="button"'
                 + 'style="width: 32px; background-color: #FFFFFF;'
                 + 'font-size: 10px; text-align: center;'
                 + 'font-family: Arial, Helvetica, sans-serif;'
                 + 'border: 0px;" id="yea" value="'+yearShown+'"/>'
                 + '</td><td width="6"><img src="right.gif"'
                 + 'style="cursor: hand;" onClick="SafeRefill(4);"/>'
                 + '</td></tr>');
    document.write('<tr><td width="126" colspan="7">');

    /* Adding buttons. */
    for (i = 0; i < 42; i++) {
        document.write('<input type="button" style="width: 18px;'
                     + 'background-color: #FFFFFF; font-size: 10px;'
                     + 'text-align: center;'
                     + 'font-family: Arial, Helvetica, sans-serif;'
                     + 'border: 0px;" id="day' + i + '" value=" "'
                     + 'onMouseOver="Hover('+i+',1);"'
                     + 'onMouseOut="Hover('+i+',0);"'
                     + 'onClick="ShowDate(' + i + ');"/>');
        if (((i+1) % 7) == 0) {
            document.write('<br/>');
        }
    }

    /* Closing HTML table. */
    document.write('</td></tr>');
    document.write('</table>');

Refill();
}

/*-------------------------------------------------------------------
Prevents possible wrong values for month and refills calendar.
-------------------------------------------------------------------*/
function SafeRefill(action) {
    /* Increasing or decreasing month and year. */
    if (action == 1) { monthShown-- }
    if (action == 2) { monthShown++ }
    if (action == 3) { yearShown-- }
    if (action == 4) { yearShown++ }

    /* Moving from January to December. */
    if (monthShown == -1) {
        monthShown = 11;
        yearShown--;
    }

    /* Moving from December to January. */
    if (monthShown == 12) {
        monthShown = 0;
        yearShown++;
    }

    Refill();
}

/*-------------------------------------------------------------------
Redraws calendar when month or year has changed, using identifiers
previously given to all buttons.
-------------------------------------------------------------------*/
function Refill() {
    var firstMonthDay;
    var lastMonthDay;
    var lastMonthWeekDay;

    /* Getting first month day and weekday. */
    firstMonthDay = new Date(yearShown,monthShown,1);
    firstMonthWeekDay = firstMonthDay.getDay();
    if (firstMonthWeekDay == 0) {
        firstMonthWeekDay = 7;
    }

    /* Getting last month day and weekday. */
    lastMonthDay = new Date(yearShown,monthShown,
                            monthDays(monthShown,yearShown));
    lastMonthWeekDay = lastMonthDay.getDay();
    if (lastMonthWeekDay == 0) {
        lastMonthWeekDay = 7;
    }

    /* Clearing all buttons. */
    for (i = 0; i < 42; i++) {
        document.getElementById('day'+i).value = " ";
        document.getElementById('day'+i).style.cursor = 'default';
    }

    /* Giving new values to buttons. */
    for (i = 1; i <= monthDays(monthShown,yearShown); i++) {
        document.getElementById('day'+(i+firstMonthWeekDay-2))
                                              .value = i;
        document.getElementById('day'+(i+firstMonthWeekDay-2))
                                              .style.cursor = 'hand';
    }

    /* Giving new values to month and year buttons. */
    document.getElementById('mth').value = monthName(monthShown);
    document.getElementById('yea').value = yearShown;
}

/*-------------------------------------------------------------------
Function to calculate a month's number of days depending on it's a
leap year or not. It's a leap year when it can be divided by 4, but
it's not when it can be divided by 100 as well. And it's a leap
year again when it can be divided by 100 and by 400.
-------------------------------------------------------------------*/
function monthDays (mm, yyyy) {
var februaryDays;
var daysNumber;

februaryDays = 28;

    /* Deciding number of days for February. */
    if ((yyyy % 4) == 0) {
        if ((yyyy % 100) == 0) {
            if ((yyyy % 400) == 0) {
                februaryDays = 29;
            }
        } else {
            februaryDays = 29;
        }
    }

daysNumber = new Array (31, februaryDays, 31, 30, 31, 30,
31, 31, 30, 31, 30, 31);

/* Returning number of days for selected month and year. */
return daysNumber[mm];
}

/*-------------------------------------------------------------------
Returns month name.
-------------------------------------------------------------------*/
function monthName (mm) {
var monthNames;

   monthNames = new Array('enero','febrero','marzo','abril',
                          'mayo','junio','julio','agosto',
                          'septiembre','octubre','noviembre',
                          'diciembre');

return monthNames[mm];
}

/*-------------------------------------------------------------------
Customizes mouseOver effects.
-------------------------------------------------------------------*/
function Hover(dd,x) {
    if (document.getElementById('day'+dd).value != " ") {
        if (x == 1) {
            document.getElementById('day'+dd).style.background =
                                                       '#CCCCFF'
        } else {
            document.getElementById('day'+dd).style.background =
                                                       '#FFFFFF'
        }
    }
}

/*-------------------------------------------------------------------
Returns selected data to textbox.
-------------------------------------------------------------------*/
function ShowDate(dd) {
var selDay;
var selMonth;

    /* Formatting day. */
    if ((dd - firstMonthWeekDay + 2) < 10) {
        selDay = '0' + (dd - firstMonthWeekDay + 2);
    } else {
        selDay = (dd - firstMonthWeekDay + 2);
    }

    /* Formatting month. */
    if ((1+monthShown) < 10) {
        selMonth = '0' + (1 + monthShown);
    } else {
        selMonth = (1 + monthShown);
    }

    /* Returning date to textbox. */
    if (document.getElementById('day'+dd).value != ' ' ) {
        /* Customize this line to change output format!!! */
        document.getElementById(textboxId).value = selDay + '/'
                                                 + selMonth + '/'
                                                 + yearShown;
    }
}

Para que funcione bonito es preciso que en el mismo directorio donde esté ubicado el archivo calendar.js se encuentren también las imágenes left.gif y right.gif que se pueden descargar desde esta misma página haciendo click derecho en las propias imágenes (los triangulitos azules que aparecen en el calendario para desplazarse entre meses y/o años).

Por último, ni que decir tiene que este calendario es muy mejorable y ampliable en funciones... ¡pero no seré yo quien lo haga! Simplemente lo dejo aquí por si a alguien puede servirle o puede aportarle alguna idea.

El Blog de Albert Mata » JavaScript

Calendario en JavaScript traído del baúl de los recuerdos.