GetTimezoneOffset error??

[Tyler]

To begin using Kendo UI to work on a calendar, I first am beginning by pulling events from salesforce orgs and just displaying them on the scheduler. 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","EndTime":"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","EndTime":"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 jsonString, 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. 

[Peter Milchev]

Hello Tyler,

Usually the deserialization of the JSON string is done by the DataSource itself when reading from remote source, however the data option takes an array of objects. That means the result of JSON.parse() function, which should be an array of events, should be assigned to the data variable instead of a string. 

var data = JSON.parse('[{"Title":"meeting","TaskID":"00U410000059ZjbEAE","StartTimezone":"Etc/UTC","Start":"2017-01-26","RecurrenceRule":null,"RecurrenceId":null,"RecurrenceException":null,"OwnerId":"005410000020eLnAAI","IsAllDay":true,"EndTimezone":"Etc/UTC","EndTime":"2017-01-27","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","EndTime":"2017-01-26","Description":"a meeting"}]');

Here is an article with similar scenario: Not displaying json data.

Also, please keep in mind that the properties in the schema are case sensitive, for example "TaskId" and "TaskID" are different and using the wrong casing might prevent the proper rendering of the events. 

Regards,
Peter Milchev
Telerik by Progress