Skip to main content

DxSchedulerAppointmentMappings.TimeZoneId Property

Maps information about an appointment time zone ID.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor


public DxSchedulerMapping TimeZoneId { get; set; }

Property Value

Type Description

Maps the data field to the TimeZoneId appointment property.


The following code snippet creates three appointments in different time zones. It also contains a combo box that allows users to select a time zone. Once they change the time zone, the OnValueChanged method updates the scheduler’s time zone and redraws the scheduled appointments accordingly.

@using System.Globalization;

<DxScheduler StartDate="@DateTime.Today"
    <DxSchedulerDayView DayCount="1" ShowWorkTimeOnly="true"></DxSchedulerDayView>
    <DxSchedulerWeekView ShowWorkTimeOnly="true"></DxSchedulerWeekView>
    <DxSchedulerWorkWeekView ShowWorkTimeOnly="true"></DxSchedulerWorkWeekView>
    <DxSchedulerMonthView ShowWorkDaysOnly="true" MonthCount="1"></DxSchedulerMonthView>
    <DxSchedulerTimelineView Duration="@TimeSpan.FromHours(48)" CellMinWidth="80">
            <DxSchedulerTimeScale Unit="@SchedulerTimeScaleUnit.Day" UnitCount="1"></DxSchedulerTimeScale>
            <DxSchedulerTimeScale Unit="@SchedulerTimeScaleUnit.Hour" UnitCount="2"></DxSchedulerTimeScale>


<DxComboBox Data="timeZones" Value=selectedTimeZone ValueChanged="@((string t) => OnValueChanged(t))"></DxComboBox>

@code {
    List<string> timeZones = new List<string>() { 
        "UTC", "Egypt Standard Time", "Turkey Standard Time", "Caucasus Standard Time" 
    string selectedTimeZone { get; set; } = "UTC";
    System.Collections.ObjectModel.ReadOnlyCollection<TimeZoneInfo> zones = TimeZoneInfo.GetSystemTimeZones();
    DxSchedulerDataStorage DataStorage = null;

    protected override void OnInitialized() {
        DataStorage = new DxSchedulerDataStorage() {
                AppointmentsSource = AppointmentCollection.GetAppointments(),
                AppointmentMappings = new DxSchedulerAppointmentMappings() {
                    Id = "AppointmentID",
                    Type = "AppointmentType",
                    Start = "StartDate",
                    End = "EndDate",
                    Subject = "Caption",
                    AllDay = "AllDay",
                    Location = "Location",
                    Description = "Description",
                    LabelId = "Label",
                    StatusId = "Status",
                    RecurrenceInfo = "Recurrence",
                    ResourceId = "ResourceId",
                    TimeZoneId = "TimeZone"
                ResourcesSource = ResourceCollection.GetResourcesForGrouping(),
                ResourceMappings = new DxSchedulerResourceMappings() {
                    Id = "Id",
                    Caption = "Name",
                    BackgroundCssClass = "BackgroundCss",
                    TextCssClass = "TextCss"
                TimeZone = TimeZoneInfo.GetSystemTimeZones().FirstOrDefault(tz => tz.Id == selectedTimeZone)

    void OnValueChanged(string newTZ)  {
        selectedTimeZone = newTZ;
        DataStorage.TimeZone = TimeZoneInfo.GetSystemTimeZones().FirstOrDefault(tz => tz.Id == selectedTimeZone);

    List<Resource> VisibleResources = ResourceCollection.GetResources().Take(2).ToList();

Time Zones


In a real project, you may need to determine the time zone of the current user. You can store this information as part of the user account. You can also call the JavaScript method and get information about the client time zone from the browser (refer to this thread for example).

See Also