Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Dawman en 17 Octubre 2013, 19:23 pm



Título: javascript Calendario
Publicado por: Dawman en 17 Octubre 2013, 19:23 pm
Hola a todos,

Estoy realizando un trabajo que consiste en crear un calendario que a través de una lista select te muestra el mes seleccionado.
de momento he logrado hacer que me ejecute el mes en curso correctamente.
falta poner la lista select para escoger el mes... en este punto no tengo problema, no esta hecho porque sigo provando el codigo...

El problema lo tengo con la variable "aux"... que sirve para controlar el primer dia del mes, pero tal como lo tengo, poniedno una lista select me daria siempre el mismo resultado.

me pregunta... alguien sabe como hacer para que seleccionando un mes de una lista te muestre el primer dia del mes??

O simplemente si alguien me sabria decir la manera de calcular el primer dia del mes sea cual sea el mes!
muchas gracias...

PD: los comentarios y variables estan en catalan, espero que no supongan ningun inconveniente

Código
  1. <html>
  2. <head>
  3. <title> Pràctica II </title>
  4. <!--<link rel="stylesheet" href="css.css"></style>!-->
  5. <meta HTTP-EQUIV="CONTENT-TYPE" content="text/html; charset=UTF-8"/>
  6.    </head>      
  7. <body>              
  8. <script>
  9.        Fons       = "#FFCC99";    //color de la cel·la entre setmana      
  10.        FonsCapSet  = "#FEBF7D";    //color de la cel·la caps de setmana
  11.        FonsTitol   = "#003366";    //color de fons títol
  12.        FonsDiesSetmana = "#DB9000";    //color de fons para dies de la setmana
  13.        Today = "#000062";
  14.        Buits ="#C0C0C0";
  15.        colorLinea = "#CAFFFF";    
  16.      // Array per declarar els dies de la setmana...
  17.      var diaSetmana = new Array()            
  18.        diaSetmana[0]="Dilluns"
  19.        diaSetmana[1]="Dimarts"
  20.        diaSetmana[2]="Dimecres"
  21.        diaSetmana[3]="Dijous"
  22.        diaSetmana[4]="Divendres"
  23.        diaSetmana[5]="Dissabte"
  24.        diaSetmana[6]="Diumenge"  
  25.  
  26.      // Array per declarar els mesos del any...
  27.      var Mesos = new Array()
  28.        Mesos[0]  = "GENER";
  29.        Mesos[1]  = "FEBRER";
  30.        Mesos[2]  = "MARÇ";
  31.        Mesos[3]  = "ABRIL";
  32.        Mesos[4]  = "MAIG";
  33.        Mesos[5]  = "JUNY";
  34.        Mesos[6]  = "JULIOL";
  35.        Mesos[7]  = "AGOST";
  36.        Mesos[8]  = "SETEMBRE";
  37.        Mesos[9]  = "OCTUBRE";
  38.        Mesos[10] = "NOVEMBRE";
  39.        Mesos[11] = "DESEMBRE";
  40.      // Array per declarar el nombre de dies de cada mes...
  41.      var DiasMes = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
  42.      var data = new Date();
  43.      avui=data.getDate();
  44.      //document.write("Avui=(getDate) : "+avui+"<br>");
  45.      mes =data.getMonth();    
  46.      //document.write("mes= "+mes+"<br>");
  47.      nomDia=data.getDay()-1;
  48.      //document.write("nomDia= (getDay) : "+nomDia+"<br>");
  49.      any=data.getFullYear();
  50.      //document.write("any= "+any+"<br>");      
  51.      aux=(avui-nomDia+1)%7;
  52.      //document.write("aux= "+aux+"<br>");
  53.      nombreSetmanes=Math.ceil((DiasMes[mes]-aux+1)/7);
  54.      //document.write("Nombre de setmanes="+nombreSetmanes+"<br>");
  55.  
  56.      document.write("<table cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" border=\"1\">");
  57.      document.write("<tr>");
  58.      document.write("<th colspan=\"7\" bgcolor=\""+FonsTitol+"\">"+ Mesos[mes]+" </th></tr>");
  59.      document.write("<tr>");
  60.      for(i=0;i<7;i++)
  61.      {
  62.         document.write("<td bgcolor=\""+FonsDiesSetmana+"\">"+diaSetmana[i]+"</td>");        
  63.      }
  64.      document.write("</tr>");
  65.      // Per generar els dies de la setmana...
  66.      var m=1;
  67.      var k=1;
  68.      while(m<=DiasMes[mes])
  69.      {
  70.        for(i=0;i<nombreSetmanes;i++)
  71.        {
  72.          document.write("<tr>");
  73.  
  74.  
  75.            for(j=0; j<7;j++)
  76.            {
  77.              if (j<aux && i==0)
  78.              document.write("<td bgcolor="+ Buits +"></td>");
  79.  
  80.              else if(j==aux && i==0)          
  81.              {
  82.                document.write("<td bgcolor="+ Fons +">"+m+"</td>");
  83.                m++;
  84.              }
  85.  
  86.              else if (j==5 || j==6)
  87.                {
  88.                 document.write("<td bgcolor="+FonsCapSet+"><font color=#FF0000>"+m+"</font></td>");
  89.                m++;
  90.                }    
  91.              else if (m==avui)
  92.              {
  93.                 document.write("<td bgcolor="+ Today+"><font color=#FFFFFF>"+m+"</font></td>");
  94.                m++;
  95.              }              
  96.              else
  97.              {
  98.                document.write("<td bgcolor="+ Fons +">"+m+"</td>");
  99.                m++;
  100.              }  
  101.              if (m>DiasMes[mes])      
  102.              {
  103.                j++;
  104.                while(j<7)
  105.                {                  
  106.                   document.write("<td bgcolor="+ Buits +">"+k+"</td>");
  107.                   j++;  
  108.                   k++;
  109.                }  
  110.              }
  111.            }
  112.  
  113.          document.write("</tr>");
  114.        }
  115.      }    
  116.  
  117.     //Fí de taula...
  118.      document.write("</table>");
  119.  
  120.      //document.write(diaSetmana[nomDia]);
  121.   </script>
  122.    </body>
  123. </html>
  124.  
  125.  
  126.  


Título: Re: javascript Calendario
Publicado por: Almapa en 17 Octubre 2013, 23:58 pm
A ver, si el calendario es tan solo para este año (tal y como veo en la variable DiasMes), sabiendo que en enero el dia 1 era martes, o sea, diaSetmana[1], podrías utilizar el siguiente código.
Código
  1. var aux=1; //aux es la variable que tiene el índice del día de la semana correspondiente al día 1 del mes.
  2. for(var i=0;i<Númerodelmesacalcular;i++){aux=aux+DiasMes[i];} //Númerodelmesacalcular sería el índice del mes que quieres calcular
  3. aux=aux%7;

En el caso de querer utilizar el calendario para cualquier año ya tendrías que buscar algoritmos más elaborados para el cálculo de cualquier día como el que aparece aquí:

http://www.ehowenespanol.com/calcular-dia-semana-cualquier-ano-como_25602/

Un saludo


Título: Re: javascript Calendario
Publicado por: Dawman en 19 Octubre 2013, 16:12 pm
Muchas gracias Alampa...
al final he visto que con el "setDate(1)" te da automaticamente el primer dia del mes...
gracias de nuevo!