Java基础、中级、高级、架构面试资料
    你的位置：业余草 > HTML5 > 业余草教你实现日历待办任务展示万年历

    业余草教你实现日历待办任务展示万年历

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

    这个标题我考究了很久，不知道如何才能起的完美。想来想去，浪费脑力，于是就随便起了一个标题。本文是一款日历控件，该日历插件可以实现待办事件的展示，并且可以获得下一月，上一月等其他月份的待办事件提醒功能。

    先来看看效果：

    日历待办事项展示

    再这里，我再次做一下声明，本文禁止任何转载。

    相关实现源码如下： 

    <!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();'/>"
		+"&nbsp;&nbsp;&nbsp;&nbsp;<span><strong>" + y + "年" + (m + 1) + "月" + "</strong></span>"
		+"&nbsp;&nbsp;&nbsp;&nbsp;<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下测试测试，并修复一些兼容性。

    业余草公众号

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

    本文原文出处：业余草： » 业余草教你实现日历待办任务展示万年历

    相关文章推荐