在HTML页面中创建日历的一种方法是创建每月HTML表并手动填充它们。但是，是否有一个插件可以自动填充它们，例如提供月份值？
我不打算在日历上注册事件，我只想在html页面上显示12个表（每月一个）。没有多余的装饰。
答案 0 :(得分：5)
所有学分归this tutorial的作者所有。它可以轻松增强到12个月的日历：
function calendar(month) {
//Variables to be used later. Place holders right now.
var padding = "";
var totalFeb = "";
var i = 1;
var testing = "";
var current = new Date();
var cmonth = current.getMonth(); // current (today) month
var day = current.getDate();
var year = current.getFullYear();
var tempMonth = month + 1; //+1; //Used to match up the current month with the correct start date.
var prevMonth = month - 1;
//Determing if Feb has 28 or 29 days in it.
if (month == 1) {
if ((year % 100 !== 0) && (year % 4 === 0) || (year % 400 === 0)) {
totalFeb = 29;
} else {
totalFeb = 28;
}
}
// Setting up arrays for the name of the months, days, and the number of days in the month.
var monthNames = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thrusday", "Friday", "Saturday"];
var totalDays = ["31", "" + totalFeb + "", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"];
// Temp values to get the number of days in current month, and previous month. Also getting the day of the week.
var tempDate = new Date(tempMonth + ' 1 ,' + year);
var tempweekday = tempDate.getDay();
var tempweekday2 = tempweekday;
var dayAmount = totalDays[month];
// After getting the first day of the week for the month, padding the other days for that week with the previous months days. IE, if the first day of the week is on a Thursday, then this fills in Sun - Wed with the last months dates, counting down from the last day on Wed, until Sunday.
while (tempweekday > 0) {
padding += "<td class='premonth'></td>";
//preAmount++;
tempweekday--;
}
// Filling in the calendar with the current month days in the correct location along.
while (i <= dayAmount) {
// Determining when to start a new row
if (tempweekday2 > 6) {
tempweekday2 = 0;
padding += "</tr><tr>";
}
// checking to see if i is equal to the current day, if so then we are making the color of that cell a different color using CSS. Also adding a rollover effect to highlight the day the user rolls over. This loop creates the actual calendar that is displayed.
if (i == day && month == cmonth) {
padding += "<td class='currentday' onMouseOver='this.style.background=\"#00FF00\"; this.style.color=\"#FFFFFF\"' onMouseOut='this.style.background=\"#FFFFFF\"; this.style.color=\"#00FF00\"'>" + i + "</td>";
} else {
padding += "<td class='currentmonth' onMouseOver='this.style.background=\"#00FF00\"' onMouseOut='this.style.background=\"#FFFFFF\"'>" + i + "</td>";
}
tempweekday2++;
i++;
}
// Outputing the calendar onto the site. Also, putting in the month name and days of the week.
var calendarTable = "<table class='calendar'> <tr class='currentmonth'><th colspan='7'>" + monthNames[month] + " " + year + "</th></tr>";
calendarTable += "<tr class='weekdays'> <td>Sun</td> <td>Mon</td> <td>Tues</td> <td>Wed</td> <td>Thurs</td> <td>Fri</td> <td>Sat</td> </tr>";
calendarTable += "<tr>";
calendarTable += padding;
calendarTable += "</tr></table>";
document.getElementById("calendar").innerHTML += calendarTable;
}
function go12() {
for (i = 0; i < 12; i++) {
calendar(i);
}
}
if (window.addEventListener) {
window.addEventListener('load', go12, false);
} else if (window.attachEvent) {
window.attachEvent('onload', go12);
}
答案 1 :(得分：0)
在Google搜索关键字“html calendar maker”后进行简单的搜索
我得到了这个顶部
http://freehtmlcalendar.com/
试试看，它可能会有所帮助
答案 2 :(得分：0)
对于那些追随者，我已经采取了@Stano的答案，并在任何一年的任何一个月修改它，并根据当地情况标记数月和日期。
请注意，这会将月份名称，日期名称和日期数字的数组移到函数本身的范围之外。它还假设您有一个全局参数_locale来标识要使用的语言 - 显然，如果没有，这很容易克服。
我还删除了当前日期的检查 - 既要澄清正在发生的事情，也要加快整个过程。在您绘制完日历后，我觉得您可以通过（新）数据属性获取所需内容，而不是每个月检查每个日期。
您可以将人工阅读月份编号（例如1月份的＆＃39; 1＆＃39;和年份）输入功能。
var _month_names = {},
_day_names = {},
_num_days_in_months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
_month_names.en_GB = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
_day_names.en_GB = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
function draw_monthly_calendar(month_num, year)
{
var arr_month_num = parseInt(month_num) - 1;
year = parseInt(year);
var date_obj = new Date(month_num + ' 1,' + year);
var days_in_feb = ( (year % 100 !== 0) && (year % 4 === 0) || (year % 400 === 0) ) ? 29 : 28,
num_days_in_set_month = (arr_month_num === 1) ? days_in_feb : _num_days_in_months[arr_month_num];
var first_day_in_month = date_obj.getDay(),
calendar_content = '';
var tmp = first_day_in_month;
while(tmp > 0)
{
calendar_content += '<td class="prev-month-day"></td>';
tmp--;
}
tmp = first_day_in_month;
var i = 1;
while(i <= num_days_in_set_month)
{
if (tmp > 6)
{
tmp = 0;
calendar_content += '</tr><tr class="week">';
}
var ymd_str = year + '-' + lpad(month_num, 0, 2) + '-' + lpad(i, 0, 2);
calendar_content += '<td class="day" data-date="' + ymd_str + '">' + i + '</td>';
tmp++;
i++;
}
var ym_str = year + '-' + lpad(month_num, 0, 2);
var calendar = '<table class="month" data-date="' + ym_str + '"><tr class="month-label-ctn"><th class="month-label" colspan="7">' + _month_names[_locale][arr_month_num] + ' ' + year + '</th></tr>';
calendar+= '<tr class="day-label-ctn">';
$.each(_day_names[_locale], function(i, name)
{
calendar+= '<td class="day-label">' + name + '</td>';
});
calendar+= '<tr class="week">' + calendar_content + '</tr></table>';
return calendar;
}