我正在尝试用html和jquery / javascript制作日历。在这个日历中，我试图在给定类的一行div中动态显示日期，浮动在另一个div中。
HTML如下：
<div id="view-month">
<div class="day"> </div>
......an array of 42 elements for a 7 x 6 grid for viewing a month
<div class="day"> </div>
<div class="day"> </div>
</div>
我正在尝试的jquery如下：
$(document).ready( function() {
var date = new Date(); // Gets the current date in a variable
var selected_date = date.getDate(); // gets the current date (only dd)
var month_no = date.getMonth(); // Gets the month as number - like January : 0, February : 1, March : 2
var year = date.getFullYear(); // Gets the year in 'yyyy' format
var month_string; // variable for holding the no. of days in the selected month
var no_of_days_in_month; // variable for holding the total no. of days in the selected month for the selected year
// ******** The following array holds the names of all the months for showing the chose month ********* //
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
$('#month-and-year').html(months[month_no] + ', ' + year); // shows the month in the heading of the calendar on month-name, 'yyyy' format
// ******** code for showing dates of the selected month and year showing in the header ********//
//function monthDetail(month_string) { }
if (month_string == 'January') {
var no_of_days_in_month = 31;
month_no = 0;
}
if (month_string == 'February') {
var isleapyear = function(year) {
return (yr % 400) ? ((yr % 100) ? ((yr % 4) ? false : true) : false) : true;
}
if (isleapyear) {
var no_of_days_in_month = 29;
}
else {
var no_of_days_in_month = 28;
}
month_no = 1;
}
if (month_string == 'March') {
var no_of_days_in_month = 31;
month_no = 2;
}
if (month_string == 'April') {
var no_of_days_in_month = 30;
month_no = 3;
}
if (month_string == 'May') {
var no_of_days_in_month = 31;
month_no = 4;
}
if (month_string == 'June') {
var no_of_days_in_month = 30;
month_no = 5;
}
if (month_string == 'July') {
var no_of_days_in_month = 30;
month_no = 6;
}
if (month_string == 'August') {
var no_of_days_in_month = 31;
month_no = 7;
}
if (month_string == 'September') {
var no_of_days_in_month = 30;
month_no = 8;
}
if (month_string == 'October') {
var no_of_days_in_month = 31;
month_no = 9;
}
if (month_string == 'November') {
var no_of_days_in_month = 30;
month_no = 10;
}
if (month_string == 'December') {
var no_of_days_in_month = 31;
month_no = 11;
}
var alldivs = $('.day'); // the entire predfined array of divs with a given number (42, in the present case)
// (for a calendar - will be depending on the design of the grid for the month-view )
// is assigned to a variable
// ********* the following function draws / shows the calendar for the chosen month and year *********** //
function showCalendar(year, month_no, selected_date, alldivs) {
// ************** Get the first day of the month showing on the top pane **************//
var FirstDayofMonth = new Date(year, month_no, 1); // returns the first day of the given month in long date format
// showing the day of the week, date, month, year and time
// ************** Get the first day of the first week of the month showing on the top pane **************//
var FirstDayofFirstWeek = FirstDayofMonth.getDay(); // returns the number place of the first day of the month
// within 0 to 6 i.e. 7 days of week
var ofset; // this variable holds the number of divs to be left free from top left while showing the month selected
ofset = FirstDayofFirstWeek;
var no_of_div; // no of divs to be highlighted as days of the month in concern
no_of_div = no_of_days_in_month;
// **** the following variable holds the no of divs from the first div in the matrix of the calendar to the div
// **** showing the last date of the month in concern **** //
var divcount = parseInt(ofset)+parseInt(no_of_div); //without parseInt() it will produce garbage and hence ridiculously wrong result
var i; //index for looping over the entire array of divs ( the entire grid for a calendar)
var j = 1; //for counting date of a calendar
for (i = 0; i <= divcount-1; i++) {
if (i >= ofset && i <= divcount) {
$(alldivs[i]).html(j).css({'background-color':'#ff7'});
if (j == selected_date) {
$(alldivs[i]).html(j).css({'background-color':'#def'});
}
j++;}
}
} // end of function showCalendar()
// ******************* end of function showCalendar() ********************** //
showCalendar(year, month_no, selected_date, alldivs);
// ******** code to show calendar in the grid ******** //
$('#go-to-previous-year').on('click', function() {
year = year - 1;
$('#month-and-year').html(months[month_no] + ', ' + year);
showCalendar(year, month_no, selected_date, alldivs );
});
$('#go-to-next-year').on('click', function() {
year = year + 1;
$('#month-and-year').html(months[month_no] + ', ' + year);
showCalendar(year, month_no, selected_date, alldivs );
});
$('#go-to-previous-month').on('click', function() {
if (month_no == 0) {
month_no = 12;
month_no = month_no - 1;
$('#month-and-year').html(months[month_no] + ', ' + year);
month_string = months[month_no];
showCalendar(year, month_no, selected_date, alldivs );
}
else {
month_no = month_no - 1;
$('#month-and-year').html(months[month_no] + ', ' + year);
month_string = months[month_no];
showCalendar(year, month_no, selected_date, alldivs );
}
});
$('#go-to-next-month').on('click', function() {
if (month_no == 11) {
month_no = -1;
month_no = month_no + 1;
$('#month-and-year').html(months[month_no] + ', ' + year);
month_string = months[month_no];
showCalendar(year, month_no, selected_date, alldivs );
}
else {
month_no = month_no + 1;
$('#month-and-year').html(months[month_no] + ', ' + year);
month_string = months[month_no];
showCalendar(year, month_no, selected_date, alldivs );
}
});
}); //end of $(document).ready()
我想，我并没有在课堂上传递42个div的数组＆＃39; day＆＃39;正确（我一直试图通过变量＆＃39; alldivs＆＃39;这里），因此日历没有显示。该功能没有错误消息。
当我单独运行它时，相同的代码也可以工作 - 即不将其放在函数中。所以我的猜测是我必须将这42个div的数组传递给函数作为参数并更改其属性和html以显示日历。
有人可以帮忙吗？
此致
Sukalyan
答案 0 :(得分：0)
month_string未在任何地方设置，因此no_of_days_in_month永远不会被设置，因此一切都会失败。
修复那些我至少得到一个大的黄色方框，1-31页面下方，16（今天）突出显示，而不是空白页面。我不确定这是最终结果应该是什么样的，但这是向前迈出的一步。