New to Telerik UI for ASP.NET MVCStart a free 30-day trial

Changing the Time Zone of the Scheduler Dynamically

Environment

ProductTelerik UI for ASP.NET MVC Scheduler
Product VersionCreated with version 2025.1.227

Description

How can I change the time zone in ASP.NET MVC Scheduler component after initialization?

Solution

By default, the Scheduler alters its displayed data depending on the defined Timezone() setting. In some cases, you may want to allow the end user to change the time zone of the Scheduler dynamically based on a specified user action or condition.

To achieve this requirement, you can create a standalone DataSource instance and then pass it to the Scheduler definition.

Then, you can include a selection component like a DropDownList that shows different time zone options. When the user selects a specified time zone, you can reset the Scheduler's DataSource to display the events in the respective time zone.

Razor
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.timezones.min.js"></script>

<script>
    // Initialize a DropDownList widget with jQuery to allow the user to change the timezone.
    $(document).ready(function(){
            $(".k-nav-current").after(`<select id='timeZoneChooser' onchange='changeTimeZone(this);' >
				    <option>Etc/UTC</option>
				    <option>Europe/London</option>
				</select>`);
            $("#timeZoneChooser").kendoDropDownList();
            changeTimeZone($("#timeZoneChooser")[0]);
    });

    function changeTimeZone(selectEl){
        var scheduler=$("#scheduler").data().kendoScheduler;
        // Update the current DataSource of the Scheduler by calling the "setDataSource()" method.
        scheduler.setDataSource(getDataSource(selectEl.value));
    }

    // Generate a new DataSource instance based on the chosen timezone.
    function getDataSource(timeZoneName)
    {
        return new kendo.data.SchedulerDataSource({
                                            "type": (function() {
                                                if (kendo.data.transports['aspnetmvc-ajax']) {
                                                    return 'aspnetmvc-ajax';
                                                } else {
                                                    throw new Error('The kendo.aspnetmvc.min.js script is not included.');
                                                }
                                            }
                                            )(),
                                            "transport": {
                                                "read": {
                                                    "url": "/aspnet-core/scheduler/events_read"
                                                },
                                                "prefix": "",
                                                "update": {
                                                    "url": "/aspnet-core/scheduler/events_update"
                                                },
                                                "create": {
                                                    "url": "/aspnet-core/scheduler/events_create"
                                                },
                                                "destroy": {
                                                    "url": "/aspnet-core/scheduler/events_destroy"
                                                },
                                                "stringifyDates": true
                                            },
                                            "schema": {
                                                "timezone": timeZoneName,
                                                "data": "Data",
                                                "total": "Total",
                                                "errors": "Errors",
                                                "model": {
                                                    "id": "TaskID",
                                                    "fields": {
                                                        "TaskID": {
                                                            "type": "number"
                                                        },
                                                        "title": {
                                                            "from": "Title",
                                                            "type": "string",
                                                            "defaultValue": "No title"
                                                        },
                                                        "description": {
                                                            "from": "Description",
                                                            "type": "string"
                                                        },
                                                        "start": {
                                                            "from": "Start",
                                                            "type": "date"
                                                        },
                                                        "startTimezone": {
                                                            "from": "StartTimezone",
                                                            "type": "string"
                                                        },
                                                        "end": {
                                                            "from": "End",
                                                            "type": "date"
                                                        },
                                                        "endTimezone": {
                                                            "from": "EndTimezone",
                                                            "type": "string"
                                                        },
                                                        "recurrenceRule": {
                                                            "from": "RecurrenceRule",
                                                            "type": "string"
                                                        },
                                                        "recurrenceId": {
                                                            "from": "RecurrenceID",
                                                            "type": "number",
                                                            "defaultValue": null
                                                        },
                                                        "recurrenceException": {
                                                            "from": "RecurrenceException",
                                                            "type": "string"
                                                        },
                                                        "isAllDay": {
                                                            "from": "IsAllDay",
                                                            "type": "boolean"
                                                        },
                                                        "OwnerID": {
                                                            "type": "number",
                                                            "defaultValue": null
                                                        }
                                                    }
                                                }
                                            }
                                        });
    }
</script>

@(Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.TaskViewModel>()
    .Name("scheduler")
    .Date(new DateTime(2025, 6, 13))
    .StartTime(new DateTime(2025, 6, 13, 14, 00, 00))
    .Height(600)
    .Selectable(true)
    .Views(views =>
    {
        views.DayView();
        views.WeekView(weekView => weekView.Selected(true));
        views.MonthView();
        views.AgendaView();
        views.TimelineView();
    })
)


<style>
    .k-list-content.k-list-scroller{
        height: 60px;
    }
</style>

You can see the solution in action with this live example: https://netcorerepl.telerik.com/QTaHmels14bMwUio16

More ASP.NET MVC Scheduler Resources

See Also