fullcalendar，轻松管理日程

    前面接触到了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的绑定，第三种形式很容易就满足了我的需求，这项我一直觉得很困难的任务也算是轻松搞定了。站在巨人的肩膀上，有种功夫不负苦心人的感觉，也有些得来全不费功夫的感觉。