在jquery和javascript中创建自定义日历背后的逻辑

我正试图了解日历背后的逻辑。目前，出于测试目的，我用计数器（1-31）显示了天数，但1从日历的左上角开始。我的问题是，我需要做什么来计算当前月份的天数并相应地显示该月份的天数。我已经包含了一些代码。

this.RenderCalendar = function () {
        var date = new Date();
        date = new Date(date.getYear(), date.getMonth(), 1);
        month = date.getMonth();
        var calendarHeader = $("<div class='"calHeader'"></div>");
        var monthLabel = $("<label id='"calMonth'">" + FRAMEWORK.GetMonthString(month) + "</label>");
        var yearLabel = $("<label id='"calYear'">" + date.getYear() + "</label>");
        var nextMonth = $("<a href='"javascript:void(0);'" id='"nextMonth'" class='"newMonth nextMonth'" title='"Next Month'">&gt;&gt;</a>");
        var prevMonth = $("<a href='"javascript:void(0);'" id='"prevMonth'" class='"newMonth previousMonth'" title='"Previous Month'">&lt;&lt;</a>");
        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 = $("<div class='"calendarContainer'"></div>");
        var calendarTableContainer = $("<div class='"calendarTableContainer'"></div>");
        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 = $("<table id='"tabCalendar'" class='"tabCalendarContainer'" cellpadding='"0'" cellspacing='"0'" align='"center'"></table>");
        var calendarDayOfWeekHeader = $("<tr id='"trCalDayOfWeekHeader'" class='"trCalDayOfWeek'"></tr>");
        for (var day = 0; day < days.length; day++) {
            var dayOfWeek = $("<td id='"tdDayName-" + days[day] + "'">" + days[day] + "</td>");
            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 <= weekCount; week++) {
            var calendarWeek = $("<tr id='"trWeek-" + week + "'" class='"trCalWeek'"></tr>");
            for (var day = 0; day < 7; day++) {
                var calendarDay = $("<td id='"tdDay-" + dayCount + "'"><label>" + dayCount + "</label></td>");
                calendarWeek.append(calendarDay);
                if (dayCount <= 30) {
                    dayCount++;
                }
                else { dayCount = 1; }
            };
            calendarWeek.find("td:last").css("border-right", "none");
            calendarTable.append(calendarWeek);
        };
        return calendarTable;
    };

在dom上调用RenderCalendar()。在RenderCalendar中，我有下个月和上个月按钮，它们将使用RenderCalendarTableMarkup(),进行相应的导航，计算天数并相应地显示。

请帮忙吗？