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

HTML5 herman 592浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

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

先来看看效果:

日历待办事项展示

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

相关实现源码如下:

<!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)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

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