我有一个看起来像这样的 JSON 数组:
var mockArr = [
{activity: "That One Activity", due_date: "07/22/2016", address: "22 Jump Ln", id: "42"},
{activity: "That Other Activity", due_date: "07/25/2015", address: "123 Fake St", id: "43"}
];
我正在尝试将它绑定(bind)到一个 kendo Scheduler 小部件，它的配置如下:
$("#scheduler").kendoScheduler({
date: new Date(),
height: 100,
views: [
{type: "day"},
{type: "month", selected: true},
{type: "agenda", selectedDateFormat: "{0:ddd, M/dd/yyyy} - {1:ddd, M/dd/yyyy}"}
],
mobile: "phone",
timezone: "Etc/UTC",
allDaySlot:true,
editable: false,
dataSource: {
data: mockArr,
schema: {
model: {
id: "taskId",
fields: {
taskId: { from: "id", type: "number" },
title: { from: "activity" },
start: { type: "date", from: "due_date" },
end: {type: "date", from: "due_date"},
description: { from: "address" }
}
}
}
}
});
当我运行 web applet 时，控制台显示“TypeError:e is null”，我得到 a page that looks like this
但是当我用静态 SchedulerEvent 替换 mockArr 和引用模型时，我得到了一个工作调度程序，例如:
var event = new kendo.data.SchedulerEvent({
id: 1,
title: "test event",
start: new Date("2016/7/22"),
end: new Date("2016/7/22")
});
为什么调度器不喜欢我的数据源？
最佳答案
您遇到此问题的原因很少。
- 页面看起来像您提供的图像的原因是因为您指定了高度:100。删除此行 kendo 框架会自动处理它，您可以稍后根据需要指定它。
- 您的 Json 数组需要正确格式化。查看提供的代码中的片段
- 数据源中的数据参数需要一个 javascript 对象，您需要使用此 data:JSON.parse(mockArr) 解析它，
- 我注意到剑道不允许将字段中的开始/结束参数绑定(bind)到与您使用的 due_date 相同的名称，因此需要将其更改为
开始:{ type: "date", from: "due_date"}, end: { type: "date", from: "due_date1"},
除此之外你的代码工作正常我已经测试过了。
控制台错误“web applet the console spits out “TypeError: e is null”听起来是特定于 java 的，我假设你正在使用 java 并且这可能与 java 框架有关。
这是您的工作代码的实时版本。
导航到 Kendo UI online Editor并删除预先填充的代码并粘贴下面提供的代码片段。
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/scheduler/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.timezones.min.js"></script>
</head>
<body>
<div id="example">
<div id="scheduler"></div>
</div>
<script>
var mockArr ='[{"activity":"That One Activity","due_date":"07/22/2016","due_date1":"07/22/2016","address":"22 Jump Ln","id":"42"},{"activity": "That Other Activity", "due_date": "07/25/2016","due_date1":"07/25/2016","address": "123 Fake St", "id": "43"}]';
$("#scheduler").kendoScheduler({
date: new Date(),
views: [
{type: "day"},
{type: "month", selected: true},
{type: "agenda", selectedDateFormat: "{0:ddd, M/dd/yyyy} - {1:ddd, M/dd/yyyy}"}
],
allDaySlot:true,
editable: true,
dataSource: {
data:JSON.parse(mockArr),
schema: {
model: {
id: "taskId",
fields: {
taskId: { from: "id", type: "number" },
title: { from: "activity" },
start: { type: "date", from: "due_date" },
end: { type: "date", from: "due_date1" },
description: { from: "address" }
}
}
}
}
});
</script>
</body>
</html>
关于javascript - Kendo Scheduler 不会获取数据源，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38530649/