fullCalendar插件的使用简单教程

转载请标明出处：
原文首发于： http://www.zhangruibin.com
本文出自 RebornChang的博客

厚颜打广告

亲，博主的微信公众号

‘程序员小圈圈’开始持续更新了哟~~

关注公众号回复 fullCalendar 或者 full 即可获取下载链接自行下载呦，省的等博主手动发送哟~~

还能不公开邮箱哟~~

长按图片识别二维码或者微信扫描二维码或者直接搜索名字 ‘CXYXQQ’ 即可关注本公众号哟~~

不只是有技术哟~~

还可以学下教育知识以及消遣娱乐哟~~

求关注哟~~

有好的文章可以联系投稿哟~

（追加于：2019-08-16）)

正文开始

最近项目中想实现一个基于日历的事件提醒,百度众多资源后选定使用fullCalendar进行实现,那首先来说下fullCalendar的官网:https://fullcalendar.io/在这上面有简单的demo以及API,但是是英文的,那么英文不太好的朋友可以选择翻译或者来看这个中文版的API:http://www.jb51.net/article/104841.htm,相对于官网的API,这个翻译的中文版有些简陋,但是基本的功能之类的也都能实现,模糊的地方直接去官网找相应的API查询编写就好了.
本文中使用的是jquery-1.4.2.min.js,所以在博主想使用layer.js进行弹出事件的控制,但是查阅下,JQuery1.8版本及以上的才支持,故…没用成,等有时间了调下UI试试,那么接下来…代码走起.
首先引入相关的js,以及css文件:

<!-- Jquery and Jquery UI -->

<script type="text/javascript" src="${ctx}/static/js/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="${ctx}/static/js/jquery-ui-1.8.6.custom.min.js"></script>

<script type="text/javascript" src="${ctx}/static/js/jquery-ui-timepicker-addon.js"></script>
<script type='text/javascript' src='${ctx}/static/js/fullcal/fullcalendar.js'></script>
<script type="text/javascript" src="${ctx}/static/js/formValidator/js/jquery.validationEngine-en.js"></script>
<script type="text/javascript" src="${ctx}/static/js/formValidator/js/jquery.validationEngine.js" ></script>


<link href="${ctx}/static/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/static/css/H-ui.min.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/static/css/H-ui.admin.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/static/css/style_w.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/static/lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/static/lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/static/css/bootstrapValidator.min.css" rel="stylesheet">
    <title>Title</title>
    <link rel="stylesheet" href="${ctx}/static/css/mainstructure.css">
    <link rel="stylesheet" href="${ctx}/static/css/maincontent.css">

    <link rel="stylesheet" href="${ctx}/static/css/redmond/jquery-ui-1.8.1.custom.css">
    <!-- Jquery and Jquery UI -->
    <link rel="stylesheet" href="${ctx}/static/js/formValidator/css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" />
    <!-- FullCalender -->
    <link rel='stylesheet' type='text/css' href='${ctx}/static/js/fullcal/css/fullcalendar.css' />

其中主要的是关于fullcalendar以及validationEngine,的文件,部分调用jquery-1.4.2.min.js,UI用的是JQueryUI.那么接下来说下部分代码片的使用:
首先是日历的初始化,声明日历位置,然后对其进行初始化,因为我建立的日历事件是由开始时间,结束时间,事件类型,创建人,重复周数,标题,内容等字段组成,所以在进行日历的表层展示数据的时候进行展示的只有:创建人,标题,以及事件类型:
下面是效果图

