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

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

更多精彩内容请看 web 前端中文站
 http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

先看看 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 实现鼠标悬浮事件代码见百度网盘，链接：

百度网盘下载 ? ? ?密码：azrw