I would like to allow the user to choose the TimeZone for viewing the scheduled events. So I put on the page a dropdown list populated with the values returned by .Net method TimeZoneInfo.GetSystemTimeZones and when the user change its value I reflect it to the scheduler control with this code:
function timeZoneChanged(e) {
var scheduler = $('#scheduler').data("kendoScheduler");
scheduler.options.timezone = this.value();
scheduler.dataSource.read(); // (I also tried refreshing the scheduler data source)
}
But nothing happens... Am I doing some mistake here or it is not possible to modify the timezone of a scheduler after the initialization?
Thanks,
Stefano Tassara
11 Answers, 1 is accepted
Currently changing the timezone of already initialized Kendo UI Scheduler is not supported. I would suggest you to take a look at our feedback forums, and submit your suggestion there, so it can be taken into consideration for a future release.
Regards,
Kiril Nikolov
Telerik
This feature is still not supported with Kendo UI Scheduler. As I already suggested - you can check the uservoice section and vote up this feature.
Regards,
Kiril Nikolov
Telerik
Is it supported now? I'm trying to change the timezone trough of the SchedulerDataSource --> schema -->timezone and it doesn't work.
It is not yet supported, as I already suggested, please check the UserVoice section where you can vote up/suggest this feature so it will be considered for a future release.
Regards,
Kiril Nikolov
Telerik
http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/7189233-scheduler-change-time-zone-after-initialization
Hello Michael,
Thanks for sharing your link and opening the UserVoice topic.
Regards,Kiril Nikolov
Telerik
Hi,
Is this feature available now? Is there any datetime picker using which user can select timezone as well?
Hello Akshay Deep,
I am afraid that this feature is not yet available. But you can upvote the UserVoice entry, so it will get more votes therefore will increase the chances for sooner implementation.
Regards,
Kiril Nikolov
Telerik
Until this feature request has enough votes to actually get implemented, wondering if others have any suggestions for possible workarounds.
For my usage, I need to allow the user to select a timezone configuration for viewing a customer's calendar. The user may be in a different timezone than the customer so need ability to set timezone (not just detect based on client's browser). Do I need to handle all date/times and convert manually? Is it best to set the calendar for display in UTC
.Timezone("Etc/UTC")
and then in remote binding for the Read/Update/Create to convert to timezone chosen outside of the scheduler?
I also needed this same exact functionality (and upvoted that UserVoice topic). I was able to get it working using this post as inspiration:
http://www.telerik.com/forums/how-to-change-start-time-and-resources#LDeMKEodkkOG9HsPr91oLg
But, grabbing the previous state of the scheduler.options, and then just directly using that to reinitialize the scheduler after it was destroyed wasn't working for me (it might work with simple options, but the options I have in my actual application are pretty complex), so I took another approach: I keep a reference to the original options object I used to initialize the scheduler, and then use that again after destroying the widget, except I set the new time zone on the options before feeding it to the widget initialization. In my example I'm using a simple IIFE to provide some private scope around my options object and exposing a reinitialize method that can be called onChange of the Time Zone dropdown.
var
myScheduler = (
function
() {
var
options = {
timezone:
"Europe/London"
,
date:
new
Date(
"2013/6/6"
),
startTime:
new
Date(
"2013/6/6 08:00"
),
endTime:
new
Date(
"2013/6/6 18:00"
),
views: [
"day"
,
"week"
],
dataSource: [
{
id: 1,
start:
new
Date(
"2013/6/6 08:00 AM"
),
end:
new
Date(
"2013/6/6 09:00 AM"
),
title:
"Interview"
}
]
}
var
reinitialize =
function
(timeZone) {
var
schedulerElement = $(
"#calendar"
);
var
kendoScheduler = schedulerElement.data(
"kendoScheduler"
);
// pull out the current state of the selected view and date before destroying the widget.
// we'll need this later to set the scheduler back up in it's current state.
var
selectedView = kendoScheduler.viewName();
var
selectedDate = kendoScheduler.date();
// destroy the widget instance.
kendoScheduler.destroy();
// set the new timezone on the global settings object.
if
(timeZone) {
options.timezone = timeZone;
}
// empty and reinitialize the scheduler element, with the global options.
schedulerElement
.empty()
.kendoScheduler(options);
// get the new scheduler instance.
kendoScheduler = schedulerElement.data(
"kendoScheduler"
);
// put the new instance back in it's previous view and date range.
kendoScheduler.view(selectedView);
kendoScheduler.date(selectedDate);
}
// first initialization of the scheduler on page load.
$(
function
() {
$(
"#calendar"
).kendoScheduler(options);
});
return
{
reinitialize: reinitialize
}
})();