fullcalendar的简单运用

一、简介

      FullCalendar是一个可开发的日历插件，提供了丰富的属性设置和方法调用，开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发，本文将FullCalendar的常用属性和方法、回调函数等整理成中文文档，方便参阅。

二、为何使用

    由于工作需要要开发一个日程管理，后面查询到fullcalendar是个不错jquery做的日程控件配合jquery-ui的时间选择控件，个人感觉还是不错的fullcalendar有丰富的配置满足了开发所需还有不错的用户体验，不多说上代码。

三、核心代码

要使用fullcalendar 必须先引入下面的css文件和js库，可以去官网下载，注：${ctx}是el表达式，返回项目根路径。读者写自己的文件路径就可以了

引入

<link href="${ctx}/js/jquery/jquery-ui.css" rel="stylesheet" type="text/css" />
<link rel='stylesheet' type='text/css' href='${ctx}/css/theme.css' />
<link rel='stylesheet' type='text/css' href='${ctx}/js/fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='${ctx}/js/fullcalendar/fullcalendar.print.css' media='print' />
<script src="${ctx}/js/jquery/jquery-1.8.2.min.js" type="text/javascript"></script> 
<script src="${ctx}/js/jquery/jquery-ui.min1.9.1.js" type="text/javascript"></script>
<script src="${ctx}/js/fullcalendar/fullcalendar.js" type="text/javascript"></script>

js部分

