javascript - Kendo-UI 调度程序 'GetTimezoneOffset' 错误

Question

要开始使用 Kendo UI 处理日历，我首先从 Salesforce 组织中提取事件并将其显示在日程表上。但是，我受到“无法读取未定义错误的属性‘getTimezoneOffset’的困扰，正在寻求帮助。我的 JS 是:

var data = '{!jsonString}';
       var scheduler = $('#scheduler').kendoScheduler({
       date: new Date(),
       startTime: new Date(),
       height: 700,
       timezone: "Etc/UTC",
       views: [
          {type: "week", selected: true},
          "week",
          "month",
          "agenda"
       ],
       dataSource: {
          batch: true,
          transport: {
              read: function(e){
                  console.log(data);
                  e.success(data);
              },
              update: {
                  url: "http://demos.telerik.com/kendo-ui/service/tasks/update",
                  dataType: "jsonp"
              },
              create: {
                  url: "http://demos.telerik.com/kendo-ui/service/tasks/create",
                  dataType: "jsonp"
              },
              destroy: {
                  url: "http://demos.telerik.com/kendo-ui/service/tasks/destroy",
                  dataType: "jsonp"
              },
              parameterMap: function(options, operation) {
                  if (operation !== "read" && options.models) {
                      return {models: kendo.stringify(options.models)};
                  }
              }
          },
          schema: {
              model: {
                  id: "OwnerId",
                  fields: {
                       taskId: { from: "TaskID" },
                       title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                       start: { type: "date", from: "Start" },
                       end: { type: "date", from: "EndTime" },
                       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" }
                  }
              }
          }
      }
                        //});
  });

数据变量是 JSON，格式为:

[{"Title":"meeting","TaskId":"00U410000059ZjbEAE","StartTimezone":"Etc/UTC","Start":"2017-01-26", "RecurrenceRule":null, "RecurrenceId":null, "RecurrenceException":null, "OwnerId":"005410000020eLnAAI", "IsAllDay":false, "EndTimezone":"Etc/UTC", "End":"2017-01-26", "Description":"a meeting"},{"Title":"meeting", "TaskId":"00U410000059ZjcEAE", "StartTimezone":"Etc/UTC", "Start":"2017-01-26", "RecurrenceRule":null, "RecurrenceId":null, "RecurrenceException":null, "OwnerId":"005410000020eU9AAI", "IsAllDay":false, "EndTimezone":"Etc/UTC", "End":"2017-01-26", "Description":"a meeting"}, etc...}]

根据console.log(data)中的读取操作。我有一个 Controller ，它获取事件数组，然后 JSON.serializes 该数组(这是 JSON 字符串，用于数据访问)。

我不明白时区偏移的问题是什么，我所有的 JSON 条目数据都与教程架构的字段匹配，但它仍然不起作用...我只需要日历来显示当前的所有事件通过将此 JSON 传递给读取操作来打开它时存在。任何帮助将非常感激!谢谢。

这是我的 Controller :

global with sharing class CalendarData {

public List<Event> eventList{get;set;}
public String jsonString{get;set;}
public List<schedulerItem> correctedItems{get;set;}

public CalendarData(){
    String eventQuery = 'SELECT ActivityDate,ActivityDateTime,CreatedById,Description,DurationInMinutes,EventSubtype,IsAllDayEvent,Location,OwnerId,EndDateTime,StartDateTime,Subject FROM Event';
    eventList = Database.query(eventQuery);
    correctedItems = itemList(eventList);
    system.debug(correctedItems);
    jsonString = JSON.serialize(correctedItems);
    jsonString = jsonString.replace('"EndTime"', '"End"');
}

public List<schedulerItem> itemList(List<Event> events){
        Integer i = 0;
        system.debug(events);
        List<schedulerItem> kendoEvents = new List<schedulerItem>();
        schedulerItem item = new schedulerItem();
        for(i = 0; i < events.size(); i++){
            item.Description = events[i].Description;
            Datetime dt = events[i].EndDateTime;
            item.EndTime = dt.date();
            dt = events[i].StartDateTime;
            item.Start = dt.date();
            item.EndTimezone = 'Etc/UTC';
    //public String id;
            item.IsAllDay = events[i].IsAllDayEvent;
            item.RecurrenceException = null; 
            item.RecurrenceId = null;
            item.RecurrenceRule = null;
            item.StartTimezone = 'Etc/UTC';
            item.Title = events[i].Subject;
            item.TaskId = events[i].Id;
            item.OwnerId = events[i].OwnerId;
            system.debug(item);
            kendoEvents.add(item);

            item = new schedulerItem();
        }
        return kendoEvents;
    }

public class schedulerItem{
    public String Description;
    public Date EndTime;
    public Date Start;
    public String EndTimezone;
    //public String id;
    public Boolean IsAllDay;
    public String RecurrenceException; 
    public String RecurrenceId;
    public String RecurrenceRule;
    public String StartTimezone;
    public String Title;
    public String TaskId;
    public String OwnerId;

}
}

