Asp.Net利用Ajax实现Fullcalendar动态获取更新events并修改日程单元格背景颜色

先上效果图



我就不对Fullcalendar做过多阐述了，直接进入正题

1.先说说数据填充 后台aspx.cs代码



后台获得数据后把要展示的数据拼接成一个json数组传回页面，就是Fullcalendar中的events数据源

拼接字符串完整代码：“{\"url\":\"javascript:aClick(1," + dt.Rows[i]["test_id"] + "," + dt1.Rows[i]["class_id"] + ")\",\"className\":\"aaa\",\"title\":\"" + dt.Rows[i]["test_name"].ToString() + "\",\"start\":\"" + DateTime.Parse(dt.Rows[i]["test_date"].ToString()).ToString("yyyy-MM-dd")
+ "\"}”

aspx页面代码：



页面使用的是ajax获取，这里的data就是后台拼接的df，data编译之后就获得了我们的events数据源，完成页面数据填充

2.给日程单元格加上背景颜色



这里同样是运用js代码实现的，大概思路：获取月视图所有td标签，进行循环，当该单元格的时间与数据源的start匹配时，给其添加背景颜色。

3.更新events数据源



后记：讲解的不是很详尽，希望在这里能够帮到大家。大家有什么疑问可以留言，博主一定精心解答。