FullCalendar不会显示数据库事件 [英] FullCalendar won't display db events
问题描述
我 FullCalendar （1.5.1版）在 .NET Web窗体应用程序完美的工作。我试图部署在我的新 asp.net-MVC 应用程序版本1.5.3。出于某种原因，我不能让动态提供时，事件显示。
我已经有超过每个事件完全控制（颜色，边框，属性等），我传递一个 JSON 字符串的所有相关细节。如果我手动输入 JSON 成果转化为事件：它显示如预期。但是，当我尝试动态设置它，我什么也没有。
有关简单的测试，我硬$ C $光盘在呼叫为数据的开始和结束时期，如下所述：
$。阿贾克斯（{
网址：使用rootUrl +../Schedule/GetCal?&start=1341129400&end=1344146400
输入：POST
}）。成功（功能（数据）{
$（'＃日历'）。fullCalendar（{
标题：{
左：'preV，今天下一个'，
中心：'标题'，
右：一个月，basicWeek，basicDay
}，
titleFormat：{天：''}，
默认视图：_thisView，
事件：[数据]
}）;
下面是数据复制的值从Chrome中：
{id:\"33910A42-C5F0-42FA-AB36-C315BDDAF964\",projectId:\"33910A42-C5F0-42FA-AB36-C315BDDAF964\",title:\"Thanksgiving点 - Buster\",start:\"2012-07-28\",end:\"\",allDay:\"true\",type:\"goal\",textColor:\"white\",backgroundColor:\"green\",borderColor:\"black\",crew:\"\"}
如果我采取相同的信息和原来的呼叫更改为以下内容：
$阿贾克斯（{
网址：使用rootUrl +../Schedule/GetCal?&start=1341129400&end=1344146400
输入：POST
}）。成功（功能（数据）{
$（'＃日历'）。fullCalendar（{
标题：{
左：'preV，今天下一个'，
中心：'标题'，
右：一个月，basicWeek，basicDay
}，
titleFormat：{天：''}，
默认视图：_thisView，
事件：
{id:\"5BFAA9C3-9437-49B0-A657-5DA47CDEA409\",projectId:\"5BFAA9C3-9437-49B0-A657-5DA47CDEA409\",title:\"Orem城市停车Lot\",start:\"2012-07-11\",end:\"\",allDay:\"true\",type:\"goal\",textColor:\"white\",backgroundColor:\"green\",borderColor:\"black\",crew:\"\"},
{id:\"33910A42-C5F0-42FA-AB36-C315BDDAF964\",projectId:\"33910A42-C5F0-42FA-AB36-C315BDDAF964\",title:\"Thanksgiving点 - Buster\",start:\"2012-07-28\",end:\"\",allDay:\"true\",type:\"goal\",textColor:\"white\",backgroundColor:\"green\",borderColor:\"black\",crew:\"\"}
]
}）;
如预期显示的一切。
手动设置的时候，而不是动态设置为什么它的工作？我缺少什么？
我终于想通了。警报（数据）是非常有益的。
在从数据库中获取数据，我需要把它格式化为一个数组。
这文章是为了使其工作约翰的关键McBlog 。
而不是序列化的数据表到 JSON 字符串，我把它变成一个清单＆LT;＆GT; 并转换 .ToArray（）是这样的：
的DataTable projSchDt = BLL.Project.getProjectsSchedule（ccUser.CompanyId，开始，结束，ccUser.Id，真正的）;
VAR的事件=新的List＆LT; BLL.Event＆GT;（）;的foreach（在projSchDt.Rows的DataRow行）
{
events.Add（新BLL.Event（）{
ID =行[ID]的ToString（）
专案编号=行[专案编号]。的ToString（）
标题=行[称号]。的ToString（）
启动=行[开始]的ToString（）
最终=行[结束。toString（）方法，
allDay = Convert.ToBoolean（行[allDay]）
类型=行[型]的ToString（）
文字颜色=行[文字颜色]。的ToString（）
的backgroundColor =行[的backgroundColor]。的ToString（）
BORDERCOLOR =行[BORDERCOLOR]。的ToString（）
船员=行[剧组]。的ToString（）
}）;
}
变种行= events.ToArray（）;
返回JSON（行，JsonRequestBehavior.AllowGet）;
Bll.Event 只是一个自定义类来定义一个事件。
我修改了JS是这样的：
$（'＃日历'）。fullCalendar（{
标题：{
左：'preV，今天下一个'，
中心：'标题'，
右：一个月，basicWeek，basicDay
}，
titleFormat：{天：''}，
默认视图：_thisView，
事件：使用rootUrl +../Schedule/GetCal
}）;
所有作品，现在的预期。
I have FullCalendar (version 1.5.1) working perfectly in a .net webform application. I am trying to deploy version 1.5.3 in my new asp.net-mvc application. For some reason, I cannot get the events to show when provided dynamically.
I have to have full control (color, border, attributes, etc) over each event and I am passing a JSON string with all the relevant details. If I manually enter the JSON results into events: it displays as expected. But when I try to dynamically set it, I get nothing.
For simple testing, I hard coded the start and end periods in the call for the data as described below:
$.ajax({
url: rootUrl + "../Schedule/GetCal?&start=1341129400&end=1344146400",
type: 'POST'
}).success(function(data){
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
titleFormat: { day: '' },
defaultView: _thisView,
events: [data]
});
Below is the copied value for data from Chrome:
{id:"5BFAA9C3-9437-49B0-A657-5DA47CDEA409",projectId:"5BFAA9C3-9437-49B0-A657-5DA47CDEA409",title:"Orem City Parking Lot",start:"2012-07-11",end:"",allDay:"true",type:"goal",textColor:"white",backgroundColor:"green",borderColor:"black",crew:""},
{id:"33910A42-C5F0-42FA-AB36-C315BDDAF964",projectId:"33910A42-C5F0-42FA-AB36-C315BDDAF964",title:"Thanksgiving Point - Buster",start:"2012-07-28",end:"",allDay:"true",type:"goal",textColor:"white",backgroundColor:"green",borderColor:"black",crew:""}
If I take that same information and change the original call to the following:
$.ajax({
url: rootUrl + "../Schedule/GetCal?&start=1341129400&end=1344146400",
type: 'POST'
}).success(function(data){
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
titleFormat: { day: '' },
defaultView: _thisView,
events: [
{id:"5BFAA9C3-9437-49B0-A657-5DA47CDEA409",projectId:"5BFAA9C3-9437-49B0-A657-5DA47CDEA409",title:"Orem City Parking Lot",start:"2012-07-11",end:"",allDay:"true",type:"goal",textColor:"white",backgroundColor:"green",borderColor:"black",crew:""},
{id:"33910A42-C5F0-42FA-AB36-C315BDDAF964",projectId:"33910A42-C5F0-42FA-AB36-C315BDDAF964",title:"Thanksgiving Point - Buster",start:"2012-07-28",end:"",allDay:"true",type:"goal",textColor:"white",backgroundColor:"green",borderColor:"black",crew:""}
]
});
Everything displays as expected.
Why does it work when manually set, but not dynamically set? What am I missing?
I finally figured it out. alert(data) was very helpful.
When getting data from a db I need to format it into an array.
This article was crucial to making it work John's McBlog.
Instead of serializing the DataTable to a JSON string, I put it into a List<> and converted .ToArray() like this:
DataTable projSchDt = BLL.Project.getProjectsSchedule(ccUser.CompanyId, start, end, ccUser.Id, true);
var events = new List<BLL.Event>();
foreach (DataRow row in projSchDt.Rows)
{
events.Add(new BLL.Event(){
id = row["id"].ToString(),
projectId = row["projectId"].ToString(),
title = row["title"].ToString(),
start = row["start"].ToString(),
end = row["end"].ToString(),
allDay = Convert.ToBoolean(row["allDay"]),
type = row["type"].ToString(),
textColor = row["textColor"].ToString(),
backgroundColor = row["backgroundColor"].ToString(),
borderColor = row["borderColor"].ToString(),
crew = row["crew"].ToString()
});
}
var rows = events.ToArray();
return Json(rows, JsonRequestBehavior.AllowGet);
Bll.Event is just a custom class to define an event.
I modified the js like this:
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
titleFormat: { day: '' },
defaultView: _thisView,
events: rootUrl + "../Schedule/GetCal"
});
All works as expected now.
这篇关于FullCalendar不会显示数据库事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
