SchedulerDataSource altering start/end times to apply timeszone

[Grant]

Hi, 

Im creating a SchedulerDataSource using remote data, however the when the SDS gets the responed data its applying (I assume) some kind of timezone logic that is changing the times of the start and end dates. I do not want this, as the times are stored correctly in the Database being read. Please advise on how I can stop this from happening?

CODE:

var timePickerDataSource = new kendo.data.SchedulerDataSource({
  transport: {
    read: {
      data: {
        userId: 1,
        frequencyDays: "1,4,8,11,15,18,22,25"
      },
      dataType: "json",
      type: "GET",
      url: "/itd-boot-thymeleaf-demo/events/forSchedulerTimePicker"
    }
  },

  schema: {
    parse: function(e) {
      $(e).each(function(i,e) {
        console.debug("Schema.parse", "Event (Id:"+e.id + ", start: " + e.start + ", end: " + e.end + ")");
      })
      return e;
    }
  }
});

timePickerDataSource.fetch(function(){
  $(timePickerDataSource.data()).each(function(idx, event) {
    console.debug("SDS", "Event (Id:"+event.id + ", start: " + event.start + ", end: " + event.end + ")");
  });
});

My Server Response:
[{"id":1,"start":"2016-10-04T07:00:00.000Z","end":"2016-10-04T08:00:00.000Z","title":null,"userId":1,"companyId":1,"appointmentTypeId":1,"locationId":1},{"id":3,"start":"2016-10-04T11:00:00.000Z","end":"2016-10-04T13:00:00.000Z","title":null,"userId":1,"companyId":1,"appointmentTypeId":1,"locationId":1},{"id":6,"start":"2016-10-04T14:00:00.000Z","end":"2016-10-04T15:30:00.000Z","title":null,"userId":1,"companyId":1,"appointmentTypeId":2,"locationId":2},{"id":9,"start":"2016-10-04T12:30:00.000Z","end":"2016-10-04T13:30:00.000Z","title":null,"userId":1,"companyId":1,"appointmentTypeId":1,"locationId":1},{"id":10,"start":"2016-10-04T09:00:00.000Z","end":"2016-10-04T10:00:00.000Z","title":null,"userId":1,"companyId":1,"appointmentTypeId":1,"locationId":1},{"id":11,"start":"2016-10-04T10:30:00.000Z","end":"2016-10-04T11:30:00.000Z","title":null,"userId":1,"companyId":1,"appointmentTypeId":1,"locationId":1}]

schema.parse Results:
Event (Id:1, start: 2016-10-04T07:00:00.000Z, end: 2016-10-04T08:00:00.000Z)
Event (Id:3, start: 2016-10-04T11:00:00.000Z, end: 2016-10-04T13:00:00.000Z)
Event (Id:6, start: 2016-10-04T14:00:00.000Z, end: 2016-10-04T15:30:00.000Z)
Event (Id:9, start: 2016-10-04T12:30:00.000Z, end: 2016-10-04T13:30:00.000Z)
Event (Id:10, start: 2016-10-04T09:00:00.000Z, end: 2016-10-04T10:00:00.000Z)
Event (Id:11, start: 2016-10-04T10:30:00.000Z, end: 2016-10-04T11:30:00.000Z)

timePickerDataSource.fetch() data iteration results:
SDS Event (Id:1, start: Tue Oct 04 2016 09:00:00 GMT+0200 (South Africa Standard Time), end: Tue Oct 04 2016 10:00:00 GMT+0200 (South Africa Standard Time))
SDS Event (Id:3, start: Tue Oct 04 2016 13:00:00 GMT+0200 (South Africa Standard Time), end: Tue Oct 04 2016 15:00:00 GMT+0200 (South Africa Standard Time))
SDS Event (Id:6, start: Tue Oct 04 2016 16:00:00 GMT+0200 (South Africa Standard Time), end: Tue Oct 04 2016 17:30:00 GMT+0200 (South Africa Standard Time))
SDS Event (Id:9, start: Tue Oct 04 2016 14:30:00 GMT+0200 (South Africa Standard Time), end: Tue Oct 04 2016 15:30:00 GMT+0200 (South Africa Standard Time))
SDS Event (Id:10, start: Tue Oct 04 2016 11:00:00 GMT+0200 (South Africa Standard Time), end: Tue Oct 04 2016 12:00:00 GMT+0200 (South Africa Standard Time))
SDS Event (Id:11, start: Tue Oct 04 2016 12:30:00 GMT+0200 (South Africa Standard Time), end: Tue Oct 04 2016 13:30:00 GMT+0200 (South Africa Standard Time))

All the times in the fetch() results are pushed forward.
My solution (more like hack) is to recreate the dates without the timezone info...

schema: {
  parse: function(events) {
    $(events).each(function(i, e) {
      //start & end date string, 2016-10-04T10:00:00.000Z
      e.start = new Date(e.start.substring(0,19)+"+0200");
      e.end = new Date(e.end.substring(0,19)+"+0200");
    })
    return events;
  }
}

Please advise on a more correct/efficient way to maintain the integrity of my times.

Many Thanks and Kind Regards,
Grant

[Rosen]

Hello Grant,

As you know the JavaScript Date instances are always created in the timezone of the browser. This will cause the shift you have noticed. In order to instruct the SchedulerDataSource to do the conversion automatically you should set the timezone setting. More information about the timezones and how to setup the scheduler widget can be found in this help article.

Regards,
Rosen
Telerik by Progress

 

 

[Grant]

Hi Rosen, 

Thanks for the response, but the timezone setting isnt making any difference. 

I've removed my date string hack and set the timezone on the scheduler to 'Africa/Johannesburg' (+0200) but theres been no change, in fact no matter what timezone I set, the times are unaffected, I set it to a -0600 one and there was no change.

Is there no way to initialize a date as already being in a specific timezone?

Thanks,
Grant

[Rosen]

Hello Grant,

If you are setting timezone other than "Etc/UTC"  you should verify that the  kendo.timezones.min.js file is included.

In case you continue to experience difficulties please provide a small runnable sample which demonstrates the behavior in question locally.

Regards,
Rosen
Telerik by Progress