Java基础、中级、高级、架构面试资料
    你的位置：业余草 > HTML5 > 业余草 HTML5 + jQuery 实现日历待办事项demo

    业余草 HTML5 + jQuery 实现日历待办事项demo

    HTML5 herman 5486浏览 0评论
    公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
    本博客日IP超过2000，PV 3000 左右，急需赞助商。
    极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
    受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
    所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
    视频教程免费领
    腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

    做 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">业余草：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

    业余草公众号

    最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

    本文原文出处：业余草： » 业余草 HTML5 + jQuery 实现日历待办事项demo

    相关文章推荐