/** * * Nombre : MyCalendarJS * Version : 1.1 * Fecha : Martes 6 de Marzo del 2003 * * Autor : Marcelo Lepra * Empresa : IntegraAmerica * email : mlepra@integraamerica.com * web : http://www.integraamerica.com * * * Descripcion : * * Este JavaScript implementa un calendario liviano y facil de implementar * tanto para poner de forma estatico en una web como para poder ser invocado * de forma dinamica por un campo que requiera seleccionar una fecha. * * Modo de uso : * * 1.- La pagina que invoca debe tener definido la variable 'container' asociada * a un tag DIV (ej: '

') * Ej: 'container = document.getElementById('calendar');' * * 2.- En la pagina se debe definir una funcion que llame al metodo 'reDraw()' * para que se dibuje el calendario en el 'container'. Esta funcion puede ser * llamada por cualquier evento que ocurra en la pagina tanto sea hacer click * sobre un campo de seleccion de fecha como o simplemente cuando se carga la * pagina (ej: '') * * 3.- Para que al hacer click sobre una dia en particular se ejecute una funcion * propia (tipo abrir una nueva ventana referente al dia seleccionado o colocar * la fecha seleccionada en un INPUT y ljuego cerrar el calendario) se debe * reasignar la variable 'extClickOnDay' como 'true'. Esto llamara a una funcion * 'clickDay()' definida en la pagina que invoca. * * Anotaciones : * * - Recordar que el valor numerico de 'thisMonth' al igual que el 'thisWeekDay' * comienzan desde 0 por lo que: * thisMonth -- 0=enero 1=febrero... 11=diciembre * thisWeekDay -- 0=domingo 1=lunes... 6=sabado * Teniendo en cuante que el valor numerico de thisMonth para que sea real hay * que sumarle 1 * * Arreglos de la version : * * - Definicion de colores desde la pagina que invoca. * - Definir los font (tipo de letra y tamaño) desde la pagina que invoca. * - Se puede definir los parametros de la tabla: 'border', 'cellspacing' y 'cellpadding' * - Se puede definir el ancho (width) del TD de los dias de la semana (repercute en toda la tabla) * - Si el ultimo dia del mes caia sabado (ultimo dia de la semana) agreba un de mas * - Soportar mas de un calendario por pagina. * * * Proximas versiones : * * - * - Manejar feriados. * - Definir si se puede seleccionar los fines de semana y feriados. * - Poder colocar al Lunes como primer dia de la semana. * - ... * */ // Para los nombres de los meses del año. Estos pueden ser renombrados desde la pagina que invoca. var months = new Array('Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'); // Para los nombres de lis dias de la semana. Estos pueden ser renombrados desde la pagina que invoca. var days = new Array('Domingo','Lunes','Martes','Miercoles','Jueves','Viernes','Sabado'); // Para las abreviaciones de los dias de la semana. Estos pueden ser renombrados desde la pagina que invoca. var lDays = new Array('D','L','M','Mi','J','V','S'); function Calendar (nVarName) { this.varName = nVarName; /***************************************** ** ** ** VARIBLES ** ** ** *****************************************/ // Donde se despliegara el calendario. // ESTE TIENE QUE ESTAR DEFINIDO EN LA PAGINA WEB. // Ej: "container = document.getElementById('calendar');" // donde 'calendar' es una tag div con ese ID. this.container = null; this.iContainer = null; // Si la pagina tiene una funcion especial para un click sobre // un dia especifico se debe definir esta revariable como true // en la pagina web y la funcion se debera llamar "clickDay()". this.extClickOnDay = null; this.htmlCode = ''; // Defino la fecha actual como fecha inicial. this.thisDate = new Date(); // Variables generales para guardar el Dia, Mes, Año y dia de la semana. this.thisDay = this.thisDate.getDate(); this.thisMonth = this.thisDate.getMonth(); this.thisYear = this.thisDate.getFullYear(); this.thisWeekDay = this.thisDate.getDay(); // Calculo la duracion de 1 dia en milisegundos. this.oneDay = (new Date(1970, 01, 02).getTime()) - (new Date(1970, 01, 01).getTime()); // Aqui guardo el dia 1 del mes en que dia de la semana cae. this.firstDay; // Aqui guardo cual es el ultimo dia del mes. this.lastDay; // Esta variable guarda temporalemente el codigo que se insertara en el container. this.htmlCode; // Estas varibles guardan temporalmente el dia de las semana y el del mes. this.tmpWeekDay; this.tmpMonthDay; // ********* Variables generales visuales ********** // Definiciones para la tabla this.tableborder = '1'; this.tablecellspacing= '2'; this.tablecellpadding = '1'; // Definiciones generales de colores // Para los dias y las flechas de cambio de mes this.color1 = '#000000'; this.bgcolor1 = '#EAF2FD'; // Para el mes y año, los dias de la semana y abajo donde se muestra el dia de forma temporal this.color2 = '#FFFFFF'; this.bgcolor2 = '#A6ADBD'; // Para el dia seleccionado this.color3 = '#FFFFFF'; this.bgcolor3 = '#0000FF'; // Tipo de letra general this.fontface = 'Geneva, Arial, Helvetica, sans-serif'; // Tamaño de letra para la primer linea (titulo?) this.fontsize1 = '2'; // Tamaño de letra para el resto del documento this.fontsize2 = '1'; // Ancho de cada TD this.tdWH = '15'; // Si permito cambio de año this.changeYear = false; // class para la tabla this.tableClass = 'myCalendar'; this.isMSIE = (navigator.userAgent.indexOf('MSIE')>=0?true:false); this.pageBgColor = '#FFFFFF'; } /***************************************** ** ** ** FUNCIONES ** ** ** *****************************************/ // Funcion para mostrar popUp function show (ref) { var tmpCal = this; tmpCal.close(); var el = document.createElement("div"); var parent = document.getElementsByTagName("body")[0]; if (typeof parent != "undefined") { parent.appendChild(el); } el.id = this.varName; el.style.position = "absolute"; el.style.zIndex = 500; var p = Calendar.getAbsolutePos(ref); el.style.left = p.x + "px"; el.style.top = p.y + el.offsetHeight + "px"; this.container = el; var iEl = document.createElement("div"); el.appendChild(iEl); iEl.style.position = "relative"; iEl.style.zIndex = 1000; this.iContainer = iEl; tmpCal.reDraw(); tmpCal.drawClose(); if (this.isMSIE) { var IframeObj = document.createElement(''); IframeObj.style.position = 'absolute'; IframeObj.style.top = '0px'; IframeObj.style.left = '0px'; IframeObj.style.width = el.offsetWidth + 'px'; IframeObj.style.height = el.offsetHeight + 'px'; IframeObj.style.zIndex = 100; IframeObj.background = this.pageBgColor; IframeObj.style.backgroundColor= this.pageBgColor; el.appendChild(IframeObj); setTimeout("self.frames['"+this.varName+"IframeObj'].document.documentElement.style.backgroundColor='" + this.pageBgColor + "'",500); } } Calendar.prototype.show = show; Calendar.getAbsolutePos = function(el) { var r = { x: el.offsetLeft, y: el.offsetTop }; if (el.offsetParent) { var tmp = Calendar.getAbsolutePos(el.offsetParent); r.x += tmp.x; r.y += tmp.y; } return r; }; // Funcion para matar popUp function close () { var con = document.getElementById(this.varName); if (con != null) { var el = con.parentNode; el.removeChild(con); var cC = document.getElementById(this.varName + 'Close'); if (cC != null) el.removeChild(cC); } } Calendar.prototype.close = close; // Funcion para cargar la fecha de un campo function loadDate (a) { var v = a.value; if (v.length == 14 || v.length == 8) { this.thisDate = new Date(v.substr(0,4),(v.substr(4,2)-1),v.substr(6,2)); this.thisDay = v.substr(6,2); this.thisMonth = (v.substr(4,2)-1); this.thisYear = v.substr(0,4); this.thisWeekDay = this.thisDate.getDay(); } else if (v.length == 10) { if (v.substr(2,1) == '/') { this.thisDate == new Date(v.substr(6,4),(v.substr(3,2)-1),v.substr(0,2)); this.thisDay = v.substr(0,2); this.thisMonth = (v.substr(3,2)-1); this.thisYear = v.substr(6,4); this.thisWeekDay = this.thisDate.getDay(); } else if (v.substr(4,1) == '/') { this.thisDate == new Date(v.substr(0,4),(v.substr(5,2)-1),v.substr(8,2)); this.thisDay = v.substr(8,2); this.thisMonth = (v.substr(5,2)-1); this.thisYear = v.substr(0,4); this.thisWeekDay = this.thisDate.getDay(); } } } Calendar.prototype.loadDate = loadDate; // Dibuja la cruz para cerrar la ventana function drawClose () { var el = null; var parent = document.getElementsByTagName("body")[0]; if (document.createElementNS) { el = document.createElementNS("http://www.w3.org/1999/xhtml", "div"); } else { el = document.createElement("div"); } if (typeof parent != "undefined") { parent.appendChild(el); } el.id = this.varName + 'Close'; el.style.position = "absolute"; el.style.zIndex = 500; var iEl = document.createElement("div"); el.appendChild(iEl); iEl.style.position = "relative"; iEl.style.zIndex = 1000; el.style.left = (this.container.offsetLeft + this.container.offsetWidth - (this.tablecellspacing*3 ) - (this.tablecellpadding*2) - (this.tableborder*2) - this.tdWH)+ "px"; el.style.top = (this.container.offsetTop - (this.tablecellspacing*2 ) - (+this.tablecellpadding*2) - this.tdWH) + "px"; closeCode = ''; closeCode +=''; closeCode +='

