[2] 日历任务插件(jquery版)新增日历任务和点击监听

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

本次为日历任务组件新增了新增任务功能和点击监听

第一,新增任务 

		<script>
		 var taskjson =
			 [{
				 date:'2018-12-03',
				 tasks:[
								 {type:'undone',sum:3},{type:'done',sum:3},{type:'overdue',sum:3}
							 ]
				},
				{
					date:'2018-12-07',
					tasks:[
									{type:'undone',sum:3},{type:'done',sum:3}
								]
				},
				{
					date:'2018-12-11',
					tasks:[
									{type:'undone',sum:3},{type:'overdue',sum:3}
								]
				},
				{
					date:'2018-12-19',
					tasks:[
									{type:'done',sum:3},{type:'overdue',sum:3}
								]
				}];
			 
		
		</script>
		<div class="content-date"></div>

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

		  KGODate.addTask(taskjson);
			KGODate.onClickDo(function(date){
				alert(JSON.stringify(date));
			});

		</script>

这里是新增代码,task是支持多属性的,任意新增属性都可以,但是type属性和sum属性是必须的,例如 :

	tasks:[
			{type:'undone',sum:3,name:'test',id:'122121',state:1},
            {type:'done',sum:3}
         ]

目前支持三种类型的事件 :undone 未完成 , overdue 逾期 ,done 已完成 (以后会增加更多类型)

sum表示当前事件有多少个 

新增事件需要调用:(json格式上面已经有了简要说明和实例)注意这个只能新增当月的任务,如果新增的任务不属于当前显示的月份,不能新增。(目前我认为这么做是对的)

  KGODate.addTask(taskjson);

第二:监听触发 

将调用完需要执行的方法直接写入onClickDo方法的回调就可以了

KGODate.onClickDo(function(date){
	alert(JSON.stringify(date));
});

返回的数据是结构化的数据实例

{
	date:'2018-12-03',
	tasks:[
			 {type:'undone',sum:3,name:'你丑你先睡,我帅无所谓'},
             {type:'done',sum:3},
             {type:'overdue',sum:3}
		 ]
}

返回数据:

{
 "date":"2018-12-03",
 "tasks":{
       "date":"2018-12-03",
       "tasks":[
                 {"type":"undone","sum":3,"name":"你丑你先睡,我帅无所谓"}, 
                 {"type":"done","sum":3},
                 {"type":"overdue","sum":3}
            ]
        }
}

接下来 日期任务组件会新增日期跳转,日期切换,回到今天功能,如果时间宽裕,会再写一套新的样式主题(现在这个样子确实比较难看)

猜你喜欢

转载自blog.csdn.net/qq_26462567/article/details/84838634