title: Datepicker like jQuery calendar without weekends
body: <p>This is my first question here on StackOverflow, so I'll try to give an extra effort to ask the question "the right way".</p>
  
  <p>I'm trying to create an HTML calendar dynamically with jQuery. Basically, I want my calendar to look like this but without the weekends: <a href="http://postimage.org/image/4xryen3ej/" rel="nofollow">http://postimage.org/image/4xryen3ej/</a>.</p>
  
  <p>The calendar dates are created in a tbody element:</p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th class="weekday"&gt;Mo&lt;/th&gt;
              &lt;th class="weekday"&gt;Tu&lt;/th&gt;
              &lt;th class="weekday"&gt;We&lt;/th&gt;
              &lt;th class="weekday"&gt;Th&lt;/th&gt;
              &lt;th class="weekday"&gt;Fr&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody id="dates"&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Here is the jQuery code:</p>
  
  <pre><code>var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
  
  var now       = new Date;
  var year      = now.getFullYear();
  var month     = now.getMonth();
  var thisMonth = now.getMonth();
  var monthStart;
  var monthLength;
  var addDays;
  var dayOfWeek;
  var today;
  
  printDate();
  createCalendar();
  
  function printDate()
  {
      monthStart   = new Date(year, month, 1);
      var monthEnd = new Date(year, month + 1);
      monthLength  = Math.round((monthEnd - monthStart) / (1000 * 60 * 60 * 24));
  
      $("#dateToday").text(months[month] + " " + year + " " + monthLength);
  }
  
  function createCalendar()
  {
      addDays   = now.getDate();
      dayOfWeek = now.getDay();
      today     = now.getDate();
  
      $("#dates").append("&lt;tr&gt;");
  
      for (var i = 0; addDays &lt; monthLength + 1; i++)
      {
          if (i &lt; dayOfWeek)
          {
              $("#dates").append("&lt;td style=\"border: 1px solid; height: 80px\"&gt;" +
                                 "&lt;div style=\"background-color: #EEEEEE; height: 18px; text-align: right\"&gt;&lt;/div&gt;" +
                                 "&lt;div style=\"height: 62px\"&gt;&lt;/div&gt;" +
                                 "&lt;/td&gt;");
          }
          else
          {
              if ((addDays == today) &amp;&amp; (now.getMonth() == month))
              {
                  $("#dates").append("&lt;td style=\"border: 1px solid; height: 80px\"&gt;" +
                                     "&lt;div style=\"background-color: #EEEEEE; height: 18px; text-align: right\"&gt;&lt;b&gt;" + addDays + "&lt;/b&gt;&lt;/div&gt;" +
                                     "&lt;div style=\"height: 62px\"&gt;&lt;/div&gt;" +
                                     "&lt;/td&gt;");
  
                  addDays = addDays + 1;
              }
              else
              {
                  if (i % 5 == 0)
                  {
                      addDays = addDays + 2;
  
                      $("#dates").append("&lt;/tr&gt;" +
                                         "&lt;tr&gt;");
                  }
  
                  $("#dates").append("&lt;td style=\"border: 1px solid; height: 80px\"&gt;" +
                                     "&lt;div style=\"background-color: #EEEEEE; height: 18px; text-align: right\"&gt;" + addDays + "&lt;/div&gt;" +
                                     "&lt;div style=\"height: 62px\"&gt;&lt;/div&gt;" +
                                     "&lt;/td&gt;");
  
                  addDays = addDays + 1;
              }
          }
      }
  }
  </code></pre>
  
  <p>I know there are many examples around the net regarding this kind of problem but I still haven't been able to solve the problem, and therefore, I had to post here.</p>