前面接触到了JQuery的自定义验证方法,今天介绍一个的也和JQuery有关,是FullCalendar,一个非常不错的插件,
日历工具,可用于制作日程表或计划安排。
在项目中,有个需求是需要查看某个特定广告位置下广告的排期,从而可以更合理地安排广告,避免冲突。所以,此时,有个像日历一样工具就非常必要了,可以很方便很清楚的看到每天每时刻的安排。
下面就看看如何将数据与FullCalendar进行绑定。页面的代码只需要一个div即可。主要是json数据如何显示在events中。
方法有三种,下面一一举例:
1. events (as an array),数组形式。
$('#fullPage').fullCalendar({
editable: false,
eventLimit: false,
events: [{
id:1,
title: '618广告',
start: '2016-08-05',
end:'2016-12-06',
className:'label-error'
}, {
id:2,
title: 'XX商铺商品广告',
start: '2016-08-02',
end: '2016-08-04',
className:'label-warning'
}, {
id:3,
title: 'XX默认广告',
start: '2016-08-01',
end:'2016-08-16',
className:'label-info'
}]
});
2. events (as a json feed),Json形式
$('#calendar').fullCalendar({
events: {
url: '<%=request.getContextPath()%>/displayAction.do?method=testJson' //你的controller的地址
type: 'POST',
error: function() {
alert('there was an error while fetching events!');
},
color:'yellow',// 背景色
textColor:'black'// 文字颜色
}
});
3.
events (as a function),函数形式,而项目中我采用的就是这样形式,代码如下:
$('#fullPage').fullCalendar({
events:function(start, end, timezone, callback) {
$.ajax({
url: contextPath + "/advance/allAdvert.html",
data:{positionId:vm.positionId},
cache:false,
success:function(doc) {
eval("var j=" + doc);
var events = [];
var info = j.dataList;
for (var i = 0; i < info.length; i++) {
var ev = info[i];
var defaultStart = new Date(Date.parse(ev.startTime));
var defaultEnd = new Date(Date.parse(ev.endTime));
if(ev.priority==3){
events.push({
title:'默认广告',
start:defaultStart,
end:defaultEnd,
id:1,
className:'label-info',
allDay: false
});
}
if(ev.priority==1){
events.push({
title:'紧急广告',
start:defaultStart,
end:defaultEnd,
id:2,
className:'label-warning',
allDay: false
});
}
if(ev.priority==2){
events.push({
title:'普通广告',
start:defaultStart,
end:defaultEnd,
id:3,
className:'label-error',
allDay: false
});
}
}
callback(events);
},
error:function() {
$.dlg.alert('出错啦!!请联系管理员!!');
}
})
}
})
将查询到的数据循环取出,在根据优先级,使用不同的颜色去区分。下面就是获取到数据后在日历上有着对应的标识,一目了然。
这个排期需求,其实拖了挺长时间的。前端架构师很早就给我写好了静态页面的样子,但因为自己在梳理需求的时候,就很疑惑不知道后台应该提供怎样的接口,再加上也没有用过这样的插件,不知道如何去做区分不同优先级的广告,所以总是想着先放放这个工作任务,先把其它的弄了。
等到不得不做的那个下午,自己查了查资料,看了看如何实现数据与FullCalendar的绑定,第三种形式很容易就满足了我的需求,这项我一直觉得很困难的任务也算是轻松搞定了。站在巨人的肩膀上,有种功夫不负苦心人的感觉,也有些得来全不费功夫的感觉。