做 OA 或者 ERP ，也或者 EHR 等项目时，常常需要一些日历控件，显示出当前月需要待办的事件。我在网上搜索了很久，发现没有特别适合的日历控件，因此我自己基于 jQuery 实现了一款日历控件。本文将详细介绍它的相关实现。
老规矩，我们还是先看看 jQuery 日历控件的运行效果。
具体待办任务的日期在鼠标悬浮上到该日期后会显示该日期的待办事件。
以下是本文demo的主要实现代码：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery日历待办事项</title>
<link rel="stylesheet" href="css/master.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery-1.3.min.js" type="text/javascript"> </script>
<script src="js/coda.js" type="text/javascript"> </script>
</head>
<body>
<h1>jquery日历待办事项</h1>
<script>
//判断当前年份是否是闰年(闰年2月份有29天，平年2月份只有28天)
function isLeap(year) {
return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;
}
var i, k,
today = new Date(), //获取当前日期
y = today.getFullYear(), //获取日期中的年份
m = today.getMonth(), //获取日期中的月份(需要注意的是：月份是从0开始计算，获取的值比正常月份的值少1)
d = today.getDate(), //获取日期中的日(方便在建立日期表格时高亮显示当天)
firstday = new Date(y, m, 1), //获取当月的第一天
dayOfWeek = firstday.getDay(), //判断第一天是星期几(返回[0-6]中的一个，0代表星期天，1代表星期一，以此类推)
days_per_month = new Array(31, 28 + isLeap(y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31), //创建月份数组
str_nums = Math.ceil((dayOfWeek + days_per_month[m]) / 7); //确定日期表格所需的行数
document.write("<h1>" + y + "年" + (m + 1) + "月" + "</h1><table cellspacing='0'>");
//打印表格第一行(显示星期)
document.write("<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>");
var arr = [ 6, 8, 16,18, 26, 28 ]; //有待办事件的日期
for(i = 0; i < str_nums; i += 1) { //二维数组创建日期表格
document.write('<tr>');
for(k = 0; k < 7; k++) {
var idx = 7 * i + k; //为每个表格创建索引,从0开始
var date = idx - dayOfWeek + 1; //将当月的1号与星期进行匹配
//索引小于等于0或者大于月份最大值就用空表格代替
(date <= 0 || date > days_per_month[m]) ? date = ' ': date = idx - dayOfWeek + 1;
if($.inArray(date, arr)>-1){
document.write('<td class="date_has_event">' + date + '<div class="events"><ul>'
+'<li><span class="title">待办事件1</span><span class="desc">：www.xttblog.com</span>'
+'</li><li><span class="title">待办事件2</span><span class="desc">：www.xttblog.com</span>'
+'</li></ul></div></td>');
}else if(date == d){
document.write('<td class="today">' + date + '</td>'); //高亮显示当天
}else{
document.write('<td>' + date + '</td>');
}
}
document.write('</tr>');
}
document.write('</table>');
</script>
</body>
</html>
以上就是相关的主要实现代码，其中关于 CSS 样式和 JS 实现鼠标悬浮事件我就贴出来了。代码我共享到了百度网盘，链接：http://pan.baidu.com/s/1qY2ZEOk 密码：3296
： » HTML5 + jQuery 实现日历待办事项demo
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/251297.html