Automatic Calendar php html

Question

Take a look at this calendar I made:

http://jsfiddle.net/S93CM/

I made it manually day by day, there is a way to make it automatic for every month and actualize the current day?

example code:

<h1>June</h1>
  <table>
      <tr>
          <td class="availableDay">1</td>
          <td class="availableDay">2</td>
          <td class="availableDay">3</td>
          <td class="availableDay">4</td>
          <td class="availableDay">5</td>
          <td class="availableDay">6</td>
          <td class="availableDay">7</td>
       </tr>
 </table>

 #calendar{ width:225px; margin:0 auto; margin-top:-20px; margin-bottom:2%; border-radius:5px; font-family: "Code Light"; text-align:center; color:#000000; margin-left: 10%; } #calendar h1{ background:#0068BD; border-radius:5px 5px 0 0; padding:20px; font-size:140%; font-weight:300; text-transform:uppercase; letter-spacing:1px; color:#fff; cursor:default; } #calendar table{ border-top:1px solid #ddd; border-left:1px solid #ddd; border-spacing:0; border-radius:0 0 5px 5px; } #calendar td{ width:38px; height:38px; background:#eee; border-right:1px solid #ddd; border-bottom:1px solid #ddd; padding:6px; cursor:pointer; transition:background .3s; -webkit-transition:background .3s; } #calendar td:hover:not(.current){ background:#ddd; } #calendar .lastmonth,#calendar .nextmonth,#calendar .nextmonth ~ *{ background:#fff; color:#999; } #calendar .currentA{ background:#CCCCCC; font-weight:700; color:#0077B9; } #calendar .currentO{ background:#CCCCCC; font-weight:700; color:#900002; } #calendar .hastask{ font-weight:700; color: #FF0000; } #calendar .availableDay{ color: #0077B9; } #calendar .occupiedDay{ background: #ED4337; color: #ffffff; } #calendar tr:last-of-type td:first-of-type{border-radius:0 0 0 5px;} #calendar tr:last-of-type td:last-of-type{border-radius:0 0 5px 0;} 

 <div id="calendar"> <h1>June</h1> <table> <tr> <td class="availableDay">1</td> <td class="availableDay">2</td> <td class="availableDay">3</td> <td class="availableDay">4</td> <td class="availableDay">5</td> <td class="availableDay">6</td> <td class="availableDay">7</td> </tr> <tr> <td class="availableDay">8</td> <td class="availableDay">9</td> <td class="currentA">10</td> <td class="availableDay">11</td> <td class="availableDay">12</td> <td class="availableDay">13</td> <td class="availableDay">14</td> </tr> <tr> <td class="availableDay">15</td> <td class="availableDay">16</td> <td class="availableDay">17</td> <td class="availableDay">18</td> <td class="availableDay">19</td> <td class="availableDay">20</td> <td class="availableDay">21</td> </tr> <tr> <td class="availableDay">22</td> <td class="availableDay">23</td> <td class="availableDay">24</td> <td class="availableDay">25</td> <td class="availableDay">26</td> <td class="availableDay">27</td> <td class="availableDay">28</td> </tr> <tr> <td class="availableDay">29</td> <td class="availableDay">30</td> <td class="nextmonth">1</td> <td class="nextmonth">2</td> <td class="nextmonth">3</td> <td class="nextmonth">4</td> <td class="nextmonth">5</td> </tr> </table> </div> 

Answer 1

Using plain JS:

Live Demo

var months = "January,February,March,April,May,June,July,August,September,October,November,December".split(",");
window.onload=function() {
    var d = new Date();
    document.getElementById("calendar").getElementsByTagName("h1")[0].innerHTML=months[d.getMonth()];
    document.getElementsByTagName("td")[d.getDate()-1].className="currentA";
}

If you want to show a disabled 29/30/31st in a perpetual calendar try

var testDate = new Date(d.getFullYear(),d.getMonth()+1,0);
for (var i=30;i>=testDate.getDate();i--) { 
  document.getElementsByTagName("td")[i].className="disabled";
}

Live Demo