FAQ 139.- Calendario

[ilydiego]

Hola buenas tardes tengo una duda con el calendario mostrado en la pregunta 139

por que no muestra los dias de la semana sincronizados con los numero

Con las modificaciones que yo le hice queda asi



Como se le puede hacer que hay que modificarle para que se sincronice
Mis codigos son estos
calendario.html

Código HTML:

<script language="JavaScript"> 

   var dFec = new Date(); 
   var aMonthNames = new Array( 
                          "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", 
                          "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre");
   function firstOfMonth(dFec){ 
    var dRes = new Date(); 
    dRes.setYear(dFec.getYear()); 
    dRes.setMonth(dFec.getMonth()); 
    dRes.setDate(1); 
    return dRes; 
   } 
   function lastDayOfMonth(dFec){ 
    var dRes = new Date(); 
    var nYear = dFec.getYear(); 
    var nMonth = dFec.getMonth() + 1; 
    if (nMonth == 12){ 
     nMonth = 0; 
     nYear++; 
    } 
    dRes.setYear(nYear); 
    dRes.setMonth(nMonth); 
    dRes.setDate(1); 
    return new Date(dRes.valueOf() - (24 * 60 * 60 * 1000)); 
   } 

   function dayToWrite(nDay){ 
    var dToday = new Date(); 
    var bisThisMonth = ((dFec.getYear() == dToday.getYear()) && (dFec.getMonth() == dToday.getMonth())); 
    var sDay = String(nDay); 
    sDay = (nDay == dFec.getDate() && bisThisMonth? "<b><font color='red'>" + sDay + "</font></b>": sDay); 
    return sDay; 
   } 

   function selectDay(nDay){ 
    var sRes, sDay, sMon, sYea; 
    sDay = "0" + String(nDay); 
    sDay = sDay.substr(sDay.length - 2, 2); 
    sMon = "0" + String(dFec.getMonth() + 1); 
    sMon = sMon.substr(sMon.length - 2, 2); 
    sYea = String(dFec.getFullYear()); 
    sRes = sDay + "/" + sMon + "/" + sYea; 
    opener.document.forms[0].dateResult.value = sRes; 
    opener.fillDateField(); 
    close(); 
   } 

   function showCalenContents(){ 
    var dFec0 = firstOfMonth(dFec); 
    var nDay = 1; 
    var nLastDay = lastDayOfMonth(dFec).getDate(); 
    var sWeek = "";
    var bEnd = false;
    var bWri = false;
    var nDOW0 = dFec0.getDay();
    for (var j = 0; !bEnd; j++){
     sWeek = "<tr>";
     for (var i = 0; (i < 7) && !bEnd; i++){
      bWri = bWri || (i == nDOW0);
      if (bWri)
       sWeek += "<td align='right' style='cursor: hand' onclick='parent.selectDay(" + String(nDay) + ")'>" + dayToWrite(nDay, bWri) + "</td>";
      else
       sWeek += "<td>&nbsp;</td>";
      if (bWri) nDay++;
      bEnd = (nDay > nLastDay);
     }
     if (bEnd)
      for (var k = i; k < 7; k++)
       sWeek = sWeek + "<td>&nbsp;&nbsp;</td>";
     window.usefull.document.writeln(sWeek + "</tr>");
    }
   }

   function backMonth(){
    var nMonth = dFec.getMonth();
    var nYear = dFec.getFullYear();
    if (--nMonth == -1){
     nMonth = 11;
     nYear--;
    }
    dFec.setMonth(nMonth);
    dFec.setYear(nYear);
    calendary();
   }

   function forthMonth(){
    var nMonth = dFec.getMonth();
    var nYear = dFec.getFullYear();
    if (++nMonth == 12){
     nMonth = 0;
     nYear++;
    }
    dFec.setMonth(nMonth);
    dFec.setYear(nYear);
    calendary();
   }

   function backYear(){
    var nYear = dFec.getFullYear();
    dFec.setYear(--nYear);
    calendary();
   }

   function forthYear(){
    var nYear = dFec.getFullYear();
    dFec.setYear(++nYear);
    calendary();
   }

   function showCalen(){ 
    with (window.usefull.document){ 
     write("<table border='0' width='100%' height='100%'><tr><td><table border='0' width='100%'><tr>"); 
     write("<td width='10'><input type='button' name='bckYear' value='<<' onclick='parent.backYear()'></td>"); 
     write("<td width='10'><input type='button' name='bckMonth' value='<' onclick='parent.backMonth()'></td>"); 
     write("<td align='center'><b>" + aMonthNames[dFec.getMonth()].substr(0, 3) + ", " + String(dFec.getFullYear()) + "</b></td>"); 
     write("<td width='10'><input type='button' name='ForMonth' value='>' onclick='parent.forthMonth()'></td>"); 
     write("<td width='10'><input type='button' name='ForYear' value='>>' onclick='parent.forthYear()'></td>"); 
     write("</tr></table></tr><tr><td>"); 
     write("<center><table border='1'>"); 
     write("<tr><td><b>L</b></td><td><b>M</b></td><td><b>M</b></td><td><b>J</b></td><td><b>V</b></td><td><b>S</b></td><td><b>D</b></td></tr>"); 
     showCalenContents(); 
     write("</table></center></td></tr></table>");
    } 
   } 

   function calendary(){ 
    with (window.usefull.document){ 
     open(); 
     writeln("<html><head></head><body>"); 
     writeln("<form name='frm'>"); 
     showCalen(); 
     writeln("</form></body></html>"); 
     close(); 
    } 
   } 

  </script> 
  <html>
 <head> 
 <frameset rows="100%,*" border="0" frameborder="no" framespacing="0" onLoad="calendary()"> 
  <frame name="usefull" src="DummyPg.html" frameborder="no" marginheight="0" marginwidth="0" scrolling="no"> 
  <frame name="useless" src="DummyPg.html" frameborder="no" marginheight="0" marginwidth="0" scrolling="no"> 
 </frameset><noframes></noframes> 
 </head>
</html> 

DummyPg.html

Código HTML:

<html> 
 <head> 
 </head> 
 <body> 
 </body> 
</html> 

y aqui es donde lo mandamos llamar

Código HTML:

<html>
<head>
<title>Reporte de Ventas Diarias - Ventas</title>
</head>
<body bgcolor="#9FECFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<script language="JavaScript"> 
   var nInput; 
   function calen(n){ 
    var oWnd; 
    nInput = n; 
    oWnd = open("calendario.html", "fechas", "location=no,menubar=no,resizable=no,scrollbars=no,status=no,toolbar=no,width=180,height=200"); 
    oWnd.focus(); 
   } 
   function fillDateField(){ 
    with (document.frm) 
     if (nInput == 1) {
      fecha1.value = dateResult.value;
	  fee1.value = fecha1.value}
	  else{
	  fecha2.value = dateResult.value;}
	  }  
   </script>
<center>
<br><br><br>
<font color="#C6B043" size="+3">
Reporte de Ventas Diarias
</font>

<br><br><br>
<form name="frm" method="get" action="vent_rvdv.php">
<font color="#C6B043" size="+1">Fecha*:</font>
<input name="fecha1" type="text" id="fecha1" size="11" maxlength="11" disabled="true" /> 
     <input type="button" value="..." onClick="calen(1)"><input type="hidden" name="dateResult"><input type="hidden" name="fee1">

<INPUT type="submit" name="ok" value="Buscar"><br><br>
<br>
</form>
<br></center>
</body>
</html>