$(document).ready(function () {
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();


    $('#calendar').fullCalendar({
        theme: true,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
        dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
        today: ["今天"],
        firstDay: 1,
        buttonText: {
            today: '本月',
            month: '月',
            week: '周',
            day: '日',
            prev: '上一月',
            next: '下一月'
        },
        viewDisplay: function (view) {//动态把数据查出，按照月份动态查询
           var viewStart = $.fullCalendar.formatDate(view.start, "yyyy/MM/dd HH:mm:ss");
            var viewEnd = $.fullCalendar.formatDate(view.end, "yyyy/MM/dd HH:mm:ss");
            $("#calendar").fullCalendar('removeEvents');
              $.post("/msmp/action/Programme/getProgramme", { start: viewStart, end: viewEnd }, function (data) {
               var resultCollection = jQuery.parseJSON(data);
             $.each(resultCollection, function (index, term) {
                 $("#calendar").fullCalendar('renderEvent', term, true);
             });


              }); //把从后台取出的数据进行封装以后在页面上以fullCalendar的方式进行显示
        },
        editable: true,//判断该日程能否拖动
        dayClick: function (date, allDay, jsEvent, view) {//日期点击后弹出的jq ui的框，添加日程记录
            var selectdate = $.fullCalendar.formatDate(date, "yyyy/MM/dd HH:mm:ss");//选择当前日期的时间转换
            $("#start").val(selectdate);//给时间赋值
            $("#id").val("");//
            $("#idtr").hide();//
            $("#reservebox").dialog({
                autoOpen: false,
                height: 350,
                width: 600,
                title: selectdate+'的日程安排',
                modal: true,
                position: "center",
                draggable: false,
                beforeClose: function (event, ui) {
                },
                buttons: {
                    "关闭": function () {
                        $(this).dialog("close");
                    },
                    "提交": function () {
                    if(!Vai()){
                    return false;
                    }
                        var title = $("#title").val(); //标题
                        var det = $("#details").val(); //内容 
                        var startdate = $("#start").val();
                        var enddate = $("#end").val();
                        var schdata = { title: title, description:det,start:startdate,end:enddate};
                        $.ajax({
                            type: "POST", //使用post方法访问后台
                            url: Apps.ContextPath + "action/client/invoke?transcode=PROGRAMME_SAVE",
                            data: schdata, //要发送的数据
                            success: function (data) {
                                //对话框里面的数据提交完成，data为操作结果
                                var schdata2 = { title: title,description: det, start: startdate, end: enddate};
                                $('#calendar').fullCalendar('renderEvent', schdata2, true);
                                $("#start").val(''); //开始时间
                                $("#end").val(''); //结束时间
                                $("#title").val(''); //标题
                                $("#details").val(''); //内容 


                            }
                        });
                        $(this).dialog("close");
                    }
                }
            });
            $("#reservebox").dialog("open");
            return false;
        },
        titleFormat: "yyyyMMMMdddd",
        loading: function (bool) {
            if (bool) $('#loading').show();
            else $('#loading').hide();
        },
        eventAfterRender: function (event, element, view) {//数据绑定上去后添加相应信息在页面上
            var fstart = $.fullCalendar.formatDate(event.start, "HH:mm");
            var fend = $.fullCalendar.formatDate(event.end, "HH:mm");


            var confbg = '';
            if (event.confid == 1) {
                confbg = confbg + '<span class="fc-event-bg"></span>';
            } else if (event.confid == 2) {
                confbg = confbg + '<span class="fc-event-bg"></span>';
            } else if (event.confid == 3) {
                confbg = confbg + '<span class="fc-event-bg"></span>';
            } else if (event.confid == 4) {
                confbg = confbg + '<span class="fc-event-bg"></span>';
            } else if (event.confid == 5) {
                confbg = confbg + '<span class="fc-event-bg"></span>';
            } else if (event.confid == 6) {
                confbg = confbg + '<span class="fc-event-bg"></span>';
            } else {
                confbg = confbg + '<span class="fc-event-bg"></span>';
            }


            if (view.name == "month") {//按月份
                var evtcontent = '<div class="fc-event-vert"><a>';
                evtcontent = evtcontent + confbg;
                evtcontent = evtcontent + '<span class="fc-event-titlebg">' + fstart + ' - ' + fend +' - ' + event.title + '</span>';
                element.html(evtcontent);
            } else if (view.name == "agendaWeek") {//按周
                var evtcontent = '<a>';
                evtcontent = evtcontent + confbg;
                evtcontent = evtcontent + '<span class="fc-event-time">' + fstart + "-" + fend  + '</span>';
                evtcontent = evtcontent + '<span>'+' - ' + event.title + '</span>';
                element.html(evtcontent);
            } else if (view.name == "agendaDay") {//按日
                var evtcontent = '<a>';
                evtcontent = evtcontent + confbg;
                evtcontent = evtcontent + '<span class="fc-event-time">' + fstart + " - " + fend +  '</span>';
                element.html(evtcontent);
            }
        },
        eventMouseover: function (calEvent, jsEvent, view) {
            var fstart = $.fullCalendar.formatDate(calEvent.start, "yyyy/MM/dd HH:mm");
            var fend = $.fullCalendar.formatDate(calEvent.end, "yyyy/MM/dd HH:mm");
            $(this).attr('title', fstart + " - " + fend + " " + "<br>标题" + " : " + calEvent.title+"<br>内容："+calEvent.description);
            $(this).css('font-weight', 'normal');
            $(this).tooltip({
                effect: 'toggle',
                cancelDefault: true
            });
        },
        eventClick: function (event) {
        $("#idtr").show();//
            var fstart = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
            var fend = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
            var selectdate = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
            $("#start").val(fstart);
            $("#end").val(fend);
            $("#title").val(event.title);
            
            var det = event.description.indexOf('<b');
            $("#details").val(event.description.substring(0,det)); //内容 
            $("#id").val(event.id); //id
            $("#reservebox").dialog({
                autoOpen: false,
                height: 300,
                width: 630,
                title: '日程安排 ',
                modal: true,
                position: "center",
                draggable: false,
                beforeClose: function (event, ui) {
                    $("#start").val(''); //开始时间
                    $("#end").val(''); //结束时间
                    $("#title").val(''); //标题
                    $("#details").val(''); //内容 
                },
                //timeFormat: 'HH:mm{ - HH:mm}',
                buttons: {
                    "删除": function () {
                        var msg = window.confirm("警告：确定要删除记录，删除后无法恢复！");
                        if (msg) {
                            var para = {id:event.id};
                            $.ajax({
                                type: "POST", //使用post方法访问后台
                                url: Apps.ContextPath + "action/client/invoke?transcode=PROGRAMME_DEL",
                                data: para, //要发送的数据
                                success: function (data) {
                                    //对话框里面的数据提交完成，data为操作结果
                                    $('#calendar').fullCalendar('removeEvents', event.id);
                                }
                            });
                        }
                        $(this).dialog("close");
                    },
                    "修改": function () {
                    Vai();
                    var title = $("#title").val();
                    var start = $("#start").val();
                    var end = $("#end").val();
                    var id = $("#id").val();
                    var description = $("#details").val();
                        var schdata = { title: title,description:description,start:start,end: end, id:id };
                        $.ajax({
                            type: "POST", //使用post方法访问后台
                            url: Apps.ContextPath + "action/client/invoke?transcode=PROGRAMME_SAVE",
                            data: schdata, //要发送的数据
                            success: function (data) {
                                //对话框里面的数据提交完成，data为操作结果
                                event.title=title;
                                event.start=start;
                                event.end=end;
                                event.description=description;
                                event.id=id;
                                $('#calendar').fullCalendar('updateEvent', event);
                            }
                        });
                        $(this).dialog("close");
                    }
                }
            });
            $("#reservebox").dialog("open");
            return false;
        },
        events: []
    });


    //goto date function
    if ($.browser.msie) {
        $("#calendar .fc-header-right table td:eq(0)").before('<td><div class="ui-state-default ui-corner-left ui-corner-right" style="border-right:0px;padding:1px 3px 2px;" ><input type="text" id="selecteddate" size="10" style="padding:0px;"></div></td><td><div class="ui-state-default ui-corner-left ui-corner-right"><a><span id="selectdate" class="ui-icon ui-icon-search">goto</span></a></div></td><td><span class="fc-header-space"></span></td>');
    } else {
        $("#calendar .fc-header-right table td:eq(0)").before('<td><div class="ui-state-default ui-corner-left ui-corner-right" style="border-right:0px;padding:3px 2px 4px;" ><input type="text" id="selecteddate" size="10" style="padding:0px;"></div></td><td><div class="ui-state-default ui-corner-left ui-corner-right"><a><span id="selectdate" class="ui-icon ui-icon-search">goto</span></a></div></td><td><span class="fc-header-space"></span></td>');
    }
    $("#calendar .fc-header-left table td:eq(0)").before('<td><div class="ui-state-default ui-corner-left ui-corner-right" id="selectmeeting"><a><span id="selectdate" class="ui-icon ui-icon-search" style="float: left;padding-left: 5px; padding-top:1px"></span>meeting room</a></div></td><td><span class="fc-header-space"></span></td>');


    //$(".fc-sat").css('backgroundColor','#c4e1ff');//这个是周六的TD
    $(".fc-sun").css('backgroundColor','#c4e1ff');//这个是周日的TD
});


 function Vai(){
if($("#title").val()==""){
alert("日历标题不能为空");
return false;
}
if($("#start").val()==""){
alert("日程开始不能为空");
return false;
}
if($("#end").val()==""){
alert("日程结束不能为空");
return false;
}
if($("#details").val()==""){
alert("计划内容不能为空");
return false;
}
if(!isStartEndDate($("#start").val(),$("#end").val())){
return false;
}
return true;
 }
 
 function isStartEndDate(startDate,endDate){   
     var starttime = new Date(Date.parse(startDate));  
     var endtime = new Date(Date.parse(endDate));  
     if (starttime.getTime() > endtime.getTime()) {  
         alert("计划结束时间不得小于任务开始时间。");  
         return false;  
     }  
     return true;
 }   
