I'm trying to use the KendoUI Scheduler widget (MVC helpers) to filter appointments in a particular time zone (say, 'Europe/Minsk'), on a computer set to my own time zone, in Tasmania. The Scheduler widget's time zone is set to 'Europe/Minsk'. I've enabled server filtering according to Telerik's code library example (http://www.telerik.com/support/code-library/kendoui-scheduler-server-filtering). However, the server call for the week view is providing the wrong dates and times to the server, providing a UTC date string equivalent to midnight on Monday in my own time zone, instead of the configured time zone.
It's easy enough to see why; it appears that the scheduler.view().startDate()
in my getAdditionalData()
function returns something like: Date {Mon Oct 19 2015 00:00:00 GMT+1100 (Tasmania Standard Time)}
, which is converted to "2015-10-18T13:00:00.000Z", rather than the local equivalent relative to the configured time zone. In short, the call to scheduler.view().startDate()
is returning the wrong date given the configured time zone.
How can I get around this apparent issue? I don't see any other way of knowing the date range the scheduler is displaying, and it seems the only way to retrieve it is broken.
The issue is reproducible with the unchanged code library example. Just try dragging an appointment the the last hours of the week, and watch it disappear altogether after refreshing.
For quick reference, the getAdditionalData function is as follows:
function getAdditionalData() {
var scheduler = $("#scheduler").getKendoScheduler();
var result = {
start: scheduler.view().startDate().toISOString(),
end: scheduler.view().endDate().toISOString()
}
return result;
}
Vladimir's answer provided a way to convert the date range to UTC, however the date range displayed on the scheduler is not in UTC, but the configured time zone.
Using the fabulous moment.js, I was able to convert it to the correct date range:
function getFilters() {
var scheduler = $("#scheduler").getKendoScheduler();
var start = moment.tz(getDateParts(scheduler.view().startDate()), scheduler.options.timezone);
// Assuming the scheduler will never show part days, the end date needs an extra day to ensure events on the day are included.
var actualEnd = new Date(scheduler.view().endDate());
actualEnd.setDate(actualEnd.getDate() + 1);
var end = moment.tz(getDateParts(actualEnd), scheduler.options.timezone);
var result = {
start: start.toISOString(),
end: end.toISOString()
}
return result;
}
function getDateParts(date) {
return [
date.getFullYear(),
date.getMonth(),
date.getDate(),
date.getHours(),
date.getMinutes(),
date.getSeconds()
];
}
This now queries the web service for all events falling within the visible date range, which it does correctly. Now I just need to figure out why the Scheduler widget is not displaying any events on the last day of the week view, despite these being returned in the web service call with the correct UTC times.
Edit: The reason that events on the last day weren't rendering was because I unintentionally changed the endDate of the view(). Of course; dates are not immutable in JavaScript.