最近接了一个需求，把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);