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 > 0)
            {
                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    temp1 = temp1 + dt.Rows[i][0] + ",";
                    temp2 = temp2 + dt.Rows[i][1] + ",";
                    temp3 = temp3 + dt.Rows[i][2] + ",";
                }
                temp1 = temp1.Substring(0, temp1.Length - 1);
                temp2 = temp2.Substring(0, temp2.Length - 1);
                temp3 = temp3.Substring(0, temp3.Length - 1);
            }
            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);