我正试图围绕日历背后的逻辑。目前,出于测试目的,我用计数器(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\">>></a>");
var prevMonth = $("<a href=\"javascript:void(0);\" id=\"prevMonth\" class=\"newMonth previousMonth\" title=\"Previous Month\"><<</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(),
计算天数并相应地显示它们。
请问有什么帮助吗?