</script>
html部分：
<body style="overflow: auto;">
<div id="wrap" region="center" border="false" style="height:405px;overflow:auto;" >
   <div style="height:100%;overflow:auto;">
    <div id='calendar' align="center">
    </div>
    </div>
    <div style="display: none" id="reservebox" title="日程管理">
       <form id="reserveformID" method="post">
       <table cellpadding="0" cellspacing="6" id="form_table">
<tr id="idtr" class="noFeedback">
<td>日程编号：</td>
<td style="text-align:left">
<input style="width: 180px;height: 24px;" id="id" type="text" name="id" required="true" disabled="true"/>
<b class="star">*</b>
</td>
</tr>
<tr class="noFeedback">
<td>日程标题: </td>
<td style="text-align:left">
<input id="title" name='title' required="true"  style="width:150px" />
<b class="star">*</b>
</td>
</tr>
<tr class="noFeedback">
<td>开始日期：</td>
<td style="text-align:left">
<input id="start" name="start" required="false" class="Wdate" οnfοcus="WdatePicker({dateFmt:'yyyy/MM/dd HH:mm:ss',readOnly:true})" style="width:180px" /> 
<b class="star">*</b>
</td>
</td>
</tr>
<tr class="noFeedback">
<td>结束日期：</td>
<td style="text-align:left">
<input id="end"  name="end" required="false" class="Wdate" οnfοcus="WdatePicker({dateFmt:'yyyy/MM/dd HH:mm:ss',readOnly:true})" style="width:180px" /> 
<b class="star">*</b></td>
</td>
</td>
</tr>
<tr class="noFeedback">
<td>计划内容：</td>
<td style="text-align:left" colspan="5">
<textarea id="details" name="details" data-options="required:true" required="true" style="height:70px; width:447px;"> </textarea><b class="star">*</b>
</td>
</tr>
</table>
       </form>
  </div>
</div>
</body>
</html>