Foros del Web » Programando para Internet » Javascript »

Calendario en Javascript

 Estas en el tema de Calendario en Javascript en el foro de Javascript en Foros del Web. Saludos; A traves de una pagina consegui este calendario que estoy utilizando, pero tengo un pequeño problema, cuando es el ultimo dia de mes me ...
  #1 (permalink)  
Antiguo 31/05/2010, 05:16
 
Fecha de Ingreso: diciembre-2007
Ubicación: Ibiza
Mensajes: 37
Antigüedad: 16 años, 3 meses
Puntos: 0
Calendario en Javascript
Saludos;

A traves de una pagina consegui este calendario que estoy utilizando, pero tengo un pequeño problema, cuando es el ultimo dia de mes me marca toda la fila y yo solo quiero que me marque la casilla del dia actual, he estado probando pero no se como hacerlo, si alguien me puede ayudar os lo agradecria un monton!!!

aqui os dejo el codigo entero;

Código Javascript: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <script type="text/javascript">
  5. /**************************************************************
  6. Calendario con selector. Script creado por Tunait! (8/8/2004) Actualizado el 28-Ene.-07
  7. Script de libre uso con la condición de que permanezcan intactas estas líneas, osea, los créditos.
  8. Distribución no autorizada en sitios de script sin previa autorización
  9. Ver condiciones de uso en http://javascript.tunait.com/
  10. [email protected] 
  11. ****************************************************************/
  12.  
  13. var idContenedor = "miCalendario"
  14.  
  15. var hoy = new Date()
  16. var mes = hoy.getMonth()
  17. var dia = 1
  18. var anio = hoy.getFullYear()
  19. var diasSemana = new Array ('L','M','M','J','V','S','D')
  20. var meses = new Array('Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre')
  21.  
  22. var tunIex=navigator.appName=="Mozilla Firefox"?true:false;
  23. if(tunIex && navigator.userAgent.indexOf('Opera')>=0){tunIex = false}
  24. tunOp = navigator.userAgent.indexOf('Opera')>=0 ? true: false;
  25. function tunCalendario(){
  26.     dia2 = dia
  27.     tab = document.createElement('table')
  28.     tab.id = 'calendario'
  29.     document.getElementById(idContenedor).appendChild(tab)
  30.     tcabeza = document.createElement('thead')
  31.     tab.appendChild(tcabeza)
  32.     fi2 = document.createElement('tr')
  33.     fi2b = document.createElement('th')
  34.     fi2b.colSpan = 7
  35.     fi2.id = 'mesCalendario'
  36.     fi2b.appendChild(document.createTextNode(meses[mes] + "  -  " + anio))
  37.     fi2.appendChild(fi2b)
  38.     tcabeza.appendChild(fi2)
  39.     fi = document.createElement('tr')
  40.     tcabeza.appendChild(fi)
  41.     for(m=0;m<7;m++){
  42.         ce = document.createElement('th')
  43.         ce.appendChild(document.createTextNode(diasSemana[m]))
  44.         fi.appendChild(ce)
  45.         if(m == 6){ce.style.marginRight = 0}
  46.         }
  47.         var escribe = false
  48.         var escribe2 = true
  49.     fecha = new Date(anio,mes,dia)
  50.     var d = fecha.getDay()-1 //dia semana
  51.     if(d<0){d = 6}
  52.     tcuerpo = document.createElement('tbody')
  53.     tab.appendChild(tcuerpo)
  54.     while(escribe2){
  55.         fi = document.createElement('tr')
  56.         co = 0
  57.         for(t=0;t<7;t++){
  58.             ce = document.createElement('td')
  59.             if(escribe && escribe2){
  60.             fecha2 = new Date(anio,mes,dia)
  61.             
  62.                 if(fecha2.getMonth() != mes){escribe2 = false;}
  63.                 else{ce.appendChild(document.createTextNode(dia));dia++;co++}
  64.             }
  65.             if(d == t && !escribe){
  66.             ce.appendChild(document.createTextNode(dia))
  67.             dia++;co++
  68.             escribe = true
  69.             }
  70.             fi.appendChild(ce)
  71.             if(hoy.getDate()+1 == dia && mes == hoy.getMonth() && anio == hoy.getFullYear()){ce.className = "Hoy"}
  72.             }
  73.             
  74.         if(co>0){tcuerpo.appendChild(fi)}
  75.         
  76.         }
  77.     dia = dia2
  78. }
  79. function borra(){
  80. document.getElementById(idContenedor).removeChild(document.getElementById('calendario'))
  81. }
  82. function establecerFecha(){
  83. tunFe = new Date()
  84. document.getElementById('tunMes').options[tunFe.getMonth()].selected = true
  85. document.getElementById('tunAnio').value = tunFe.getFullYear()
  86. }
  87. function mostrarContenido(){
  88. document.getElementById('contenido').style.visibility="visible"; 
  89. }
  90. function ocultarContenido(){
  91. document.getElementById('contenido').style.visibility="hidden"; 
  92. }
  93. </script>
  94. <style type="text/css">
  95.  
  96. #calendario{
  97.     font-family: Tahoma, Arial, Helvetica, sans-serif;
  98.     font-size: 12px;
  99.     text-align: center;
  100.     margin-left: auto;
  101.     margin-right: auto;
  102.     border-collapse: collapse;
  103.     border-right: 2px solid #999999;
  104.     border-bottom: 2px solid #999999;
  105. }
  106.  
  107. /*#mesCalendario para configurar aspectos de la caja que muestra el mes y el año*/
  108. #mesCalendario{
  109.     font-weight: bold;
  110.     text-align: center;
  111.     color: #CC6633;
  112.     background-color: #E4CAAF;
  113.  
  114. }
  115. #calendario th, #calendario td{
  116.     border: 1px solid #999999;
  117.     padding: 3px;
  118.     font-size: 110%;
  119. }
  120. #calendario th{
  121.     color: #CC6633;
  122. }
  123. /*.Hoy para configurar aspectos de la caja que muestra el día actual*/
  124. .Hoy{
  125.     color: #990000;
  126.     font-weight: bold;
  127.     cursor:pointer;
  128.     background-repeat: no-repeat;
  129.     background-color: #AEAEFF;*/
  130. }
  131. .capa_borde {
  132.     border: 1px solid #000000;
  133.     position: absolute;
  134. }
  135. #miCalendario{
  136.     position: absolute;
  137.     height: 198px;
  138.     width: 187px;
  139.     border-top-style: none;
  140.     border-right-style: none;
  141.     border-bottom-style: none;
  142.     border-left-style: none;
  143.     left: 27px;
  144.     top: 103px;
  145.     visibility: visible;
  146.     z-index: 2;
  147. }
  148. /*.selectores para configurar aspectos de los campos para el mes y el año*/
  149. .selectores{
  150.     font-family: verdana;
  151.     font-size: 12px;
  152.     color: #990000;
  153.     margin-bottom: 2px;
  154. }
  155.  
  156. #contenido {
  157.     position:absolute;
  158.     left:28px;
  159.     width:232px;
  160.     height:73px;
  161.     z-index:4;
  162.     top: 4px;
  163.     visibility: hidden;
  164. }
  165. #selectores {
  166.     position:absolute;
  167.     left:17px;
  168.     top:81px;
  169.     width:208px;
  170.     height:28px;
  171.     z-index:5;
  172. }
  173. #capa_borde {
  174.     position:absolute;
  175.     left:23px;
  176.     top:67px;
  177.     width:194px;
  178.     height:235px;
  179.     z-index:1;
  180. }
  181. #cerrar {
  182.     position:absolute;
  183.     left:190px;
  184.     top:65px;
  185.     width:41px;
  186.     height:22px;
  187.     z-index:3;
  188. }
  189. </style>
  190. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  191. <title>Documento sin t&iacute;tulo</title>
  192. </head>
  193.  
  194. <body onload="tunCalendario();establecerFecha()" >
  195. <div id="miCalendario" onclick="mostrarContenido()"></div>
  196. <div id="contenido"><div id="cerrar" onClick="ocultarContenido()"><img src="imagenes/gif/cerrar3.gif" alt="cerrar" width="40" height="20" /></div>
  197.   <table width="249" height="73" border="0" cellpadding="0" cellspacing="0">
  198.     <tr>
  199.       <td width="231"><img src="imagenes/gif/boc_calendario.gif" alt="contenido" width="230" height="103" /></td>
  200.     </tr>
  201.   </table>
  202. </div>
  203. <div id="selectores">
  204. <div align="center">
  205.     <select name="select" class="selectores" id="tunMes" onchange="mes=this.selectedIndex;borra();tunCalendario()">
  206.       <option value="0">Enero</option>
  207.       <option value="1">Febrero</option>
  208.       <option value="2">Marzo</option>
  209.       <option value="3">Abril</option>
  210.       <option value="4">Mayo</option>
  211.       <option value="5">Junio</option>
  212.       <option value="6">Julio</option>
  213.       <option value="7">Agosto</option>
  214.       <option value="8">Septiembre</option>
  215.       <option value="9">Octubre</option>
  216.       <option value="10">Noviembre</option>
  217.       <option value="11">Diciembre</option>
  218.     </select>
  219.     
  220.     <select name="select" class="selectores" id="tunAnio" onchange="if(!isNaN(this.value)){anio=this.value;borra();tunCalendario()}">
  221.       <option value="2010">2010</option>
  222.       <option value="2011">2011</option>
  223.       <option value="2012">2012</option>
  224.       <option value="2013">2013</option>
  225.       <option value="2014">2014</option>
  226.       <option value="2015">2015</option>
  227.       <option value="2016">2016</option>
  228.       <option value="2017">2017</option>
  229.       <option value="2018">2018</option>
  230.       <option value="2019">2019</option>
  231.       <option value="2020">2020</option>
  232.     </select>
  233.   </div>
  234. </div>
  235. <div class="capa_borde" id="capa_borde"></div>
  236.  
  237. </body>
  238. </html>

Etiquetas: calendario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 20:30.