javascript 一个轻松创建 html 日历表的插件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17391886/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
A plugin to create html calendars tables easily
提问by Jér?me Verstrynge
One way to create calendars in HTML pages is to create monthly HTML tables and fill them manually. But, is there a plugin that would fill them automatically, by providing the month value for example?
在 HTML 页面中创建日历的一种方法是创建每月 HTML 表格并手动填充它们。但是，是否有一个插件可以自动填充它们，例如提供月份值？
I am not looking to register events on calendars, I just want to display 12 tables (one for each month) on a html page. No frills.
我不想在日历上注册事件，我只想在 html 页面上显示 12 个表（每个月一个）。没有多余的装饰。
回答by Stano
All credits go to author of this tutorial. It can be easily enhanced to 12months calendar:
所有学分归本教程的作者所有。它可以轻松增强为 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);
}
回答by Hari Das
After a simple Google search for the keyword "html calendar maker"
I got this on the top
http://freehtmlcalendar.com/
Try that, it might help
在对关键字“ html calendar maker”进行简单的谷歌搜索后，
我在顶部找到了这个
http://freehtmlcalendar.com/
试试看，它可能会有所帮助
回答by Eamonn
For those coming after, I've taken @Stano 's answer and amended it to draw any month in any year, and label months and days according to locale.
对于之后的人，我已经接受了@Stano 的答案并将其修改为在任何一年中绘制任何月份，并根据语言环境标记月份和日期。
Note that this moves the arrays of month names, day names, and day numbers to outside the scope of the function itself. It also assumes that you have a global parameter _localewhich identifies the language to use - obviously this is easy to overcome if not.
请注意，这会将月份名称、日期名称和日期编号的数组移动到函数本身的范围之外。它还假设您有一个全局参数_locale来标识要使用的语言 - 显然，如果没有，这很容易克服。
I've also removed the checking for the current date - both to clarify what is going on, and also to speed the whole process along. I feel you can just grab what you need via the (new) data attributes once after you've drawn your calendar, rather than checking every single date in every month drawn.
我还删除了对当前日期的检查——既是为了澄清正在发生的事情，也是为了加快整个过程。我觉得您可以在绘制日历后通过（新）数据属性获取所需的内容，而不是检查绘制的每个月的每个日期。
You would feed the function the human-readmonth number (e.g. '1' for January) and the year.
您可以为函数提供人工读取的月份数（例如，“1”表示一月）和年份。
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;
}
