Logic behind creating a custom calendar in jquery and javascript
<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>