<div id=calendar></div>

 $('#calendar').fullCalendar({
            header:{
                right: 'prev,next today',
                center: 'title',
                left: 'month,agendaWeek,agendaDay'
            },
            theme: true,
            editable: true,
            allDaySlot : false,
            eventLimit: true,
            events:  function(start, end ,  callback){

                var now = new Date();
                //初始化参数
                var name = "songyuan";
                var title = "";
                var content = "";
                var noteType = "";
                    //alert("进入到查询日程的方法里.内部")
                    $.ajax({
                        type : "post",
                        url : "${ctx}/memo/getNotepad",
                        success : function(data) {
                            var events = [];
                            //alert("进入到events内部")
                            $.each(data,function (key,value) {
                                var noteType ="";
                                if (value.noteType==1){
                                    noteType = "工作";
                                }else if (value.noteType==2){
                                    noteType = "生活";
                                }else if (value.noteType==3){
                                    noteType = "家庭";
                                }else if (value.noteType==4){
                                    noteType = "私密";
                                }else {
                                    noteType = "其他";
                                }
                                events.push({
                                    sid: 2,
                                    uid: 3,
                                    title: '记事簿',
                                    start: value.starTime,
                                    end: value.endTime,
                                    fullname: value.name,
                                    confname: noteType,
                                    confshortname: 'M1',
                                    confcolor: '#ff3f3f',
                                    confid: value.noteType,
                                    allDay: false,
                                    topic: value.title,
                                    description : value.content,
                                    id: value.id,
                                });
                            });
                            callback(events);
                        }
                    });
            },
            dayClick: function(date, allDay, jsEvent, view) {
                var selectdate = $.fullCalendar.formatDate(date, "yyyy-MM-dd");

                $( "#reservebox" ).dialog({
                    autoOpen: false,
                    height: 450,
                    width: 400,
                    title: '建立记事簿 ' + selectdate,
                    modal: true,
                    position: "center",
                    draggable: false,
                    beforeClose: function(event, ui) {
                        $.validationEngine.closePrompt("#thingsType");
                        $.validationEngine.closePrompt("#start");
                        $.validationEngine.closePrompt("#end");
                    },
                    buttons: {
                        "取消": function() {
                            $( this ).dialog( "close" );
                        },
                        "添加": function() {
                           // alert("这就是点击了reserve的方法")
                           /* if($("#reserveformID").validationEngine({returnIsValid:true})){*/
                                var startdatestr = $("#start").val();
                                var enddatestr = $("#end").val();
                                var confid = $("#thingsType").val();
                                var repweeks = $("#repweeks").val();
                                if(repweeks==null){
                                    repweeks=0;
                                }
                                var startdate =  $.fullCalendar.parseDate(selectdate+"T"+startdatestr);
                                var enddate =  $.fullCalendar.parseDate(selectdate+"T"+enddatestr);
                                var schdata = {startdate:startdate, enddate:enddate, confid:confid, repweeks:repweeks};
                                var title = $("#title").val();
                                var content = $("#details").val();
                                /*}*/
                            //alert("startdatestr=="+startdatestr+"enddatestr=="+enddatestr+"enddatestr=="+enddatestr+"confid=="+confid+"repweeks=="+repweeks+"startdate=="+startdate+"enddate=="+enddate+"schdata=="+schdata)
                            $.ajax({
                                type : "post",
                                data :{
                                    title : title,
                                    content : content,
                                    starTime : selectdate+" "+startdatestr+":00",
                                    endTime : selectdate+" "+enddatestr+":00",
                                    repeatWeeks :repweeks,
                                    thingsType : confid
                                },
                                url : "${ctx}/memo/addNotepad",
                                success : function(data) {
                                    //alert("添加数据完成"+data)
                                    //closewait();
                                    window.location.reload();
                                    //若执行成功的话，则隐藏进度条提示
                                    if (data != null && data != 'undefined'
                                        && data == 1) {
                                        layer.msg('记事本添加成功!', {icon: 6,time:1000});
                                        parent.flushParent();
                                        layer_close();
                                        window.location.reload();
                                    }else if (data == -1) {
                                        layer.msg('记事本名称已经存在!', {icon: 5,time:1000});
                                    }else if (data == 0) {
                                        layer.msg('很抱歉！添加失败!', {icon: 5,time:1000});
                                    }else{
                                        layer.msg('系统异常！请与系统管理员联系!', {icon: 5,time:1000});
                                    }
                                }
                            });
                        }
                    }
                });
                $( "#reservebox" ).dialog( "open" );
                return false;
            },
            timeFormat: 'HH:mm{ - HH:mm}',
            eventClick: function(event) {
                var fstart  = $.fullCalendar.formatDate(event.start, "yyyy/MM/dd HH:mm");
                var fend  = $.fullCalendar.formatDate(event.end, "HH:mm");
                var schdata = {sid:event.sid, deleted:1, uid:event.uid};

                $( "#reserveinfo" ).dialog({
                    autoOpen: false,
                    height: 280,
                    width: 400,
                    modal: true,
                    position: "center",
                    draggable: false,
                    buttons: {
                        "close": function() {
                            $( this ).dialog( "close" );
                        }
                    }
                });

                if(1==1||2==schdata.uid){
                    $("#reserveinfo").dialog("option", "buttons", {
                        "取消": function() {
                            $( this ).dialog( "close" );
                        },

                        "取消日程": function() {
                           // var answer = confirm("确定取消日程吗?");
                          /*  layer.confirm("确定取消日程吗?",{
                                btn: ['确定', '取消'] //按钮
                            },function () {
                                alert("进入到了confirm里面")
                            });*/
                            /*if(answer){*/
                             // alert("eventId===="+event.id)
                                $.ajax({
                                    type : "post",
                                    data :{
                                        id :event.id
                                    },
                                    url : "${ctx}/memo/cancleNotepad",
                                    success : function(data) {
                                        window.location.reload();
                                        //若执行成功的话，则隐藏进度条提示
                                        if (data != null && data != 'undefined'
                                            && data == 1) {
                                            layer.msg('记事本取消成功!', {icon: 6,time:1000});
                                            parent.flushParent();
                                            layer_close();
                                            window.location.reload();
                                        }else if (data == -1) {
                                            layer.msg('记事本名称已经存在!', {icon: 5,time:1000});
                                        }else if (data == 0) {
                                            layer.msg('很抱歉！添加失败!', {icon: 5,time:1000});
                                        }else{
                                            layer.msg('系统异常！请与系统管理