SchedulerDataSource altering start/end times to apply timeszone

4 posts, 1 answers
  1. Grant
    Grant avatar
    41 posts
    Member since:
    Jul 2016

    Posted 04 Oct Link to this post

    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

  2. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 06 Oct Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
  4. Grant
    Grant avatar
    41 posts
    Member since:
    Jul 2016

    Posted 06 Oct in reply to Rosen Link to this post

    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

  5. Answer
    Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 06 Oct Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready