JavaScript 博客风格日历控件使用指南
本文介绍一个轻量级的JavaScript博客风格日历控件。详细解析了Calendar类的实例化方法及Year、Month、SelectDay等核心参数。通过onSelectDay和onToday回调函数自定义选中与当日样式，并利用onFinish在渲染完成后绑定动态数据或交互逻辑，支持月份切换。
日历控件使用说明
使用说明：
该程序实现逻辑较为直观，代码内部已包含详细注释，此处主要梳理具体的使用流程。
第一步是实例化一个Calendar对象，并根据需求配置相关参数。
参数配置详解
参数说明：
Year：指定需要展示的年份。
Month：指定需要展示的月份。
SelectDay：设定默认选中的日期。
onSelectDay：当用户选中特定日期时触发的回调函数。
onToday：当渲染到当前系统日期时触发的回调函数。
onFinish：日历DOM结构绘制完成后触发的回调函数。
通常需要将SelectDay设置为已选中的日期，并在onSelectDay回调中编写逻辑以应用该日期的特定样式。
例如，在示例中将SelectDay设置为当月10号，并应用名为onSelect的样式类：
样式与数据绑定示例
代码如下:
SelectDay: new Date().setDate(10),
onSelectDay: function(o){ o.className = "onSelect"; },而onToday则用于定义今日日期的样式表现。
例如在示例中将今天的日期样式设置为onToday：
onToday: function(o){ o.className = "onToday"; },
在onFinish回调中可以执行需要日历渲染完成后才能进行的操作。
可以通过this.Year和this.Month属性获取当前日历显示的年份和月份信息。
对于包含特定数据的日期，也可在此处进行设置。例如示例中维护了一个当前月份有数据的日期列表，并根据该列表对相应日期进行特殊处理：
代码如下:
var flag = [10,15,20];
for(var i = 0, len = flag.length; i < len; i++){
this.Days[flag[i]].innerHTML = "<a href='javascript:void(0);' onclick=\"alert('日期是:"+this.Year+"/"+this.Month+"/"+flag[i]+"');return false;\">" + flag[i] + "</a>";
} 示例中固定了日期列表，在实际应用场景中，建议根据年份和月份动态获取对应的数据日期列表。
个人推荐使用AJAX技术根据年份和月份异步获取数据。
月份切换功能
程序中还提供两个便捷方法：PreMonth（显示上一个月）和NextMonth（显示下一个月）。
测试代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>blog式日历控件_www.jb51.net_本站</title> </head> <body> <style type="text/css"> .Calendar { font-family:Verdana; font-size:12px; background-color:#e0ecf9; text-align:center; width:200px; height:160px; padding:10px; line-height:1.5em; } .Calendar a{ color:#1e5494; } .Calendar table{ width:100%; border:0; } .Calendar table thead{color:#acacac;} .Calendar table td { font-size: 11px; padding:1px; } #idCalendarPre{ cursor:pointer; float:left; padding-right:5px; } #idCalendarNext{ cursor:pointer; float:right; padding-right:5px; } #idCalendar td.onToday { font-weight:bold; color:#C60; } #idCalendar td.onSelect { font-weight:bold; } </style> <div class="Calendar"> <div id="idCalendarPre"><<</div> <div id="idCalendarNext">>></div> <span id="idCalendarYear">2008</span>年 <span id="idCalendarMonth">8</span>月 <table cellspacing="0"> <thead> <tr> <td>日</td> <td>一</td> <td>二</td> <td>三</td> <td>四</td> <td>五</td> <td>六</td> </tr> </thead> <tbody id="idCalendar"> </tbody> </table> </div> </body> </html>[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58