Kendo-UI Scheduler 'GetTimezoneOffset' Error

Question

To begin using Kendo UI to work on a calendar, I first am starting by pulling events from Salesforce org and just displaying them on the schedule. However, I am being plagued by "Cannot read property 'getTimezoneOffset' of undefined errors and am looking for help. My JS is:

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" }
                  }
              }
          }
      }
                        //});
  });

And the data variable is JSON in the format:

[{"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...}]

According to the console.log(data) in the read operation. I have a controller that gets an array of events, then JSON.serializes that array (which is JSON String, which data accesses).

I don't get what the issue with the timezone offset is, all my JSON entry data matches the fields of the tutorial schema and it still doesn't work... I just need the calendar to display all events that currently exist when it is opened by passing this JSON to the read operation. Any help would be incredibly appreciated! Thank you.

Here is my 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;

}
}

I get a list of events, then use a custom class to create a new list to bind data from the original events list to events with data names that match the schema model names from the tutorial. I also replace all "EndTime" with "End."

Found a solution to read my events:

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();

I took my returned JSON array, then parsed it back to just an array of objects, then created a new array of actual kendo.data.SchedulerEvents and filled in all fields with correct names. Then in my read operation in the data source, instead of the URL and datatype, I did:

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

Where data is my array of kendo scheduler events. Now, my schedule shows all the events in my org. Now I will need to work on the update, destroy, and create operations :). The links provided in the comments of the accepted answer helped me reach this solution with necessary documentation.

Answer 1

There can be other reason for this issue as i mentioned in comment but looking into the code one of the error is incorrect configuration of model as well incorrect read configuration

There is no incoming field in JSON as EndTime instead it is End .

Change the EndTime to End match the declaration of field with incoming JSON

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

Here is the Fields declaration

    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" }
                      }

For more details refer to this basic example on telerik website.

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

Correct Read Configuration

Please use this read I am not sure if your controller is return correct data and your binding is not correct

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