Kendo UI Scheduler incorrectly converting times, adding and subtracting hours backwards

Question

I am using the Kendo scheduler and the timezone offset appears to be adding hours and subtracting hours in the opposite direction from what should happen.

When I change my client timezone to a more western timezone, hours are added to the event date times and when I change my client browser to a more eastern timezone, hours are subtracted.

So a client in the Pacific timezone should see the start time as 10:00 AM, but instead it is displaying as 4:00PM. Clients set to the Atlantic timezone see the start time as 12:00PM.

Scheduler code:

$("#scheduler").kendoScheduler({
    date: new Date(),
    height: 900,
    editable: false,
    views: [
        {
            type: "month",
            selected: true,
            eventHeight: 50,
            eventTemplate: $("#event-template-month").html(),
        },{
            type: "agenda",
            eventHeight: 50,
            eventTemplate: $("#event-template-sched").html(),
        }
    ],
    timezone: "America/New_York",
    dataSource: webinarSchedule,
});

The event information is held in an array in a local js file and looks like this:

var webinarSchedule = [//Date are in utc -5:00
{
    title: "Part 1 <br/>The Golden Rule",
    shortName: "1) The Golden Rule ",
    presenter: "Bill Preston",
    description: "A great event",
    synopsis: "Learn stuff",
    seriesNote: "The first of a 4-part series.",
    registration: "https://attendee.gotowebinar.com/register/3782113333237861889",
    start: new Date("2015/1/24 1:00 PM"),
    end: new Date("2015/1/24 1:20 PM"),

},

Answer 1

Yeah, that doesn't seem to work right.

I find the only way to keep your sanity when dealing with JS dates (or dates in computing in general) is to use UTC dates, serialized in ISO format (in general, storing UTC dates on the server is also a better idea). So, I'd suggest creating your events using the appropriate ISO string for the source timezone:

{
    title: "Part 1 <br/>The Golden Rule",
    shortName: "1) The Golden Rule ",
    presenter: "Bill Preston",
    description: "A great event",
    synopsis: "Learn stuff",
    seriesNote: "The first of a 4-part series.",
    registration: "https://attendee.gotowebinar.com/register/3782113333237861889",
    start: new Date(Date.parse("2015-02-11T13:00:00-05:00")), 
    end: new Date(Date.parse("2015-02-11T13:20:00-05:00")),
}

then don't set the schedulers timezone option at all (so it uses local). If you need to pass to the server, you may also want to process the dates first using toISOString.