我获取事件列表，然后使用自定义类创建一个新列表，将原始事件列表中的数据绑定(bind)到数据名称与教程中的架构模型名称匹配的事件。我还将所有“EndTime”替换为“End”。

找到了读取我的事件的解决方案:

var data = '{!jsonString}';
                var dataList = JSON.parse(data);
                function getNewEvents() {
                    var eventList = [];
                    for(var i = 0; i < dataList.length; i++){
                        //console.log("DataList Again: " + dataList[i]);
                        var kendoEvent = new kendo.data.SchedulerEvent({
                            id: i,
                            taskId: dataList[i].TaskId,
                            title: dataList[i].Title,
                            start: new Date(dataList[i].Start),
                            end: new Date(dataList[i].End),
                            startTimezone: dataList[i].StartTimezone,
                            endTimezone: dataList[i].EndTimezone,
                            description: dataList[i].Description,
                            recurrenceId: dataList[i].RecurrenceId,
                            recurrenceRule: dataList[i].RecurrenceRule,
                            recurrenceException: dataList[i].RecurrenceException,
                            ownerId: dataList[i].OwnerId,
                            isAllDay: dataList[i].IsAllDay
                        });
                        eventList.push(kendoEvent);
                    }
                    return eventList;
                }
                eventData = getNewEvents();

我获取了返回的 JSON 数组，然后将其解析回对象数组，然后创建了一个实际 kendo.data.SchedulerEvents 的新数组，并用正确的名称填充了所有字段。然后，在数据源中的读取操作中，我执行了以下操作，而不是 URL 和数据类型:

read: function(e){
    e.success(data);
}

其中数据是我的剑道调度程序事件数组。现在，我的日程安排显示了我的组织中的所有事件。现在我需要进行更新、销毁和创建操作:)。已接受答案的评论中提供的链接帮助我通过必要的文档找到了此解决方案。

Answer 1

正如我在评论中提到的，此问题可能还有其他原因，但查看代码，其中一个错误是模型配置不正确以及读取配置不正确

JSON 中没有传入字段 EndTime，而是 End。

将 EndTime 更改为 End 与传入 JSON 的字段声明相匹配

{"Title":"meeting","IsAllDay":false,"EndTimezone":"Etc/UTC","End":"2017-01-26", "Description":"a meeting"}

这是字段声明

    fields: {
                           taskId: { from: "TaskID" },
                           title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                           start: { type: "date", from: "Start" },
 // problem was here there is no EndTime as mentioned in the given code sample above .
// changed to End as it is in the incoming JSON
                           end: { type: "date", from: "End" },
                           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" }
                      }

有关更多详细信息，请参阅 telerik 网站上的这个基本示例。

http://demos.telerik.com/kendo-ui/scheduler/index

正确的读取配置

请使用此阅读我不确定您的 Controller 是否返回正确的数据并且您的绑定(bind)不正确

read: { url: "demos.telerik.com/kendo-ui/service/tasks";, dataType: "jsonp" }