[1]日历任务插件(jquery版)

先放张图和源代码 jquery版 : https://gitee.com/under_the_sky/dateTask/tree/master/jquery%E7%89%88

下载地址 :https://gitee.com/under_the_sky/dateTask.git

日历任务组件新增一套新的UI样式:

样式1:themeLaydate.css

样式2:kgodate.css

 

使用方法:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.10.2.min.js"></script>
		<link rel="stylesheet" href="js/layui/css/layui.css"  media="all">
		<link rel="stylesheet" type="text/css" href="css/kgodate.css"/>
		<script src="js/KGODateTask.js"></script>
	</head>
	<body>	
		<div class="content-date"></div>

		<script>
		  KGODate.init($('.content-date'),2018,11);
		  KGODate.addTask('2018-11-06');
		</script>
	</body>
</html>

1)引用jquery.js , KGODateTask.js 和 kgodate.css ;其中 KGODateTask.js 使用闭包封装日历组件,kgodate.css 是对日历样式声明

2) 为日历声明容器 

3) 初始化日历 

// 指定日期 的日历 初始化
KGODate.init($('.content-date'),2018,11);

//默认当前月的日历 初始化 
KGODate.init($('.content-date'));

4)addTask新增任务功能还未完善,后面会更新。入参会定义为json对象,日历按照月份展示,因此只会支持到当前月新增任务

 

源代码  jquery版 下载地址 : https://gitee.com/under_the_sky/dateTask.git

 

附上js部分代码(最新版可以到码云里下载)

