将数据绑定到 Kendo ui 调度程序答案

【问题标题】：Binding Data to Kendo ui Scheduler将数据绑定到 Kendo ui 调度程序
【发布时间】：2014-04-16 00:19:11
【问题描述】：

我已经设法让 Kendo UI 调度程序在添加资源、创建新事件和保存新事件方面工作。但是我无法从 asp.net web api 获取数据并显示它。有人可以提供一个如何将其绑定到以下数据的示例：

[{"Client":{"ID":1,"Name":"Ford Motor Company","IsActive":true,"DisplayColor":null},"ID":7,"StartDateTime":"2014-04-14T11:00:00","EndDateTime":"2014-04-14T11:30:00","Title":"sdfsdf","Description":"","IsAllDay":false,"Resources":[{"Name":"Eric Longsdorf","ID":1,"IsActive":true,"PhoneNumber":null}],"EquipmentItems":[{"ID":1,"Description":"Truck # 1","IsActive":true,"Status":1}]},{"Client":{"ID":1,"Name":"Ford Motor Company","IsActive":true,"DisplayColor":null},"ID":8,"StartDateTime":"2014-04-14T11:00:00","EndDateTime":"2014-04-14T11:30:00","Title":"Test","Description":"Thee","IsAllDay":false,"Resources":[{"Name":"Eric Longsdorf","ID":1,"IsActive":true,"PhoneNumber":null}],"EquipmentItems":[{"ID":1,"Description":"Truck # 1","IsActive":true,"Status":1}]},{"Client":{"ID":1,"Name":"Ford Motor Company","IsActive":true,"DisplayColor":null},"ID":9,"StartDateTime":"2014-04-14T11:00:00","EndDateTime":"2014-04-14T11:30:00","Title":"yrtyr","Description":"dfg","IsAllDay":false,"Resources":[{"Name":"Eric Longsdorf","ID":1,"IsActive":true,"PhoneNumber":null},{"Name":"Jim Smith","ID":3,"IsActive":true,"PhoneNumber":null}],"EquipmentItems":[{"ID":1,"Description":"Truck # 1","IsActive":true,"Status":1},{"ID":3,"Description":"Vacuum 26","IsActive":true,"Status":1}]},{"Client":{"ID":1,"Name":"Ford Motor Company","IsActive":true,"DisplayColor":null},"ID":10,"StartDateTime":"2014-04-14T11:00:00","EndDateTime":"2014-04-14T11:30:00","Title":"","Description":"","IsAllDay":false,"Resources":[{"Name":"Eric Longsdorf","ID":1,"IsActive":true,"PhoneNumber":null}],"EquipmentItems":[{"ID":1,"Description":"Truck # 1","IsActive":true,"Status":1},{"ID":2,"Description":"Truck # 2","IsActive":true,"Status":3}]},{"Client":{"ID":1,"Name":"Ford Motor Company","IsActive":true,"DisplayColor":null},"ID":11,"StartDateTime":"2014-04-14T11:30:00","EndDateTime":"2014-04-14T12:00:00","Title":"fgdfg","Description":"dfg","IsAllDay":false,"Resources":[{"Name":"Eric Longsdorf","ID":1,"IsActive":true,"PhoneNumber":null}],"EquipmentItems":[{"ID":2,"Description":"Truck # 2","IsActive":true,"Status":3},{"ID":1,"Description":"Truck # 1","IsActive":true,"Status":1}]},{"Client":{"ID":1,"Name":"Ford Motor Company","IsActive":true,"DisplayColor":null},"ID":1008,"StartDateTime":"2014-04-14T11:00:00","EndDateTime":"2014-04-14T11:30:00","Title":"sdfsd","Description":"sdf","IsAllDay":false,"Resources":[{"Name":"Eric Longsdorf","ID":1,"IsActive":true,"PhoneNumber":null}],"EquipmentItems":[{"ID":1,"Description":"Truck # 1","IsActive":true,"Status":1},{"ID":2,"Description":"Truck # 2","IsActive":true,"Status":3}]},{"Client":{"ID":1,"Name":"Ford Motor Company","IsActive":true,"DisplayColor":null},"ID":1009,"StartDateTime":"2014-04-14T11:00:00","EndDateTime":"2014-04-14T11:30:00","Title":"sdfsd","Description":"sdf","IsAllDay":false,"Resources":[{"Name":"Eric Longsdorf","ID":1,"IsActive":true,"PhoneNumber":null}],"EquipmentItems":[{"ID":2,"Description":"Truck # 2","IsActive":true,"Status":3},{"ID":1,"Description":"Truck # 1","IsActive":true,"Status":1}]}]

【问题讨论】：

标签： kendo-ui scheduler kendo-scheduler

【解决方案1】：

请尝试使用以下代码 sn-p。

<div id="scheduler">
</div>