'; closeCode +='X

'; iEl.innerHTML = closeCode; if (this.isMSIE) { var IframeObj = document.createElement(''); IframeObj.style.position = 'absolute'; IframeObj.style.top = '0px'; IframeObj.style.left = '0px'; IframeObj.style.width = el.offsetWidth + 'px'; IframeObj.style.height = el.offsetHeight + 'px'; IframeObj.style.zIndex = 100; IframeObj.background = this.pageBgColor; IframeObj.style.backgroundColor= this.pageBgColor; el.appendChild(IframeObj); setTimeout("self.frames['"+this.varName+"IframeObjClose'].document.documentElement.style.backgroundColor='" + this.pageBgColor + "'",500); } } Calendar.prototype.drawClose = drawClose; // Funcion tanto para crear el calendario como para redibujarlo. function reDraw () { var tmpCal = this; this.firstDay = (new Date(this.thisYear,this.thisMonth,01)).getDay(); this.lastDay = tmpCal.findLastDay(); this.iContainer.innerHTML = tmpCal.drawCalendar(); tmpCal.showDay(99); } Calendar.prototype.reDraw = reDraw; // Funcion que define cual sera el ultimo dia del mes. function findLastDay () { var dDate = new Date(this.thisYear,this.thisMonth,28); while (dDate.getMonth() == ((new Date(dDate.getTime() + this.oneDay)).getMonth())) { dDate.setTime(dDate.getTime() + this.oneDay); } return dDate.getDate(); } Calendar.prototype.findLastDay = findLastDay; // Funcion que se mueve mes adelante y mes atras. function moveMonth (a) { var tmpCal = this; if (a == 'next') { if (this.thisMonth == 11) { this.thisYear += 1; this.thisMonth = 0; this.thisDay = 99; tmpCal.reDraw(); } else { this.thisMonth += 1 this.thisDay = 99; tmpCal.reDraw(); } } if (a == 'back') { if (this.thisMonth == 0) { this.thisYear -= 1; this.thisMonth = 11; this.thisDay = 99; tmpCal.reDraw(); } else { this.thisMonth -=1; this.thisDay = 99; tmpCal.reDraw(); } } } Calendar.prototype.moveMonth = moveMonth; // Funcion que se mueve año adelante y año atras. function moveYear (a,b) { var tmpCal = this; if (a == 'next') { this.thisYear += b; this.thisDay = 99; tmpCal.reDraw(); } if (a == 'back') { this.thisYear -= b; this.thisDay = 99; tmpCal.reDraw(); } } Calendar.prototype.moveYear = moveYear; // Funcion para cuando se hace click sobre un dia especifico. function clickOnDay () { var tmpCal = this; this.thisWeekDay = this.tmpWeekDay; this.thisDay = this.tmpMonthDay; tmpCal.reDraw(); } Calendar.prototype.clickOnDay = clickOnDay; // Funcion para dar la fecha completa (ej: 20030506) function getFullDate (b) { var fullDate = ''; if (b == 'dd/mm/yyyy') { if (this.thisDay < 10) { fullDate += '0'+(this.thisDay); } else { fullDate += ''+this.thisDay; } if (this.thisMonth < 9) { fullDate += '/0'+(this.thisMonth+1); } else { fullDate += '/'+(this.thisMonth+1); } fullDate += '/'+this.thisYear; } else if (b == 'yyyy/mm/dd') { fullDate += this.thisYear; if (this.thisMonth < 9) { fullDate += '/0'+(this.thisMonth+1); } else { fullDate += '/'+(this.thisMonth+1); } if (this.thisDay < 10) { fullDate += '/0'+(this.thisDay); } else { fullDate += '/'+this.thisDay; } } else { fullDate += this.thisYear; if (this.thisMonth < 9) { fullDate += '0'+(this.thisMonth+1); } else { fullDate += ''+(this.thisMonth+1); } if (this.thisDay < 10) { fullDate += '0'+(this.thisDay); } else { fullDate += ''+this.thisDay; } } return fullDate; } Calendar.prototype.getFullDate = getFullDate; // Funcion para mostrar el dia en la barra inferior. function showDay (a,b) { this.tmpWeekDay = b; this.tmpMonthDay = a; var txtDate; if (a != 99) { txtDate = ''+days[b]+' ' +a+' de ' + months[this.thisMonth]+''; } else if (this.thisDay != 99) { txtDate = ''+days[this.thisWeekDay]+' ' +this.thisDay+' de ' + months[this.thisMonth]+''; } else { txtDate = ' '; } var txtInnerDate = document.getElementById(this.varName+'txtDate'); txtInnerDate.innerHTML = txtDate; } Calendar.prototype.showDay = showDay; // Funcoin para dibujar el calendario. function drawCalendar () { var ext = ""; if (this.extClickOnDay != null) { ext = this.extClickOnDay+"("+this.varName+");"; } this.htmlCode = ''; this.htmlCode +=''; if (this.changeYear) { this.htmlCode += ''; this.htmlCode += ''; this.htmlCode += ''; this.htmlCode += ''; this.htmlCode += ''; } this.htmlCode += ''; this.htmlCode += ''; this.htmlCode += ''; this.htmlCode += ''; this.htmlCode += ''; this.htmlCode += ''; this.htmlCode += ''; this.htmlCode += ''; this.htmlCode += ''; this.htmlCode += ''; this.htmlCode += ''; this.htmlCode += ''; var b = false; var contT = 1; while (contT <= this.lastDay) { for (var x = 0;x < 7;x++) { if ((this.firstDay > x) && (b == false)) { this.htmlCode +=''; } else if (this.lastDay < contT) { x = 7; b = false; } else { if (contT == this.thisDay) { this.thisWeekDay = x; this.htmlCode +=''; } else { this.htmlCode +=''; } b = true; contT++; } } if ((b == true) && (this.lastDay >= contT)) { this.htmlCode += ''; } } this.htmlCode += '

'; this.htmlCode += '<	'; this.htmlCode += '<<	'; this.htmlCode += ''+this.thisYear+'			'; this.htmlCode += '>>	'; this.htmlCode += '>
'; this.htmlCode += '<	'; this.htmlCode += ''+months[this.thisMonth]+(!this.changeYear?(' '+this.thisYear):''); this.htmlCode += '					'; this.htmlCode += '>
'; this.htmlCode += ''+lDays[0]+'	'; this.htmlCode += ''+lDays[1]+'	'; this.htmlCode += ''+lDays[2]+'	'; this.htmlCode += ''+lDays[3]+'	'; this.htmlCode += ''+lDays[4]+'	' this.htmlCode += ''+lDays[5]+'	'; this.htmlCode += ''+lDays[6]+'
	'; this.htmlCode +=''; this.htmlCode +=contT+'	'; this.htmlCode +=''; this.htmlCode +=contT+'
'; this.htmlCode +='

'; return this.htmlCode; } Calendar.prototype.drawCalendar = drawCalendar;