0

カレンダーの背後にあるロジックに頭を悩ませようとしています。現時点では、テスト目的で、カウンター（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;
    };

RenderCalendar()domの準備ができて呼び出されます。RenderCalendar内には、翌月と前月のボタンがあり、それに応じRenderCalendarTableMarkup(),て日数を計算して表示します。

何か助けてください？

4

1 に答える 1

4

とにかく、なぜこのすべてを自分で計算するのですか。http://momentjs.com/をチェックしてください

于 2012-08-27T13:49:19.837 に答える