Jquery 记一次使用fullcalendar的使用记录

最近接了一个需求，把excel做的表格开发到系统里,本来想直接做成表格的形式，后来考虑到数据库中的表结构不好设计，最后决定做成日历的形式；

先上成品图

需要引用的js，fullcalendar官网可以下载

<script src="~/Content/Scripts/jquery.fullcalendar/lib/moment.min.js"></script>
<link href="~/Content/Scripts/jquery.fullcalendar/fullcalendar.css" rel="stylesheet" />
<script src="~/Content/Scripts/jquery.fullcalendar/fullcalendar.js"></script>

先贴上页面的代码

<script>
    function calender() {
        var eventData = new Array();
        var id = new Array();
        var start = new Array();
        var content = new Array();
        //ajax 获取ecevnt数据
        var durl = encodeURI('@Url.Action("GetEventData", "Plan")');
        $.ajax({
            type: "post",
            url: durl,
            async: false,
            success: function (msg) {
                var temp = msg.split("|");
                id = temp[0].split(",");
                start = temp[1].split(",");
                content = temp[2].split(",");
                for (var i = 0; i < id.length; i++) {
                    var TempObject = {};
                    TempObject["id"] = id[i];
                    TempObject["title"] = content[i];
                    TempObject["start"] = start[i];

                    eventData.push(TempObject);
                    alert(eventData[i].title);
                    //DataForMyChart2[i] = TempObject;
                    //TempObject = null;
                    //alert(DataForMyChart2[i].name);
                    //i++;
                }
            },
            error: function () {
                alert("出错了");
            }
        });

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,basicWeek,basicDay'
            },

            //defaultDate: '2017-05-12',
            navLinks: true, // can click day/week names to navigate views
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            today: ["今天"],
            buttonText: {
                today: '今天',
                month: '月',
                week: '周',
                day: '日',
                prev: '上一月',
                next: '下一月'
            },
            events: eventData,
            dayClick: function (date, allDay, jsEvent, view) {
                //alert(date);
                //新加event

                var obj = new Array();
                var reValue = window.showModalDialog('InsertPlan', obj, 'dialogWidth=400px;dialogHeight=200px;');
                if (reValue == undefined) {
                    return false;
                }
                //alert(moment(date).format('YYYY-MM-DD'));
                //alert($.fullCalendar.formatDate(date, "yyyy-MM-dd"));
                //event.start.format('YYYY-MM-DD')
                var durl = encodeURI('@Url.Action("InsertEventData", "Plan")?PlanContent=' + reValue + '&PlanDate=' + moment(date).format('YYYY-MM-DD'));
                $.ajax({
                    type: "post",
                    url: durl,
                    async: false,
                    success: function (msg) {
                        if (msg > 0) {
                            //var tempcon = document.getElementById("tempcon").value;
                            //top.frames[tabiframeId()].windowload();
                            //alert("成功添加" + msg + "条记录");
                            //calender();
                            top.frames[tabiframeId()].Replace()
                            //closeDialog();
                            //SettagValue();
                            //alert("成功");
                        }
                        else {
                            alert("出错了！");
                        }
                    },
                    error: function () {
                        alert("出错了");
                    }
                });
            },
            eventClick: function (event, jsEvent, view) {
                alert(event.title);
                var durl = encodeURI('@Url.Action("DeleteEventData", "Plan")?id='+event.id);
                $.ajax({
                    type: "post",
                    url: durl,
                    async: false,
                    success: function (msg) {
                        if (msg > 0) {
                            alert("成功");
                        }
                        else {
                            alert("出错了！");
                        }
                    },
                    error: function () {
                        alert("出错了");
                    }
                });
            }
        });
    }

    $(document).ready(function() {

        calender();

    });

</script>
<style>

    body {
        margin: 40px 10px;
        padding: 0;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        font-size: 14px;
    }

    #calendar {
        max-width: 900px;
        margin: 0 auto;
    }

</style>
<body>

    <div id='calendar'></div>

</body>

支持的数据格式

[
  {
    "title": "All Day Event",
    "start": "2017-05-01"
  },
  {
    "title": "Long Event",
    "start": "2017-05-07",
    "end": "2017-05-10"
  },
  {
    "id": "999",
    "title": "Repeating Event",
    "start": "2017-05-09T16:00:00-05:00"
  },
  {
    "id": "999",
    "title": "Repeating Event",
    "start": "2017-05-16T16:00:00-05:00"
  },
  {
    "title": "Conference",
    "start": "2017-05-11",
    "end": "2017-05-13"
  },
  {
    "title": "Meeting",
    "start": "2017-05-12T10:30:00-05:00",
    "end": "2017-05-12T12:30:00-05:00"
  },
  {
    "title": "Lunch",
    "start": "2017-05-12T12:00:00-05:00"
  },
  {
    "title": "Meeting",
    "start": "2017-05-12T14:30:00-05:00"
  },
  {
    "title": "Happy Hour",
    "start": "2017-05-12T17:30:00-05:00"
  },
  {
    "title": "Dinner",
    "start": "2017-05-12T20:00:00"
  },
  {
    "title": "Birthday Party",
    "start": "2017-05-13T07:00:00-05:00"
  },
  {
    "title": "Click for Google",
    "url": "http://google.com/",
    "start": "2017-05-28"
  }
]

