首页 > 代码库 > Jquery 记一次使用fullcalendar的使用记录
Jquery 记一次使用fullcalendar的使用记录
最近接了一个需求，把excel做的表格开发到系统里,本来想直接做成表格的形式，后来考虑到数据库中的表结构不好设计，最后决定做成日历的形式；
先上成品图
需要引用的js，fullcalendar官网可以下载
<script src="http://www.mamicode.com/~/Content/Scripts/jquery.fullcalendar/lib/moment.min.js"></script> <link href="http://www.mamicode.com/~/Content/Scripts/jquery.fullcalendar/fullcalendar.css" rel="stylesheet" /> <script src="http://www.mamicode.com/~/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、在拼接前台的字符串的时候要小心，大部分报错基本都是格式错误，我自己也检查了很多次才发现问题
Jquery 记一次使用fullcalendar的使用记录
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。