HTML5 + jQuery 实现日历待办事项 demo下载

当我们做 OA 或者 ERP ，也或者 EHR 等项目时，常常需要一些日历控件，显示出当前月需要待办的事件。但是并没有发现特别适合的日历控件，因此我自己基于 jQuery 实现了一款日历控件。本文将详细介绍它的相关实现。

先看看 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">web前端中文站：www.lisa33xiaoq.net</span>'     +'</li>
 <li><span class="title">待办事件2</span>
 <span class="desc">web前端中文站：www.lisa33xiaoq.net</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 实现鼠标悬浮事件代码见百度网盘，链接：
抱歉，只有对本文发表过评论才能阅读隐藏内容。