后台c#获取string数据的方法

/// <summary>
        /// 提供calendar数据
        /// </summary>
        /// <returns>id1,id2|date1,date2|conten1,conten2</returns>
        public string GetEventData()
        {
            string sql = "select PlanID,Plandate,PlanContent from fy_plan where userid='" + ManageProvider.Provider.Current().UserId+"'";
            DataTable dt = PlanBll.GetDataTable(sql);
            string result = "";
            string temp1 = "";
            string temp2 = "";
            string temp3 = "";
            if (dt.Rows.Count > )
            {
                for (int i = ; i < dt.Rows.Count; i++)
                {
                    temp1 = temp1 + dt.Rows[i][] + ",";
                    temp2 = temp2 + dt.Rows[i][] + ",";
                    temp3 = temp3 + dt.Rows[i][] + ",";
                }
                temp1 = temp1.Substring(, temp1.Length - );
                temp2 = temp2.Substring(, temp2.Length - );
                temp3 = temp3.Substring(, temp3.Length - );
            }
            result = temp1 + "|" + temp2 + "|" + temp3;
            return result;
        }

最后，总结几点使用中遇到的难点

1、fullcalendar插件中dayClick方法的date参数转换成正确的格式：moment(date).format('YYYY-MM-DD')

2、在拼接前台的字符串的时候要小心，大部分报错基本都是格式错误，我自己也检查了很多次才发现问题

---------------------------------------------------------------------分割线20170818，记录下fullcalendar  ajax获取数据实时更新的方法

1、实现需求，点击上一月下一月时重新获取数据，页面不刷新

实现步骤：1.1在fullcalendar.js 中的上一月下一月点击事件中添加自己的获取数据方法：

prev: function () {
        //alert(11);
        var prevInfo = this.view.buildPrevDateProfile(this.currentDate);

        if (prevInfo.isValid) {
            this.currentDate = prevInfo.date;

            this.renderView();
            ChangMonth(prevInfo.date.toString());  //此处是新添加的获取数据方法，传递了日期参数

        }

    },

    next: function () {
        //alert(11);
        var nextInfo = this.view.buildNextDateProfile(this.currentDate);

        if (nextInfo.isValid) {
            this.currentDate = nextInfo.date;

            this.renderView();
            ChangMonth(nextInfo.date.toString());

        }

2.2  ChangMonth（）实现方法

function ChangMonth(date)
    {
        //alert(11);
        var eventData = new Array();
        var id = new Array();
        var start = new Array();
        var content = new Array();
        var color = new Array();
        //ajax 获取ecevnt数据
        var durl = encodeURI('@Url.Action("GetEventData", "Plan")?Date=' + date);
        $.ajax({
            type: "post",
            url: durl,
            async: false,
            success: function (msg) {
                if (msg == "|||") {
                    //没有数据的时候不做处理，不然分割的时候js会报错
                }
                else {
                    var temp = msg.split("|");
                    id = temp[0].split(",");
                    start = temp[1].split(",");
                    content = temp[2].split(",");
                    color = temp[3].split(",");
                    for (var i = 0; i < id.length; i++) {
                        var TempObject = {};
                        TempObject["id"] = id[i];
                        if (color[i] == "#36648B") {
                            TempObject["title"] = 1+" "+content[i];
                        }
                        else if (color[i] =="#388E8E")
                        {
                            TempObject["title"] = 2 + " " + content[i];

                        }
                        else if (color[i] == "#8B2252")
                        {
                            TempObject["title"] = 3 + " " + content[i];
                        }
                        else if (color[i] == "grey")
                        {
                            TempObject["title"] = 4 + " " + content[i];
                        }
                        else
                        {
                            TempObject["title"] = content[i];
                        }
                        TempObject["start"] = start[i];
                        TempObject["allDay"] = true;
                        TempObject["backgroundColor"] = color[i];
                        eventData.push(TempObject);
                        //alert(eventData[i].title);
                        //DataForMyChart2[i] = TempObject;
                        //TempObject = null;
                        //alert(DataForMyChart2[i].name);
                        //i++;
                    }
                }
            },
            error: function () {
                alert("出错了");
            }
        });
        //fullcalendart
        $('#calendar').fullCalendar('removeEvents');
        $('#calendar').fullCalendar('renderEvents', eventData, true);
        loadData();
    }

注意最后两句，这两句是重新绘制数据，第一句移除原来的数据，第二句重新添加新获取的数据

$('#calendar').fullCalendar('removeEvents');

$('#calendar').fullCalendar('renderEvents', eventData, true);