<form name= "CLD" class= "Content" > <table width= "100%" border= "0" cellpadding= "0" cellspacing= "0" class= "datet Able "> <thead> <tr> <td colspan=" 7 "> <span> Gregorian </span> <select name= "SY" onchange= "CHANGECLD ()" style= "font-size:9pt" > <script> for (i = 1900; i < 2050; i++) document.write (' <option> ' + i); </script> </select><span> Year </span> < Select Name= "SM" onchange= "CHANGECLD ();" style= "font-size:9pt" > <script> for (i = 1; i < i++) document.write (' <option> ' + i); </script> </select><span> Month </span> </font><span id= "GZ" ></span> ; </td> </tr> </thead> <tbody> <tr style= "background: #eee;" > <TD width= > Day </td> <td width= "54" > A </td> <td width= "Si" > Two </td> <TD width= > three </td> <td width= > Four </td> <td width= "Si" > Five </td> <td width= "Si" > Six </td> </tr> <script> var gnum; for (i = 0; i < 6; i++) {document.write (' <tr align= "center > '); for (j = 0; J < 7; J + +) {gnum = i * 7 + j; document.write (' <td id= ' GD ' + gnum + ' "><font id=" SD ' + gnum + ' "size=2 face=" Arial Black "'); if (j = = 0) document.write (' color= ' red '); if (j = = 6) document.write (' color= ' #000080 "'); document.write (' ></font><br/><font id= ' LD ' + gnum + ' "size=2 style=" font-size:9pt "></font ></td> '); } document.write (' </tr> '); } </script> </tbody> </table> </form>
Css:
* {margin:0; padding:0; List-style:none; Border:none; } body {background: #fff; }. Content {border:3px solid #ddd; width:405px; margin:100px Auto; }. datetable {border-top:1px solid #ccc; border-left:1px solid #ccc; Background: #fff; }. datetable td {BORDER-BOTTOM:1PX solid #ccc; border-right:1px solid #ccc; Text-align:center; }. datetable thead {background: #006600; }. datetable thead td {Padding:10px 5px; Font:normal 12px/normal ' Microsoft Yahei '; Color: #fff; Text-align:center; }. datetable Thead td span {padding:0 5px; }. datetable tbody td {Padding:5px 3px; font-size:12px; }
JS Calendar control code with holidays