<script>

    var test = '[{ "Client": { "ID": 1, "Name": "Ford Motor Company", "IsActive": true, "DisplayColor": null }, "ID": 7, "StartDateTime": "2014-04-15T11:00:00", "EndDateTime": "2014-04-15T11:30:00", "Title": "First Meeting", "Description": "", "IsAllDay": false, "Resources": [{ "Name": "Eric Longsdorf", "ID": 1, "IsActive": true, "PhoneNumber": null}], "EquipmentItems": [{ "ID": 1, "Description": "Truck # 1", "IsActive": true, "Status": 1}] }, { "Client": { "ID": 1, "Name": "Ford Motor Company", "IsActive": true, "DisplayColor": null }, "ID": 8, "StartDateTime": "2014-04-14T11:00:00", "EndDateTime": "2014-04-14T11:30:00", "Title": "Test", "Description": "Thee", "IsAllDay": false, "Resources": [{ "Name": "Eric Longsdorf", "ID": 1, "IsActive": true, "PhoneNumber": null}], "EquipmentItems": [{ "ID": 1, "Description": "Truck # 1", "IsActive": true, "Status": 1}] }, { "Client": { "ID": 1, "Name": "Ford Motor Company", "IsActive": true, "DisplayColor": null }, "ID": 9, "StartDateTime": "2014-04-14T11:00:00", "EndDateTime": "2014-04-14T11:30:00", "Title": "yrtyr", "Description": "dfg", "IsAllDay": false, "Resources": [{ "Name": "Eric Longsdorf", "ID": 1, "IsActive": true, "PhoneNumber": null }, { "Name": "Jim Smith", "ID": 3, "IsActive": true, "PhoneNumber": null}], "EquipmentItems": [{ "ID": 1, "Description": "Truck # 1", "IsActive": true, "Status": 1 }, { "ID": 3, "Description": "Vacuum 26", "IsActive": true, "Status": 1}] }, { "Client": { "ID": 1, "Name": "Ford Motor Company", "IsActive": true, "DisplayColor": null }, "ID": 10, "StartDateTime": "2014-04-14T11:00:00", "EndDateTime": "2014-04-14T11:30:00", "Title": "", "Description": "", "IsAllDay": false, "Resources": [{ "Name": "Eric Longsdorf", "ID": 1, "IsActive": true, "PhoneNumber": null}], "EquipmentItems": [{ "ID": 1, "Description": "Truck # 1", "IsActive": true, "Status": 1 }, { "ID": 2, "Description": "Truck # 2", "IsActive": true, "Status": 3}] }, { "Client": { "ID": 1, "Name": "Ford Motor Company", "IsActive": true, "DisplayColor": null }, "ID": 11, "StartDateTime": "2014-04-14T11:30:00", "EndDateTime": "2014-04-14T12:00:00", "Title": "fgdfg", "Description": "dfg", "IsAllDay": false, "Resources": [{ "Name": "Eric Longsdorf", "ID": 1, "IsActive": true, "PhoneNumber": null}], "EquipmentItems": [{ "ID": 2, "Description": "Truck # 2", "IsActive": true, "Status": 3 }, { "ID": 1, "Description": "Truck # 1", "IsActive": true, "Status": 1}] }, { "Client": { "ID": 1, "Name": "Ford Motor Company", "IsActive": true, "DisplayColor": null }, "ID": 1008, "StartDateTime": "2014-04-14T11:00:00", "EndDateTime": "2014-04-14T11:30:00", "Title": "sdfsd", "Description": "sdf", "IsAllDay": false, "Resources": [{ "Name": "Eric Longsdorf", "ID": 1, "IsActive": true, "PhoneNumber": null}], "EquipmentItems": [{ "ID": 1, "Description": "Truck # 1", "IsActive": true, "Status": 1 }, { "ID": 2, "Description": "Truck # 2", "IsActive": true, "Status": 3}] }, { "Client": { "ID": 1, "Name": "Ford Motor Company", "IsActive": true, "DisplayColor": null }, "ID": 1009, "StartDateTime": "2014-04-14T11:00:00", "EndDateTime": "2014-04-14T11:30:00", "Title": "sdfsd", "Description": "sdf", "IsAllDay": false, "Resources": [{ "Name": "Eric Longsdorf", "ID": 1, "IsActive": true, "PhoneNumber": null}], "EquipmentItems": [{ "ID": 2, "Description": "Truck # 2", "IsActive": true, "Status": 3 }, { "ID": 1, "Description": "Truck # 1", "IsActive": true, "Status": 1}]}]';

    $(function () {
        $("#scheduler").kendoScheduler({
            height: 600,
            views: [
        "day",
        { type: "workWeek", selected: true },
        "week",
        "month",
        "agenda"
    ],
            timezone: "Etc/UTC",
            dataSource: {
                data: eval(test),
                schema: {
                    model: {
                        id: "ID",
                        fields: {
                            taskId: { from: "ID", type: "number" },
                            title: { from: "Title" },
                            start: { type: "date", from: "StartDateTime" },
                            end: { type: "date", from: "EndDateTime" },
                            //startTimezone: { from: "StartTimezone" },
                            //endTimezone: { from: "EndTimezone" },
                            description: { from: "Description" },
                            //recurrenceId: { from: "RecurrenceID" },
                            //recurrenceRule: { from: "RecurrenceRule" },
                            //recurrenceException: { from: "RecurrenceException" },
                            //ownerId: { from: "OwnerID", defaultValue: 1 },
                            isAllDay: { type: "boolean", from: "IsAllDay" }
                        }
                    }
                }
            }
        });
    });
</script>

Demo

如果有任何问题，请告诉我。

【讨论】：