SprintDevelop.com - Diseño y desarrollo web - Diseño, desarrollo web,Aplicaciones Móviles, TabletasSprintDevelop.com - Diseño y desarrollo web
Mostrando Codigo - Dhtml
Code

Dhtml - Calendario anual y mensual

Códigos Dhtml

Fantastico calendario, el cual muestra de forma anual o mensual pudiendo ser modificado el año con lo que conseguimos un calendario casi perpetuo.
Visitas: 26,547 - 24/06/2005 2:33:12
DemoNO CONTIENE ARCHIVO DESCARGABLEComentario
CODIGO
Este codigo aun no ha sido probado por Tutores.org en ChromeEste codigo aun no ha sido probado por Tutores.org en FirefoxCodigo probado en Internet Explorer 7+Este codigo aun no ha sido probado por Tutores.org en OperaEste codigo aun no ha sido probado por Tutores.org en Safari


<!-- Codigo ofrecido por Tutores.org -->

  1. <html>
  2. <head>
  3. <title>Calendario en Javascript</title>
  4.   <script langage="JavaScript">
  5. date=new Date();
  6. annee=date.getFullYear();
  7. mois=date.getMonth();
  8. los_meses=["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"];
  9. los_meses2=["J","F","M","A","M","J","J","A","S","O","N","D"];
  10. los_dias=["D","L","M","M","J","V","S","D"];
  11. function Mois()
  12. {
  13.  for(i=0;i<7;i++)
  14.    {
  15.        calendrier+="<td width='"+100/7+"%'>"+los_dias[i+1]+"</td>";
  16.     }
  17.      calendrier+="</tr>";
  18.     afficher.setYear(document.Calendrier.Annee.value);
  19.     afficher.setMonth(document.Calendrier.Mois.value);
  20.     afficher.setDate(31);
  21.     if(afficher.getDate()!=31)afficher.setDate(31-afficher.getDate());
  22.     afficher.setMonth(document.Calendrier.Mois.value);
  23.     nbjours=afficher.getDate();
  24.     nbsem=Sem(document.Calendrier.Annee.value,document.Calendrier.Mois.value,nbjours);
  25.     nbsem=Sem(document.Calendrier.Annee.value,document.Calendrier.Mois.value,nbjours);
  26.     nbsem-=Sem(document.Calendrier.Annee.value,document.Calendrier.Mois.value,1)-1;
  27.     boutmois=new Date(document.Calendrier.Annee.value,document.Calendrier.Mois.value,nbjours);
  28.     if(boutmois.getDay()==0)
  29.     {
  30.          nbsem--;
  31.     }
  32.     boutmois=new Date(document.Calendrier.Annee.value,document.Calendrier.Mois.value,1);
  33.     if(boutmois.getDay()==0)
  34.     {
  35.          nbsem++;
  36.     }
  37.     h=1;
  38.     for(i=0;i<nbsem;i++)
  39.    {
  40.        calendrier+="<tr align='center'>";
  41.         for(j=1;j<=7;j++,h++)
  42.        {
  43.            afficher.setDate(h);
  44.            if((afficher.getDay()==j||(afficher.getDay()==0&&j==7))&&afficher.getMonth()==document.Calendrier.Mois.value)
  45.            {
  46.                Sem(document.Calendrier.Annee.value,document.Calendrier.Mois.value,h-1)
  47.                Sem(document.Calendrier.Annee.value,document.Calendrier.Mois.value,h-1)
  48.                calendrier+="<td title='Semaine N°"+Sem(document.Calendrier.Annee.value,document.Calendrier.Mois.value,h-1)+"'>";
  49.                 calendrier+=afficher.getDate();
  50.             }
  51.             else
  52.             {
  53.                 calendrier+="<td>&nbsp";
  54.                 h--;
  55.             }
  56.             calendrier+="</td>";
  57.         }
  58.         calendrier+="</tr>";
  59.     }
  60.     calendrier+="</table>";
  61.     document.getElementById("Cal").innerHTML=calendrier;
  62.     document.getElementById("SelMois").style.visibility="visible";
  63. }
  64.  
  65. function Annee()
  66. {
  67.     calendrier+="<td width='"+100/13+"%'>&nbsp</td>";
  68.     for(i=0;i<12;i++)
  69.    {
  70.        calendrier+="<td width='"+100/13+"%'>"+los_meses2[i]+"</td>";
  71.     }
  72.     calendrier+="</tr>";
  73.     afficher.setYear(document.Calendrier.Annee.value);
  74.     for(i=0;i<31;i++)
  75.    {
  76.        afficher.setDate(i+1);
  77.        calendrier+="<tr align='center'>";
  78.          calendrier+="<td bgcolor='#00FFFF'>"+(i+1)+"</td>";
  79.          for(j=0;j<12;j++)
  80.         {
  81.            afficher.setMonth(j);
  82.            switch((i%2)+(j%2))
  83.            {
  84.                    case 2:calendrier+="<td bgcolor='#C0C0C0'";break;
  85.                    case 1:calendrier+="<td bgcolor='#E0E0E0'";break;
  86.                    case 0:default:calendrier+="<td";
  87.            }
  88.            if(afficher.getDate()!=i+1)
  89.            {
  90.                 calendrier+=">&nbsp";
  91.                 afficher.setDate(i+1);
  92.              }
  93.             else
  94.             {
  95.                 calendrier+=" title='Semaine N°"+Sem(document.Calendrier.Annee.value,j,i)+"'>";
  96.                 calendrier+=los_dias[afficher.getDay()];
  97.             }
  98.             calendrier+="</td>";
  99.          }
  100.         calendrier+="</tr>";
  101.     }
  102.     calendrier+="</table>";
  103.     document.getElementById("Cal").innerHTML=calendrier;
  104.     document.getElementById("SelMois").style.visibility="hidden";
  105. }
  106. function Mode()
  107. {
  108.      mode=document.Calendrier.Modes.value;
  109.      calendrier="<table style='font-size:9' width='100%' border='1'>";
  110.     calendrier+="<tr align='center' bgcolor='#00FFFF'>";
  111.     afficher=new Date();
  112.     if(mode==1){Mois();}
  113.     else{Annee();}          
  114. }
  115. function Sem(A,M,J)
  116. {
  117.      date.setYear(A);
  118.      date.setMonth(M);
  119.      date.setDate(J);
  120.      date2=new Date(A,0,1);
  121.     x=1;
  122.     do
  123.     {
  124.         date2.setDate(x);
  125.         x++;
  126.     }
  127.     while(date2.getDay()!=1);
  128.     temps=date.getTime()-date2.getTime()+24*60*60*1000;
  129.     sem=temps/(1000*60*60*24*7);
  130.     return Math.ceil(sem);
  131. }
  132. </script>
  133. </head>
  134.   <body onload="javascript:window.status='C A L E N D A R I O';Mode()" onselectstart="return false" oncontextmenu="return false" style="cursor:default">
  135. <div align="right" ID=tableau>
  136.  <form name="Calendrier">
  137.   <table style='font-size:9'>
  138.    <tr align="center">
  139.     <td>
  140.      <select name="Modes" tabindex="0" onchange="Mode()">
  141.       <option value="0">Anual</option>
  142.       <option selected value="1">Mensual</option>
  143.      </select>
  144.     </td>
  145.     <td>
  146.      <div id=SelMois>
  147.       <select name="Mois" tabindex="1" onchange="Mode()">
  148.        <script langage="JavaScript">
  149.     for(i=0;i<12;i++)
  150.    {
  151.        document.write("<option ");
  152.        if(i==mois)document.write("selected ");
  153.        document.write("value='"+i+"'>"+los_meses[i]+"</option>");
  154.     }
  155.        </script>
  156.       </select>
  157.      </div>
  158.     </td>
  159.     <td>
  160.      <select name="Annee" tabindex="2" onchange="Mode()">
  161.       <script langage="JavaScript">
  162.     for(i=(annee-50);i<(annee+51);i++)
  163.    {
  164.        document.write("<option ");
  165.        if(i==annee)document.write("selected ");
  166.        document.write("value='"+i+"'>"+i+"</option>");
  167.     }
  168.       </script>
  169.      </select>
  170.     </td>
  171.    </tr>
  172.    <tr align="center">
  173.     <td colspan="3">
  174.      <div align="center" ID=Cal>
  175.      </div>
  176.     </td>
  177.    </tr>
  178.   </table>
  179.  </form>
  180. </div>
  181. </body>
  182. </html>



ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo
<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Calendario anual y mensual" href="http://www.tutores.org/codigo/1476/" target="_blank">Calendario anual y mensual</a>
<!-- Final enlace Tutores.org -->
COMENTARIOS
Comentario usuario
17-10-2007 12:59:08
5 5
¿Por que no se pueden ver todos los meses? por ejemplo septiembre sale en blanco igual que febrero o_o
Comentario usuario
14-07-2009 17:04:34
4 5
Excelente aporte, me gustaria saber como hago para que el calendario funciones en tiempo real indicandome en que dia estamos
Comentario usuario
Sikiu Ruiz
2 5
Hola... cómo inserto este código en una página web diseñada con Dreamweaver?
Comentario usuario
Rosete
4 5
Hola! Me parece increíble la aplicación de este calendario, existiría la posibilidad de que solo me mostrara el calendario mensual con los botones de mes y año? Que NO apareciera el calendario anual?

Me podría ayudar u orientar? Se lo agradecería mucho...

Mi correo es: eatran@hotmail.com

Estoy para servirle, att. Eduardo Torres
INSERTAR COMENTARIO

Usuario:
Email:
Comentario:
Codigo Seguridad

Antes de enviar un comentario...
Todos los comentarios son revisados personalmente
Todo comentario que no haga relacion al codigo mostrado en esta pagina sera eliminado
Usuarios registrados tienen preferencia en recibir respuestas de ayuda!!
Ademas de poder insertar Imagenes,Enlaces y otras propiedades del editor.
Por favor, insertar los comentarios descriptivos.