/**
* 为了不让该对象的错误影响系统,这里进行一下闭包操作
*/
var KGODate = (function(){
	/**
	 * 内部方法,获取当前月共有多少天
	 * 打印上个月的最后几天时需要知道上个月共有几天
	 * 
	 */
	function getMonthTotalDays(year , month){
		//当前月的开始日期
		var startDate = new Date(year,month-1,1);
		//当前月的结束日期
		var endDate = new Date(year,month,0); 
		//当前月共多少天
		var gapDay = Math.abs(endDate - startDate) / (1000*60*60*24) + 1 ;
		return gapDay;
	}
	/**
	 * 定义一个内部方法获取当月的日期数据,
	 */
	function getMonthDays(year,month){
			//gapDay 标示这个月和上个月中间相差多少天,意思就是当月共有多少天 
			var today , thisMonth ,thisYear ,thisfirstDay ,thisLastDay , gapDay;
			var dateArray = [];
			//如果没有传年或者月,就认为是当前月 
			if(!year||!month){
				today = new Date;
				thisMonth = today.getMonth()+1;
				thisYear = today.getFullYear();
				var startDate = new Date(thisYear,thisMonth-1,1);
				var endDate = new Date(thisYear,thisMonth,0);
				thisfirstDay =  startDate.getDay();
				thisLastDay =  endDate.getDay();
				//一星期有7天,外国星期天是第一天,所以星期天是 0 这些做一下转化
				//if(thisLastDay==0) thisLastDay = 7;
				thisLastDay = thisLastDay==0 ? 7 : thisLastDay ;
				gapDay = Math.abs(endDate - startDate) / (1000*60*60*24) + 1 ;
			}else{
				//获取当前月,js的月份是从0-11的,所以传入数据需要 -1 
				today = new Date(year,month-1);
				//年数据,月数据有可能发生越界,比如 11月31号 是12月1号 ,这里需要重新获取一些当前月和当前年
				thisMonth = today.getMonth()+1;
				thisYear = today.getFullYear();
				var startDate = new Date(thisYear,thisMonth-1,1);
				var endDate = new Date(thisYear,thisMonth,0);
				//这里的firstDay 是本月的第一天是周几
				thisfirstDay =  startDate.getDay();
				//LastDay 同上 
				thisLastDay =  endDate.getDay();
				//一星期有7天,外国星期天是第一天,所以星期天是 0 这些做一下转化
				//if(thisLastDay==0) thisLastDay = 7;
				thisLastDay = thisLastDay==0 ? 7 : thisLastDay ;
				//日期相减返回的是毫秒,并且会少一天 
				gapDay = Math.abs(endDate - startDate) / (1000*60*60*24) + 1 ;
			
			}
			//当前数据表格需要输出多少天 ,sum = 当月天数 + 上个月最后几天 + 下个月的开始几天 
			//arraySize 一定是7的整数倍 ,但是有可能是4*7 ,有可能是5*7 也有可能是 6*7 
			//这里计算 数组长度是为了返回最小的 数组长度 不严谨的做法可以统一用 6*7
			var arraySize =  parseInt(gapDay) + parseInt(thisfirstDay) +(7-thisLastDay-1);
			//上一个月的最后一天
			var lastMonthLastDay =getMonthTotalDays(thisYear,thisMonth-1);
		
			//下面开始循环将日历的数据放数组中
			for(var i=0; i < arraySize;i++){
				// 星期几 ? i是从零开始的,所以这里要 +1
				var _weeknum = (i+1)%7;
				//如果是周天,对7取余数会等 0 ,这里三目运算修改一下
				_weeknum = _weeknum==0 ? 7 : _weeknum ;
				// 打印上个月的最后几天,这里本月的第一天是从1开始计算的(周天被转化为了7)所以要打印到前一天
				if(i<thisfirstDay-1){
					dateArray.push({
						week:_weeknum,
						type:'lastMonth',
						days:lastMonthLastDay-(thisfirstDay-1)+i+1,
					});
				//打印当月时间
				}else if(Math.abs(i+1-thisfirstDay+1) <= gapDay){
					dateArray.push({
						week:_weeknum,
						type:'thisMonth',
						days:Math.abs(i+1-thisfirstDay+1),
					});
				//打印下个月数据
				}else{
					dateArray.push({
						week:_weeknum,
						type:'nextMonth',
						days:Math.abs(i+1-thisfirstDay - gapDay)+1,
					});
				}
				
			}
			//返回对象,当前年,当前月,当前月天数据
			return {
				year:thisYear,
				month:thisMonth,
				days:dateArray
			};
		} 
		/**
		 * 添加内部方法打印日历头部信息
		 * 
		 */
		function printHeadDom($dom,days){
			var _kgo_date_dom =	'<div id="kgo-date-content">'
							+'	<div class="kgo-date-task-title">'
							+ days.year +'-' + days.month
							+'  </div>'
							+'	<table class="kgo-date-task" cellspacing="0">'
							+'			<colgroup>'
							+'				<col>'
							+'				<col>'
							+'				<col>'
							+'				<col>'
							+'				<col>'
							+'				<col style="background-color: rgb(51,255,202,0.3);">'
							+'				<col style="background-color: rgb(51,255,202,0.3);">'
							+'			</colgroup>'
							+'		<thead>'
							+'		<tr>'
							+'			<th>星期一</th>'
							+'			<th>星期二</th>'
							+'			<th>星期三</th>'
							+'			<th>星期四</th>'
							+'			<th>星期五</th>'
							+'			<th>星期六</th>'
							+'			<th>星期天</th>'
							+'		</tr> '
							+'		</thead>'
							+'		<tbody class="date-day-table">'
							+'	</table>'
							+'</div>	 '
			$dom.append(_kgo_date_dom);
		};
		/**
		 * 定义内部方法打印 日期信息
		 */
		function printDateBody($dom,days){
			var dom ="";
			$.each(days.days,function(index,item){
				var td_date_sty = 'this-month-day-sty'
				if(item.type=='lastMonth'||item.type=='nextMonth'){
					var td_date_sty = 'not-this-month-day-sty'
				}
				if((index+1)%7==1){
					dom += '<tr>';
				} 
				var  theday ="";
				if(item.type=='thisMonth'){
					
					if(item.days<10){
						theday=days.year+"-"+days.month+"-0"+item.days;
					}else{
						theday=days.year+"-"+days.month+"-"+item.days;
					}
					
				}
			   
				dom  += '<td class="'+td_date_sty+'" theday="'+theday+'">'
				     + '<span class="kgo-date-day">'+item.days+'</span></td>';
				if((index+1)%7==0){
					dom+='</tr>';
				} 
			})
			$('.date-day-table').append(dom);
			
			$('.kgo-date-task  td').on('click',function(){
				alert($(this).text());
			});
			
		};
		function printDateTask(day){
			var dom ='<div class="kgo-date-task-body">'
					+'<span class="kgo-undone-badge kgo-badge-total">未完成(1)</span><br>'
					+'<span class="kgo-done-badge kgo-badge-total">已完成(5)</span><br>'
					+'<span class="kgo-overdue-badge kgo-badge-total">已超时(3)</span>'
					+'<span class="kgo-overdue-badge kgo-badge-total">已超时(3)</span>'
					+'</div>';		
			$('.kgo-date-task  td[theday='+day+']').append(dom);

		};
		
		
		/**
		 * 暴露的属性和方法
		 */
		return {
			init : function($dom,year,month){
				var days = getMonthDays(year,month);
				printHeadDom($dom,days);
				printDateBody($dom,days);
			},
			addTask(day){
				printDateTask(day);
			}
			
			
		}
				
	
	
	
	
		
		
})();

 

插件已更新新增任务功能和点击监听方法  博文请见 https://blog.csdn.net/qq_26462567/article/details/84838634

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页