这个标题我考究了很久，不知道如何才能起的完美。想来想去，浪费脑力，于是就随便起了一个标题。本文是一款日历控件，该日历插件可以实现待办事件的展示，并且可以获得下一月，上一月等其他月份的待办事件提醒功能。
先来看看效果：
再这里，我再次做一下声明，本文禁止任何转载。
相关实现源码如下：
<!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>
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),//确定日期表格所需的行数
html="";
//判断当前年份是否是闰年(闰年2月份有29天，平年2月份只有28天)
function isLeap(year) {
return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;
}
function prev(){
var year = y;
var month = parseInt(m) -1;
if (month == 0) {
year = parseInt(y) - 1;
month = 12;
}
today = new Date(year, month, 1);
y = today.getFullYear();
m = today.getMonth();
d = today.getDate();
firstday = new Date(y, m, 1);
dayOfWeek = firstday.getDay();
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);
$('p').remove();
$('table').remove();
// 重新生成日历
loadCal();
}
function next(){
var year = y;
var month = parseInt(m) + 1;
if (month == 13) {
year = parseInt(y) + 1;
month = 1;
}
today = new Date(year, month, 1);
y = today.getFullYear();
m = today.getMonth();
d = today.getDate();
firstday = new Date(y, m, 1);
dayOfWeek = firstday.getDay();
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);
$('p').remove();
$('table').remove();
// 重新生成日历
loadCal();
}
function loadCal(){
html="";
html += "<p style='vertical-align:middle;font-size:20px;'><img src='img/left.png' onclick='prev();'/>"
+" <span><strong>" + y + "年" + (m + 1) + "月" + "</strong></span>"
+" <img src='img/right.png' onclick='next();'/></p>";
html += "<table cellspacing='0'>";
//打印表格第一行(显示星期)
html += "<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) { //二维数组创建日期表格
html += '<tr>';
for(k = 0; k < 7; k++) {
var idx = 7 * i + k; //为每个表格创建索引,从0开始
var date = idx - dayOfWeek + 1; //将当月的1号与星期进行匹配
(date <= 0 || date > days_per_month[m]) ? date = ' ': date = idx - dayOfWeek + 1; //索引小于等于0或者大于月份最大值就用空表格代替
//date == d ? document.write('<td class="today">' + date + '</td>') : document.write('<td>' + date + '</td>'); //高亮显示当天
if($.inArray(date, arr)>-1){
html += '<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){
html += '<td class="today">' + date + '</td>'; //高亮显示当天
}else{
html += '<td>' + date + '</td>';
}
}
html += '</tr>';
}
html += '</table>';
$("body").append(html) //也加不进去
}
loadCal();
</script>
</body>
</html>
源代码已共享到百度网盘，链接：http://pan.baidu.com/s/1pKASTUb 密码：3nk4
目前只是在谷歌，火狐等浏览器下测试通过。有兴趣的可以在ie下测试测试，并修复一些兼容性。
： » 教你实现日历待办任务展示万年历
原创文章，作者：306829225，如若转载，请注明出处：https://blog.ytso.com/251298.html