title: Logic behind creating a custom calendar in jquery and javascript
body: <p>I am trying to wrap my head around the logic behind a calendar. At the moment, for testing purpose, I have displayed days with a counter (1-31), but 1 starts in the top left corner of the calendar. My question is, what do I need to do to calculate the current months days and display the month's days accordingly.
  I have included some of my code.</p>
  
  <pre><code>this.RenderCalendar = function () {
  
          var date = new Date();
          date = new Date(date.getYear(), date.getMonth(), 1);
          month = date.getMonth();
  
          var calendarHeader = $("&lt;div class=\"calHeader\"&gt;&lt;/div&gt;");
          var monthLabel = $("&lt;label id=\"calMonth\"&gt;" + FRAMEWORK.GetMonthString(month) + "&lt;/label&gt;");
          var yearLabel = $("&lt;label id=\"calYear\"&gt;" + date.getYear() + "&lt;/label&gt;");
          var nextMonth = $("&lt;a href=\"javascript:void(0);\" id=\"nextMonth\" class=\"newMonth nextMonth\" title=\"Next Month\"&gt;&amp;gt;&amp;gt;&lt;/a&gt;");
          var prevMonth = $("&lt;a href=\"javascript:void(0);\" id=\"prevMonth\" class=\"newMonth previousMonth\" title=\"Previous Month\"&gt;&amp;lt;&amp;lt;&lt;/a&gt;");
  
          nextMonth.click(function () {
              var oldTable = $(".calendarTableContainer table").first();
              var newTable = FRAMEWORK.RenderCalendarTableMarkup(month + 1);
  
              $(".calendarTableContainer").append(newTable);
              $(".calendarTableContainer table").each(function () {
                  $(this).css("width", $(this).width() + "px");
              });
  
              $(".calendarTableContainer").css("width", ($(".calendarTableContainer table").outerWidth() * 2) + 25 + "px");
  
              $(".calendarContainer").animate({
                  scrollLeft: $("div.calendarContainer").scrollLeft() + ($("div.calendarContainer table").next().width())
              }, 500, function () {
                  $(".calendarTableContainer").css("width", "100%");
                  oldTable.remove();
                  $(".calendarTableContainer table").css("width", "100%");
              });
              var currentMonthIndex = $.inArray($("#calMonth").text(), months);
              $("#calMonth").text(months[currentMonthIndex + 1]);
          });
  
          prevMonth.click(function () {
              var oldTable = $(".calendarTableContainer table").first();
              var newTable = FRAMEWORK.RenderCalendarTableMarkup(month - 1);
  
              $(".calendarTableContainer").prepend(newTable);
              $(".calendarTableContainer table").each(function () {
                  $(this).css("width", $(this).width() + "px");
              });
  
              $(".calendarTableContainer").css("width", ($(".calendarTableContainer table").outerWidth() * 2) + 25 + "px");
              $(".calendarContainer").scrollLeft(oldTable.outerWidth());
  
              $(".calendarContainer").animate({
                  scrollLeft: $("div.calendarContainer").scrollLeft() - ($("div.calendarContainer table").next().width())
              }, 500, function () {
                  $(".calendarTableContainer").css("width", "100%");
                  oldTable.remove();
                  $(".calendarTableContainer table").css("width", "100%");
              });
              var currentMonthIndex = $.inArray($("#calMonth").text(), months);
              $("#calMonth").text(months[currentMonthIndex - 1]);
          });
  
          calendarHeader.append(nextMonth);
          calendarHeader.append(prevMonth);
          calendarHeader.append(monthLabel);
          calendarHeader.append(yearLabel);
          $("#detailsContainer").append(calendarHeader);
  
          var calendarContainer = $("&lt;div class=\"calendarContainer\"&gt;&lt;/div&gt;");
          var calendarTableContainer = $("&lt;div class=\"calendarTableContainer\"&gt;&lt;/div&gt;");
          calendarContainer.append(calendarTableContainer);
  
          $("#detailsContainer").append(calendarContainer);
          $(".calendarTableContainer").append(FRAMEWORK.RenderCalendarTableMarkup());
  
          /*var containerHeight = $("#detailsContainer").height();
          calendarContainer.css("height", containerHeight);
          var calendarHeight = calendarContainer.outerHeight();
          var calHeaderHeight = calendarHeader.outerHeight();
          var calDayOfWeekHeight = $("#trCalDayOfWeekHeader").outerHeight();
          var remainingContainerHeight = calendarHeight - calHeaderHeight - calDayOfWeekHeight;
          $(".calendarContainer tr.trCalWeek").each(function () {
          $(this).css("height", remainingContainerHeight / weekCount);
          });*/
      };
  
      this.RenderCalendarTableMarkup = function (newMonth) {
          var calendarTable = $("&lt;table id=\"tabCalendar\" class=\"tabCalendarContainer\" cellpadding=\"0\" cellspacing=\"0\" align=\"center\"&gt;&lt;/table&gt;");
          var calendarDayOfWeekHeader = $("&lt;tr id=\"trCalDayOfWeekHeader\" class=\"trCalDayOfWeek\"&gt;&lt;/tr&gt;");
  
          for (var day = 0; day &lt; days.length; day++) {
              var dayOfWeek = $("&lt;td id=\"tdDayName-" + days[day] + "\"&gt;" + days[day] + "&lt;/td&gt;");
              calendarDayOfWeekHeader.append(dayOfWeek);
          };
          calendarDayOfWeekHeader.find("td").each(function () {
              $(this).css("width", 100 / 7 + "%");
          });
          calendarDayOfWeekHeader.find("td:last").css("border-right", "none");
          calendarTable.append(calendarDayOfWeekHeader);
  
          weekCount = FRAMEWORK.CountWeeksOfMonth(new Date().getDate(), month, new Date().getYear());
          var dayCount = 1;
  
          for (var week = 1; week &lt;= weekCount; week++) {
              var calendarWeek = $("&lt;tr id=\"trWeek-" + week + "\" class=\"trCalWeek\"&gt;&lt;/tr&gt;");
              for (var day = 0; day &lt; 7; day++) {
                  var calendarDay = $("&lt;td id=\"tdDay-" + dayCount + "\"&gt;&lt;label&gt;" + dayCount + "&lt;/label&gt;&lt;/td&gt;");
                  calendarWeek.append(calendarDay);
                  if (dayCount &lt;= 30) {
                      dayCount++;
                  }
                  else { dayCount = 1; }
              };
              calendarWeek.find("td:last").css("border-right", "none");
              calendarTable.append(calendarWeek);
          };
  
          return calendarTable;
      };
  </code></pre>
  
  <p><code>RenderCalendar()</code> gets called on dom ready. Within RenderCalendar, I have next- and previous month buttons which will navigate accordingly with <code>RenderCalendarTableMarkup(),</code> calculate the days and display them accordingly.</p>
  
  <p>Any help please?</p>