Question

我有一个看起来像这样的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"}
];

我试图将它绑定到一个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为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")
});

为什么调度程序不像我的dataSource？

Answer 1

您遇到此问题的原因很少。

页面在您提供的图片中看起来是因为您指定了高度：100。删除此行kendo框架会自动处理它，您可以根据需要在以后指定它。
您的Json数组需要正确格式化。请参阅提供的代码中的代码段
数据源中的数据参数需要使用此数据解析它的javascript对象：JSON.parse（mockArr），
我注意到kendo不允许将字段中的start / end参数绑定到与使用due_date相同的名称，因此需要将其更改为
开始：{type：＆＃34; date＆＃34;，from：＆＃34; due_date＆＃34; }，结束：{type：＆＃34; date＆＃34;，from：＆＃34; due_date1＆＃34; }，

除此之外你的代码工作正常我已经测试过了。

控制台错误＆＃34;控制台吐出的Web小程序＆＃34; TypeError：e为null＆＃34;听起来特定于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>

Kendo Scheduler不会使用dataSource

1 个答案: